Feeela

Entwurf eines durchgehenden Beispiels für Websiteentwicklung: XHTML: Formulare

Beispiel inputs

Demonstration 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

<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

size 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

<form action="register.php" method="post">
  […]
  <button type="submit"><img src="register.gif" alt="" /> Registrieren</button>
</form>

Beispiel label

angeä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

<form action="register.php" method="post">
  <fieldset>
    <legend>Pflichtangaben</legend>
    […]
  </fieldset>
  <fieldset>
    <legend>optionale Angaben</legend>
    […]
  </fieldset>
</form>

umfassende, fertige Beispiele

<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>