HTML Formulare 5

Noch mehr HTML Formularelemente gibt es im fünften Artikel….Hier kommen jetzt die spannenden HTML 5 Elemente zum Einsatz…

Textvorbelegung mit Placeholder:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“vorname“ placeholder=“Max Mustermann“ > Textvorbelegung
</form>

Pflichtfeld mit Required:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“name“ required > Pflichtfeld mit required
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>

Das neue „required“ Attribut ist schon der Knaller, wenn versucht wird das Formular leer abzuschicken, dann gibt es eine Warnung

Autofocus:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“text“ name=“vorname“ required autofocus > Vorname Pflichtfeld mit required und autofocus
<input type=“text“ name=“nachname“ required > Nachname Pflichtfeld mit required
<input type=“text“ name=“ort“ required > Ort Pflichtfeld mit required
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>

Per „autofocus“ wird der Cursor im entsprechenden Formularfeld positioniert.

Formularfeld für E-Mail:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“email“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“E-Mail Adresse eintragen“ > E-Mail Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>

Für E-Mail Adressen gibt es ab HTML5 auch ein eigenes input-Element.

Dieses neue Formularelement wird in PHP noch eine Rolle spielen, denn hier wird schon auf HTML Ebene ein Formularcheck durchgeführt, ob eine gültige Mailadresse eingegeben wurde.

Formularfeld für Webadresse:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“url“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“Webadresse eintragen“ > Webadresse Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>

Auch das Webadresse-Feld prüft schon die Eingabe

Formularfeld für Telefonnummer:

<form action=“Dateipfad“ method=“post“ accept-charset=“Zeichencodierung“>
<input type=“tel“ name=“vorname“ size=“40″ maxlength=“40″ placeholder=“Telefonnr. eintragen“ > Telefonnummer Formularelement
<br /><br />
<input type=“submit“ value=“Absenden „>
<input type=“reset“ value=“Abbrechen“>
</form>