Feeela
Beigetreten 5. März 2009
Entwurf eines durchgehenden Beispiels für Websiteentwicklung: XHTML: Formulare
BearbeitenBeispiel inputs
BearbeitenDemonstration verschiedener Eingabefeldertypen; Nutzung einer Liste zur Strukturierung, da es ja nun mal eine Liste von einzugebenen Daten ist;
<form action="register.php" method="post">
<ul>
<li>Spitzname: <input type="text" name="username" /></li>
<li>Kennwort: <input type="password" name="password" /></li>
<li>Geschlecht:<br />
<input type="radio" name="gender" value="male" /> männlich<br />
<input type="radio" name="gender" value="female" /> weiblich
</li>
<li><input type="checkbox" name="agb_checkbox" value="1" /> Hiermit akzeptiere ich die Allgemeine Geschäftsbedingungen (AGB)</li>
<li><input type="submit" value="Registrieren" /></li>
</ul>
</form>
Beispiel textarea
Bearbeiten<form action="register.php" method="post">
<p>Signatur, eine kurze Beschreibung über dich selbst:</p>
<textarea name="description" id="i_description" rows="6" cols="40"></textarea>
<input type="submit" value="absenden" />
</form>
Beispiel select
Bearbeitensize ist kein Pflicht-Attribut
<form action="register.php" method="post">
<p>Herkunftsland:</p>
<select name="country">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
<option value="li">Liechtenstein</option>
<option value="lu">Luxemburg</option>
</select>
<input type="submit" value="absenden" />
</form>
Beispiel button
Bearbeiten<form action="register.php" method="post">
[…]
<button type="submit"><img src="register.gif" alt="" /> Registrieren</button>
</form>
Beispiel label
Bearbeitenangeänderte Benennung der id- und for-Attribute zur Verbeserung der Übersichtlichkeit
<form action="register.php" method="post">
<ul>
<li><label for="i_username">Spitzname:</label><input type="text" id="i_username" name="username" /></li>
<li><label for="i_password">Kennwort:</label><input type="password" id="i_password" name="password" /></li>
<li><label for="i_password_control">Kennwort zur Kontrolle:</label><input type="password" id="i_password_control" name="password_control" /></li>
<li><label for="i_email">E-Mail-Adresse:</label><input type="text" id="i_email" name="email" /></li>
<li><input type="checkbox" id="i_agb_checkbox" name="agb_checkbox" value="1" />
<label for="i_agb_checkbox">Hiermit akzeptiere ich die Allgemeine Geschäftsbedingungen (AGB)</label></li>
<li><input type="submit" value="Registrieren" /></li>
</ul>
</form>
Beispiel fieldset
Bearbeiten<form action="register.php" method="post">
<fieldset>
<legend>Pflichtangaben</legend>
[…]
</fieldset>
<fieldset>
<legend>optionale Angaben</legend>
[…]
</fieldset>
</form>
umfassende, fertige Beispiele
Bearbeiten<h2>Einrichtung eines Nutzeraccounts auf example.org (XHTML1.1)</h2>
<form action="register.php" method="post">
<fieldset>
<legend>Pflichtangaben</legend>
<ul>
<li><label for="i_username">Spitzname:</label><input type="text" id="i_username" name="username" /></li>
<li><label for="i_password">Kennwort:</label><input type="password" id="i_password" name="password" /></li>
<li><label for="i_password_control">Kennwort zur Kontrolle:</label><input type="password" id="i_password_control" name="password_control" /></li>
<li><label for="i_email">E-Mail-Adresse:</label><input type="text" id="i_email" name="email" /></li>
<li><input type="checkbox" id="i_agb_checkbox" name="agb_checkbox" value="1" />
<label for="i_agb_checkbox">Hiermit akzeptiere ich die <a href="agb.htm">Allgemeine Geschäftsbedingungen</a> (AGB)</label></li>
<li><button type="submit"><img src=".gif" alt="" /> Registrieren</button></li>
</ul>
</fieldset>
<fieldset>
<legend>optionale Angaben</legend>
<ul>
<li><label for="i_display_name">Anzeigename:</label><input type="text" id="i_display_name" name="display_name" /></li>
<li><label>Geschlecht:</label>
<div class="multiple_form_elements">
<input type="radio" id="i_gender_male" name="gender" value="male" /><label for="i_gender_male">männlich</label><br />
<input type="radio" id="i_gender_female" name="gender" value="female" /><label for="i_gender_female">weiblich</label>
</div>
</li>
<li><label for="i_country">Herkunftsland:</label>
<select name="country" id="i_country">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
<option value="li">Liechtenstein</option>
<option value="lu">Luxemburg</option>
</select>
</li>
<li><label for="i_description">Signatur, kurze Beschreibung über dich:</label>
<textarea name="description" id="i_description" rows="6" cols="40"></textarea>
</li>
<li><button type="submit"><img src="register.gif" alt="" /> Registrieren</button></li>
</ul>
</fieldset>
</form>
Diese Beispiel führt als weiteren input-type "email" und nutzt das boolsche Attribut required; beide werden durch aktuelle Browser erkannt und zur Client-seitigen Validierung genutzt
<h2>Einrichtung eines Nutzeraccounts auf example.org (XHTML5)</h2>
<form action="register.php" method="post">
<fieldset>
<legend>Pflichtangaben</legend>
<ul>
<li><label for="i_username">Spitzname:</label><input type="text" id="i_username" name="username" required="required" /></li>
<li><label for="i_password">Kennwort:</label><input type="password" id="i_password" name="password" required="required" /></li>
<li><label for="i_password_control">Kennwort zur Kontrolle:</label><input type="password" id="i_password_control" name="password_control" required="required" /></li>
<li><label for="i_email">E-Mail-Adresse:</label><input type="email" id="i_email" name="email" required="required" /></li>
<li><input type="checkbox" id="i_agb_checkbox" name="agb_checkbox" value="1" required="required" />
<label for="i_agb_checkbox">Hiermit akzeptiere ich die <a href="agb.htm">Allgemeine Geschäftsbedingungen</a> (AGB)</label>
</li>
<li><button type="submit"><img src="register.gif" alt="" /> Registrieren</button></li>
</ul>
</fieldset>
<fieldset>
<legend>optionale Angaben</legend>
<ul>
<li><label for="i_display_name">Anzeigename:</label><input type="text" id="i_display_name" name="display_name" /></li>
<li><label>Geschlecht:</label>
<div class="multiple_form_elements">
<input type="radio" id="i_gender_male" name="gender" value="male" /><label for="i_gender_male">männlich</label><br />
<input type="radio" id="i_gender_female" name="gender" value="female" /><label for="i_gender_female">weiblich</label>
</div>
</li>
<li><label for="i_country">Herkunftsland:</label>
<select name="country" id="i_country">
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
<option value="li">Liechtenstein</option>
<option value="lu">Luxemburg</option>
</select>
</li>
<li><label for="i_description">Signatur, kurze Beschreibung über dich:</label>
<textarea name="description" id="i_description" rows="6" cols="40"></textarea>
</li>
<li><button type="submit"><img src="register.gif" alt="" /> Registrieren</button></li>
</ul>
</fieldset>
</form>