HTML5 führte neue Eingangstypen ein, die die Formfunktionalit?t und die Benutzererfahrung durch Verbesserung der Validierung, UI und mobilen Tastaturlayouts verbessern. 1. E -Mail best?tigt E -Mail -Adressen und unterstützt mehrere Eintr?ge. 2. URL-überprüfungen für gültige Webadressen und l?st URL-optimierte Tastaturen aus. 3. Die Zahl erm?glicht die numerische Eingabe mit Inkrement-/Dekrement -Steuerelementen und Bereichsbeschr?nkungen. 4. Bereich bietet einen Schieberegler für die Auswahl von Werten in einem definierten Bereich. 5. Datum, Uhrzeit und zugeh?rige Typen bieten integrierte Picker für einfachere Datums- und Uhrzeiteintrag. 6. Die Suche verbessert Suchfelder mit Funktionen wie automatischer Vervollst?ndigung. Diese Eingaben rationalisieren die Entwicklung und verbessern die Usabilit?t und verachten Sie sie in ?lteren Browsern anmutig, wodurch sie bei einer serverseitigen Validierung wertvoll sind.

HTML5 führte mehrere neue Eingangstypen ein, die die Funktionalit?t und die Benutzererfahrung von Webformen verbessern. Diese Eingangstypen bieten eine bessere Validierung, verbesserte Benutzeroberfl?chen für unterstützende Browser und entsprechende Tastaturlayouts auf mobilen Ger?ten.

1. email - für E -Mail -Adresse Eingabe

Der email -Eingabetyp wird verwendet, wenn der Benutzer eine E -Mail -Adresse eingibt. Browser, die diesen Eingabetyp unterstützen, best?tigen automatisch, dass der eingegebene Text mit einem grundlegenden E -Mail -Format (z. B. user@example.com) übereinstimmt.

Beispiel:

 <Eingabe type = "E -Mail" name = "user_email" placeholder = "youxample.com">

• Sie k?nnen das multiple verwenden, um mehrere von Kommas getrennte E -Mail -Adressen zuzulassen.
• Es ist besonders nützlich bei Anmeldungs- oder Kontaktformularen, bei denen gültige E-Mail-Adressen erforderlich sind.

2. url - Für die Eingabe von Webadressen

Der url -Eingangstyp erwartet eine gültige URL vom Benutzer. Der Browser prüft, ob der Wert mit einem gültigen Protokoll wie http: // oder https: // beginnt.

Beispiel:

 <Eingabe type = "url" name = "Website" placeholder = "https://example.com">

• Auf mobilen Ger?ten l?st dies h?ufig eine Tastatur aus, die für die Eingabe von URLs optimiert ist.
• Stellen Sie sicher, dass Sie zus?tzliche Validierungsserver-Seite behandeln, da Browser nur grundlegende überprüfungen durchführen.

3. number - Für numerische Eingaben

Verwenden Sie number , wenn Benutzer eine Nummer eingeben sollen. Dieser Eingangstyp erm?glicht Auf-/Ab -Pfeile zum Inkrementieren und Abbau von Werten und beschr?nkt die Eingabe auf Zahlen auf vielen Ger?ten.

Beispiel:

 <Eingabe type = "number" name = "minity" min = "1" max = "10" Schritt = "1">

Sie k?nnen das Verhalten mithilfe von Attributen steuern:

• min und max Set Grenzen
• step definiert, wie stark der Wert zunimmt oder abnimmt

4. range - Für Schieberegleitereing?nge

Mit der range k?nnen Benutzer einen Wert aus einem Bereich mit einem Schieberegler ausw?hlen. Es eignet sich hervorragend für Einstellungen wie Volumen, Helligkeit oder Bewertungen.

Beispiel:

 <Eingabe type = "Bereich" name = "Volume" min = "0" max = "100" Schritt = "5">

• Benutzer kennen nicht immer den genauen Wert, den sie ausw?hlen, daher wird es am besten verwendet, wenn Pr?zision nicht kritisch ist.
• Kombinieren Sie es mit einem visuellen Indikator oder einer Beschriftung, wenn die Anzeige des aktuellen Wertes wichtig ist.

5. date , time , datetime-local , month und week -für Datum und Uhrzeiteingaben

Diese Eingaben vereinfachen das Datums- und Zeiteintrag, indem integrierte Picker anbieten:

• date : W?hlt ein volles Datum (Jyjyy-MM-DD) aus
• time : w?hlt eine Zeit aus (HH: mm)
• datetime-local : Kombiniert Datum und Uhrzeit ohne Zeitzone
• month : W?hlt einen Monat und ein Jahr aus
• week : W?hlt eine Woche und ein Jahr aus

Beispiele:

 <Eingabe type = "date" name = "birthday">
<Eingabe type = "Zeit" name = "meeting_time">

• Die Browserunterstützung variiert. Testen Sie daher immer über Plattformen hinweg.
• Diese Eingaben erleichtern die Dateneingabe und reduzieren Formatierungsfehler.

6. search - Für Suchfeldeingabe

Suchspezifisch für Suchfelder entwickelt, verh?lt search ?hnlich wie text , kann jedoch unterschiedlich gestaltet sein oder Funktionen wie automatische Vervollst?ndigung und eine klare Schaltfl?che in einigen Browsern anbieten.

Beispiel:

 <Eingabe type = "such" name = "query" placeholder = "such ...">

• Es verbessert die Verwendbarkeit in Suchformularen, indem es native UI -Verbesserungen nutzt.
• Funktioniert gut in Navigationsleisten und Apps in den Site.

Diese Eingangstypen helfen Entwicklern dabei, schlauer, intuitivere Formen mit weniger JavaScript zu erstellen. Obwohl nicht alle Browser jeden Typ gleicherma?en unterstützen, verschlechtert sich die Verwendung von sie in ?lteren Umgebungen anmutig zu text . Grunds?tzlich lohnt es sich heute, sie benutzt zu haben-sie haben sie einfach mit der serverseitigen Validierung zurück.

Das obige ist der detaillierte Inhalt vonWas sind die neuen Eingangstypen in HTML5 -Formularen verfügbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!