HTML Formular gestalten...

Alles, was nicht direkt mit Python-Problemen zu tun hat. Dies ist auch der perfekte Platz für Jobangebote.
Benutzeravatar
jens
Moderator
Beiträge: 8458
Registriert: Dienstag 10. August 2004, 09:40
Wohnort: duisburg
Kontaktdaten:

HTML Formular gestalten...

Beitragvon jens » Dienstag 20. Dezember 2005, 17:25

Ich bin gerade auf der Suche nach eine schönen Gestaltung einers html Formulars für PyLucid...
Bisher habe ich einfach Tabellen genommen... Ist IMHO auch fast ein tabellarischer Inhalt... Aber schöner wäre es mit CSS.

Ich hab verschieden Sachen Probiert, bekomme es aber einfach nicht hin:

Code: Alles auswählen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<fieldset class="edit_page">
<legend><strong>Page Permissions</strong></legend>
<ul>
  <li>
   <label for="permitEditGroupID">Editable by Group:</label>
   <select name="permitEditGroupID" id="permitEditGroupID">
        <option value="1" selected="selected">managePages</option>
        <option value="2">manageStyles</option>
        <option value="3">manageTemplates</option>
        <option value="4">admin</option>
    </select>
</li>
<li>
   <label for="permitViewGroupID">Viewable by Group:</label>
    <select name="permitViewGroupID" id="permitViewGroupID">
        <option value="1" selected="selected">managePages</option>
        <option value="2">manageStyles</option>
        <option value="3">manageTemplates</option>
        <option value="4">admin</option>
    </select>
</li>
<li>
   <label for="showlinks">showlinks:</label>
   <input name="showlinks" type="checkbox" id="showlinks" value="1" checked />
</li>
<li>
   <label for="permitViewPublic">permit view public:</label>
   <input name="permitViewPublic" type="checkbox" id="permitViewPublic" value="1" checked />
</li>
</ul>
</fieldset>
</form>

<style type="text/css">
.edit_page label {
  border: 1px solid red;
  width: 300px;
  float: left;
  display: block;
}
.edit_page input, .edit_page select {
  border: 1px solid blue;
  fl_oat: right;
  wi_dth: 300px;
  dis_play: block;
}
</style>
</body>
</html>


Meine alte Variante: http://pylucid.python-hosting.com/file/ ... html?rev=5

direkt zum ansehen:
http://pylucid.python-hosting.com/file/ ... format=raw

CMS in Python: http://www.pylucid.org
GitHub | Open HUB | Xing | Linked in
Bitcoins to: 1JEgSQepxGjdprNedC9tXQWLpS424AL8cd
Benutzeravatar
jens
Moderator
Beiträge: 8458
Registriert: Dienstag 10. August 2004, 09:40
Wohnort: duisburg
Kontaktdaten:

Beitragvon jens » Mittwoch 21. Dezember 2005, 08:05

Hab jetzt endlich mal ein paar Informationen genau dazu gefunden:
http://www.stichpunkt.de/css/formulare.html
http://www.einfach-fuer-alle.de/artikel/formulare/

CMS in Python: http://www.pylucid.org
GitHub | Open HUB | Xing | Linked in
Bitcoins to: 1JEgSQepxGjdprNedC9tXQWLpS424AL8cd
Benutzeravatar
jens
Moderator
Beiträge: 8458
Registriert: Dienstag 10. August 2004, 09:40
Wohnort: duisburg
Kontaktdaten:

Beitragvon jens » Mittwoch 21. Dezember 2005, 10:02

Auch wenn es vielleicht niemanden Interessiert... Ich hab nun versucht eine möglichst einfache Regelung zu finden. Leider ist es garnicht so einfach ein Forumlar nur mit CSS zu gestalten. Deswegen gibt es im Netz auch meist nur mit Tabellen realisierte Formular :(

Hier nun mein Beispielformular, so will ich es jetzt generell machen:

Code: Alles auswählen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
label, input, select, textarea {
    vertical-align: middle;
    margin-top, margin-bottom: 5px;
}
label.left {
   float: left;
   text-align: right;

   width: 7em;
   margin-right: .3em;
    padding: 0px;
}
.rightonly {
    /* Eingabefelder mit Text dahinter */
    margin-left: 7.3em;
    padding: 0px;
}

form br {
    /*  floats nach dem Forumlar aufheben */
    clear: both;
}

label, select, input {
    cursor: pointer;
}
input[type=text] {
   cursor:   text;
}

input, textarea {
    color: #000;
    background: #ddd;
}
input:focus, textarea:focus {
    border: 2px solid grey;
    background: #fff;
}
</style>
</head>
<body>
<form action="#">
<fieldset><legend>Einstellungen 1</legend>
    <label for="text" class="left">Text:</label>
    <input type="text" id="text" size="20"
    title="Bitte hier Text eingeben" value="" /><br />

    <label for="auswahl" class="left">Option:</label>
    <select id="auswahl" size="1" title="Bitte auswählen">
        <option value="auswahl1">Auswahl 1</option>
        <option value="auswahl2">Auswahl 2</option>
    </select><br />
</fieldset>

<fieldset><legend>Einstellungen mit dem Text rechts neben den inputs</legend>
    <div class="rightonly">
    <input id="ja" type="radio" name="rb" value="ja" title="Entweder" />
    <label for="ja">Entweder</label><br />
    <input id="nein" type="radio" name="rb" value="nein" title="Oder" />
    <label for="nein">Oder</label><br />
    <input id="doch" type="checkbox" value="sowohl" title="Sowohl" />
    <label for="doch">Sowohl</label><br />
    <input id="oder" type="checkbox" value="alsauch" title="Als auch" />
    <label for="oder">Als auch</label><br />
    </div>
</fieldset>

<fieldset><legend>Einstellungen 3</legend>
    <label for="ja2" class="left">Oder1:</label>
    <input id="ja2" class="right" type="radio" name="rb2" value="nein" class="right" title="Oder" /><br />
    <label for="nein2" class="left">Oder2:</label>
    <input id="nein2" class="right" type="radio" name="rb2" value="nein" class="right" title="Oder" /><br />

    <label for="doch" class="left">Sowohl:</label>
    <input id="doch" class="right" type="checkbox" value="sowohl" class="right" title="Sowohl" /><br />
</fieldset>

<label for="text" class="left">Ihre Nachricht:</label>
<textarea id="text" class="right" name="nachricht" rows="15" cols="30"
title="Hier bitte Ihre Nachricht eingeben">BlaBlaBla</textarea><br />

<input type="submit" class="rightonly" value="Bestellen" title="Absenden - Bitte nur ein mal drücken" />
</form>
</body>
</html>



EDIT: So, hab mein Formular umgestellt: http://pylucid.python-hosting.com/file/ ... tml?rev=42

direkt zum ansehen:
http://pylucid.python-hosting.com/file/ ... format=raw

CMS in Python: http://www.pylucid.org
GitHub | Open HUB | Xing | Linked in
Bitcoins to: 1JEgSQepxGjdprNedC9tXQWLpS424AL8cd
Benutzeravatar
tabellar
User
Beiträge: 186
Registriert: Mittwoch 4. September 2002, 15:28

Beitragvon tabellar » Mittwoch 21. Dezember 2005, 21:00

jens hat geschrieben:Auch wenn es vielleicht niemanden Interessiert... Ich hab nun versucht eine möglichst einfache Regelung zu finden. Leider ist es garnicht so einfach ein Forumlar nur mit CSS zu gestalten. Deswegen gibt es im Netz auch meist nur mit Tabellen realisierte Formular :( <snipped>


Wer schaut schon in den Offtopic Bereich? Lass den thread doch von Leonidas
z.B. in den CGI, Netzwerkbereich verschieben. Ich denke, dort wäre er
deutlich besser aufgehoben.

Ich bin zwar nicht gerade der HTML Designer, aber ich weiss aus nächster
Quelle, dass mit CSS und JavaScript super Designs gelingen. Ohne Tabellen.
Wenn nicht Tabellen, dann sind DIVIDER das Mittel der Wahl. Dein Formular
sieht doch auch schon richtig gut aus ... :wink: .

Tabellar
Benutzeravatar
jens
Moderator
Beiträge: 8458
Registriert: Dienstag 10. August 2004, 09:40
Wohnort: duisburg
Kontaktdaten:

Beitragvon jens » Mittwoch 21. Dezember 2005, 21:56

tabellar hat geschrieben:Wer schaut schon in den Offtopic Bereich? Lass den thread doch von Leonidas z.B. in den CGI, Netzwerkbereich verschieben. Ich denke, dort wäre er deutlich besser aufgehoben.

Naja, hat nicht wirklich was mit Python zu tun, ist also Offtopic... Ich selber schaue eigentlich eh immer auf "newposts", von daher wäre mir der Thread aufgefallen... Du hast ihn ja auch entdeckt...

Also mittlerweile ist mein Formular schon ganz ok. Allerdings nicht so 100%tig, wie mit Tabellen :( Aber ich lasse es jetzt so...

CMS in Python: http://www.pylucid.org
GitHub | Open HUB | Xing | Linked in
Bitcoins to: 1JEgSQepxGjdprNedC9tXQWLpS424AL8cd

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder