Formular; Label&Input...

[jackob100]

Hallo
Ich versuche im Moment meine CSS Kenntnisse zu erweitern
Ich möchte eine Liste mit input-checkbox Feldern schön untereinander darstellen.

Wie ich im Web gelesen habe, sollte man Formulare mit "fielset, legend und label" erstellen.

Nun könnt ihr mein Resultat sehen:

fieldset{
	border: 1px solid #000000;
	background-color:#33CCFF;
	display: block;
	width: 400px;
	padding: 0px;
}

label{
	display: block;
	width: 200px;
	float: left;
	clear: left;
	margin: -1em 0 0 0;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
}

label.erstes{
	margin-top: 50px;
}

input{
	display:block;
	position: relative;
	top:-1.4em;
	left: 100px;
	padding: 2px;
	background: #fff;
}

<fieldset>
	<legend>Ihre Auswahl</legend>
		<label for="Auswahl1" class="erstes">Auswahl1<input type="checkbox" name="checkbox" id="checkbox"></label>
		<label for="Auswahl2">Auswahl2<input type="checkbox" name="checkbox" id="checkbox"></label>
		<label for="Auswahl3">Auswahl3<input type="checkbox" name="checkbox" id="checkbox"></label>
	</fieldset>

Ist eigentlich alles oke, Firefox und IE zeigen das gleiche...

Hoffe jedoch noch auf Feedbacks
Ist dieser Aufbau üblich? Was würdet ihr ändern?

Gruss Jackob

 

[deepthroat]

Hi.

Da sind noch ein paar Fehler drin. Das Universal-Attribut id muss für jedes Element eindeutig sein. Der Wert des Attributes for vom label Element muss eine valide id eines Elementes beinhalten.

Innerhalb des label Elementes würde ich keine Form-Elemente einfügen.

<label for="Auswahl1" class="erstes">Auswahl1</label><input type="checkbox" name="checkbox" id="Auswahl1" >

Gruß

PS: Du solltest deinen HTML und CSS Code validieren. So kannst du sicherer sein, dass dein Code nicht fehlerhaft ist. Siehe z.B. http://validator.w3.org/

 

[Maik]

Hi.

Ist eigentlich alles oke, Firefox und IE zeigen das gleiche...

Der Artikel Styling form controls dürfte dich interessieren, inwiefern sich Formularelemente mit CSS in den unterschiedlichen Browsern auf unterschiedlichen Betriebssystemen einheitlich gestalten lassen.