HTML Input Types / Eingabeelemente

Heute möchte ich ein wenig über die den Grundlagen von HTML schreiben, um zu zeigen, welche Eingabeelemente es gibt und wie sie verwendet werden können.

Input types für HTML-Formulare

• text
• email
• hidden
• number
• range
• password
• submit
• checkbox
• radio
• file
• date
• color
• tel
• url

Ja, wir haben viele, viele Möglichkeiten für Eingabeelemente, die wir verwenden können. Schauen wir uns alle an und sehen wir uns an, wie sie funktionieren und wofür sie verwendet werden können.

Input Element

Das input-Element ist wahrscheinlich das bekannteste Element und wird von jedem verwendet, jedes Login-Formular oder CMS-Formular verwendet es.

<input />

Wie Sie oben sehen können, ist es ein selbstschließendes Element.

<input type="text" />

Normalerweise verwenden wir den Typ, den Sie für diese Eingabe angeben, und der Browser fügt möglicherweise eine Standardvalidierung hinzu, die auf dem basiert, was Sie hier hinzugefügt haben.

<input type="text" name="vorname" />

Wir können das Attribut name in der Eingabe definieren, d. h. was an das Subsystem gesendet wird und wie wir seinen Wert überprüfen können.

<input type="text" name="vorname" placeholder="Vorname" />

Das Attribut placeholder wird verwendet, um Text anzuzeigen, wenn die Eingabe noch keinen Wert hat.

<input type="text" name="vorname" placeholder="Vorname" required />

Wir können required zu unserem Eingabetyp hinzufügen und es standardmäßig erforderlich machen, der Browser kann das für uns erledigen.

<input type="text" name="vorname" placeholder="Vorname" pattern="[a-zA-Z0-9]+" />

Wir können ein Standardmodell definieren, das den Regex akzeptiert und bei der Standardvalidierung helfen kann. Hier finden Sie einige nützliche Beispiele: html5pattern.

<input type="text" name="vorname" placeholder="Vorname" disabled />

Wir können das Attribut disabled hinzufügen, wenn wir das Element von der Eingabe ausschließen wollen.

<input type="text" name="vorname" placeholder="Vorname" readonly />

Wir können das Element auch schreibgeschützt (readonly) machen. Dadurch wird es dauerhaft.

Email input type

Wie bereits erwähnt, können wir verschiedene Arten von Basiseingaben haben, von denen eine die E-Mail ist. Jetzt kann der Browser feststellen, ob der Benutzer eine gültige E-Mail-Adresse eingegeben hat:

<input type="email" name="email" placeholder="Email Adresse" />

Hidden input type

Ein weiterer Eingabetyp, den ich häufig verwende, ist der hiden Typ. Er wird standardmäßig nicht angezeigt und eignet sich perfekt zum Speichern eines Cookies oder Tokens, das der Benutzer nicht sehen muss.

<input type="hidden" name="hidden_cookie" value="SECRET_COOKIE" />

Nummer input type

Wir können auch den Typ als Zahl festlegen und sogar drei weitere Attribute definieren: min, max and step

<input type="number" name="anzahl" placeholder="Betrag?" min="5" max="15" step="5" />

Rangeinput type

Ähnlich wie bei Nummer eins haben wir den „range“ Typ, der den Bereich zwischen der Mindest- und der Höchstzahl definiert und optional eine Stufe enthalten kann.

<input type="range" name="alter" min="0" max="100" step="2" />

Passwort input type

Der password Typ, den wir alle schon einmal gesehen haben, wo bei die Eingabe unter Verwendung von **** erfolgt, so dass andere nicht sehen können, was Sie eingegeben haben.

<input type="password" name="passwort" placeholder="Passwort" />

Submit input type

Wir können den Typ submit so einstellen, dass er als Senden-Button fungiert, und den Wert so einstellen, dass er anzeigt, was in der Schaltfläche steht:

<input type="submit" value="Senden" />

Checkbox

Eine weitere großartige Ergänzung ist der checkbox Typ, wie der Name schon sagt, bietet es ein oder mehrere Kontrollkästchen. Durch Ankreuzen des Kästchens können wir eine oder mehrere richtige Antworten auswählen.

<input type="checkbox" name="dislike" value="Sprossen" />
<input type="checkbox" name="dislike" value="Fisch" />
<input type="checkbox" name="dislike" value="Spinat" />

Radio input type

Der radio Input Typ ist dem Ankreuzfeld sehr ähnlich, aber wir können nur eine Option pro Name auswählen!

<input type="radio" name="you_like" value="Pony" />
<input type="radio" name="you_like" value="Unicorn" />
<input type="radio" name="you_like" value="Lama" />

File input type

Der file input Typ ist sehr breit gefächert und bietet viele Möglichkeiten. Wir können sie wie folgt verwenden:

<input type="file" name="dateien" multiple accept=".jpg, .jpeg" />

Wie Sie sehen können, verwenden wir mehrere Attribute, die es ermöglichen, mehrere Dateien gleichzeitig zuzulassen.

Wir legen fest, welche Typen er standardmäßig akzeptieren kann.

Date input type

Der date Typ ist absolut erstaunlich, er zeigt sogar den Standard-Datums-Picker an!

<input type="date" name="geburtstag" />

Wir haben auch die Zeit in den Datumselementen, die mit einer schöne Zeitauswahl anzeigen wird.

<input type="time" name="zeit_online" />

Oder wir können sogar einen Monat oder eine Woche festlegen:

<input type="month" name="monat" /> 
<input type="week" name="woche" />

Color input type

Eine andere Möglichkeit, die Sie kaum zu nutzen scheinen, die aber so cool ist, ist die Farbeingabe mit dem input type color . Es wird mit einem einfachen Farbwähler geliefert!

<input type="color" name="top_farbe" value="#F4F4F4" />

Tel input type

tel input type kann verwendet werden, um eine Telefonnummer zu definieren, es wird eine andere Tastatur auf mobilen Geräten angezeigt und fügt eine grundlegende Browser-Bestätigung hinzu.

<input type="tel" name="telefon" placeholder="Telefon" />

URL input type

Dieser Typ kann verwendet werden, um eine url zu definieren, sie zeigt eine etwas andere Tastatur, aber sie ist nicht besinders interessant.

<input type="url" name="website" placeholder="Ihre Website?" />

In einem Formular:

<form action="mailto:irgendeine@emailadresse.com" method="post"> 
<input type="text" name="vorname" value="" size="30" maxlength="50"> 
<input type="Submit" name="senden" value="senden"> </form>