5 HTML5 Formulareingaben Tricks

Die häufigste Art von Benutzereingaben für ein javascript-Programm zu erhalten ist durch Formularelemente mit Hilfe von HTML. Die neueste Version von HTML, HTML5, hat mehrere neue Form Elemente und Attribute.

Texteingaben

Texteingaben sind die einfachste Art von HTML-Formularfeld. Sie sind für das Geben Sie die Website-Benutzer eine leere Eingabe verwendet, wo sie einen beliebigen Wert eingeben. Hier ist ein Beispiel für den Code verwendet, um eine Texteingabe zu erstellen:

Hier ist, was dieses Feld wie in einem Browser aussieht:

Platzhaltertext

Platzhalter Text erscheint innerhalb des Eingabefeldes, bevor ein Benutzer die Eingabe beginnt. Es ist nützlich für die dem Benutzer erklären, was Sie erwarten, dass sie zu betreten.

Hier ist ein Beispiel von Platzhalter-Text in einem Texteingabe:

Hier ist, was dieses Feld wie in einem Web-Browser aussieht.

Autofokus

Wenn das Eingabefeld ausgewählt und Sie können Ihren Cursor in der es, es zu sehen # 147-Fokus hat. # 148- Wenn Sie ein bestimmtes Feld (wie das Feld Vorname) haben wollen # 147-Fokus # 148- sobald eine Webseite geladen wird, können Sie den Autofokus-Attribut verwenden. Hier ist, wie es aussieht:

E-Mail-Eingang

Die E-Mail-Eingabefeld sieht aus wie ein Texteingabefeld, und es funktioniert wie ein Texteingabefeld in den meisten Fällen auch. Aber manchmal, behandelt der Web-Browser die E-Mail-Eingabefeld unterschiedlich aus einem Texteingabefeld. Wenn beispielsweise eine E-Mail-Eingabefeld ist # 147-im Fokus # 148- auf einem iPhone, eine spezielle Tastatur angezeigt, die Verknüpfungen für die Eingabe von E-Mail-Adressen verfügt.

Hier ist ein Beispiel für die E-Mail-Eingabefeld mit:

Slider-Eingang

Ein Schieber Eingang ist ein Eingabefeld, das dem Benutzer erlaubt, eine Zahl innerhalb eines Bereichs von Zahlen zu wählen, durch eine Drag-and-Drop-Steuerung.

Hier ist der Code für das Erstellen eines Slider:

Hier ist, was ein Slider wie in einem Web-Browser aussieht.

Erforderlich

Wenn Sie Ihren Benutzer erzwingen möchten einen Wert in ein Feld eingeben, bevor er in der Lage ist, das Formular abzusenden, hat HTML5 ein Attribut namens erforderlich.

Um ein Formularfeld erforderlich machen, müssen Sie nur das neue Attribut in einem Formulareingabefeld hinzuzufügen, wie folgt aus:

Wenn ein Benutzer versucht, dieses Formular abschicken, ohne in die Füllung Telefonnummer Feld, bekommt sie ihr eine Nachricht zu fragen es zu füllen:

Zum Zeitpunkt des Schreibens, unterstützen nicht alle Web-Browser die erforderlich Attribut, aber es wird von Chrome, Firefox, Internet Explorer und Opera unterstützt.

Wenn Sie mehr wissen

Weitere Informationen über die Elemente und Attribute und wie man mit ihnen in javascript zu arbeiten, besuchen Sie die HTML-Formulare Leitfaden bei Mozilla Developer Network.