HTML: Formulare 5

Sonntag 9. Februar 2020 von Torsten

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>

Dieser Beitrag wurde erstellt am Sonntag 9. Februar 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

1 Kommentar über “HTML: Formulare 5”

  1. Torsten schrieb:

    Quelltext kopieren und dann die notwendigen Anpassungen vornehmen! Zeichencodierung festlegen, Formularfelder mit sinnvollen Namen versehen, echte Anführungszeichen einfügen…

    Wäre ja auch zu einfach, wenn man HTML und CSS lernen möchte und einfach nur fertige Quelltexte kopiert :-)

Kommentar schreiben