Gruppierung mit dem "fieldset" Tag

Wenn man längere Formulare hat kann es sich durchaus anbieten verschiedene Felder in Gruppen zusammenzufassen. Um das zu machen kann man das <fieldset> Element benutzen. Der Name der Gruppe wird durch das erste <legend> Element festgelegt, das als Unterelement vom <fieldset> Element angelegt wird. Wo wir schon dabei sind wollen wir direkt noch ein Element vorstellen, das <label> Element. Das Label wird benutzt um jedem Element eine Beschriftung hinzuzufügen. Es wird mit dem for-Attribut immer dem Feld zugeordnet, zu dem es gehört.

Nun werden wir noch ein Beispiel machen in dem wir unsere neu vorgestellten Elemente verwenden:

<form>
	<fieldset>
		<legend>Contact Details</legend>
			<label for="name">Name:</label>
			<input id="name"><br />

			<label for="telephone">Telephone:</label>
			<input id="telephone"><br />

			<label for="user-email">Email:</label>
			<input id="user-email">
	</fieldset>
	<fieldset>
		<legend>User info</legend>
			<label for="username">Username:</label>
			<input id="username"><br />

			<label for="password">Password:</label>
			<input id="password"><br />
	</fieldset>
	<input type="submit" value="Submit now" />
</form>

Aber warum sollte man fieldsets benutzen? Stellen wir uns vor wir würden gerne noch etwas zu unserem Formular hinzufügen, wie z.B. das Lieblingsessen. Dann würde man die verschiedenen Arten von Essen in einem Fieldset gruppieren und hätte so eine schönere Struktur im Formular. Hier wurde auch das ID Feld zu den Input Feldern hinzugefügt. Die ID verleiht den Elementen eine eindeutige Identifizierbarkeit und man kann es wie bereits erwähnt in Zusammenhang mit den Labels benutzen. Mittels des for-Attributes werden dann ein Eingabefeld und ein Label miteinander verbunden.

We have already looked at some of the different types of input fields that you can use in your webform – the text field and the submit button.
A text field is generally 20 characters long, but if you need a larger text field this can be changed, of cause. All you have to do is use the size attribute;

<input type="text" size="35" maxlength="140">

Wie man hier sieht habe ich neben dem size Attribut noch ein weiteres Atrribut -nämlich maxlength angefügt. Das Attribut definiert exakt wieviele Zeichen in ein Feld eingegeben werden können. Ich habe hier 140 Zeichen gewählt um zu zeigen wie man mit maxlength auch Nachrichten im Twitter Stil verfassen könnte.