Beispielanalyse neuer Formularelemente und -attribute in HTML5_HTML5-Tutorial-Fähigkeiten

In diesem Artikel werden Beispielcodes verwendet, um die neuen Formularelemente und -attribute von HTML5 zu demonstrieren. Der Demonstrationscode umfasst Platzhalterattribute, Autofokusattribute, Listen- und Datenlistenelemente, Textfelder vom Typ „Suche“, Textfelder vom Typ „E-Mail“, Textfelder vom Typ „Zahl“ und Bereich B. Textfelder vom Typ „Tel“, Textfelder vom Typ „URL“ sowie Eingabeelemente vom Typ „Datum“, „Uhrzeit“ usw.
Der Beispielcode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

< section>

HTML5 Mobile Web Development Guide

< legend> ;HTML5 neues Element – ​​Formularelement

 Platzhalterattribut: <br> Wird im Allgemeinen in Textfeldern verwendet <br> Seine Hauptfunktion ist Wenn der Text Das Feld befindet sich in einem nicht eingegebenen Zustand und der Inhalt ist leer, der Eingabeaufforderungsinhalt für das Textfeld <br> Wirkung: <br> Wenn das Textfeld den Fokus erhält, werden die Eingabeaufforderungsinformationen automatisch gelöscht, wenn das Textfeld den Fokus verliert und kein Inhalt vorhanden ist eingegeben wird, werden die Eingabeaufforderungsinformationen automatisch wieder gelöscht <br> Dadurch entfällt die Notwendigkeit herkömmlicher Textfelder, die die Hilfe von Onfocel- und Onblur-Ereignissen erfordern <br> (Kompatibel mit den meisten PC-Browsern und mobilen Browsern, das kann man nur sagen Die Technologie hat tatsächlich Fortschritte gemacht) <br> Beispiel: &lt ;input type="text" placeholder="Ich bin ein Platzhalter, der als Erinnerung dient"><br> 

< ;pre> Autofokus-Attribut:
Das angegebene Steuerelement erhält automatisch den Fokus. Es ist zu beachten, dass es auf einer HTML-Seite nur ein Steuerelement mit dem geänderten Attribut geben kann.
Beispiel:

;

 Listen- und Datenlistenelemente: <br> Die Hauptfunktion des Listenelements besteht darin, die Eingabe in ein Textfeld aufzufordern, und die Datenquelle der Eingabeaufforderung wird von der Datenliste bereitgestellt. <br> Derzeit sind die Listen- und Datenlistenelemente Elemente werden nur vom Opera-Browser unterstützt, und kein mobiler Browser unterstützt diese Funktion. <br> Beispiel: <input type="text" placeholder="Ich habe das Listenattribut und das Datenlistenelement hinzugefügt, aber nicht viele Leute verstehen mich" Liste ="myDataList"><br> <datalist id="myDataList"><br> <option label="1">Ich bin datalist1</option><br> <option label="2" >Ich bin datalist2</option><br> <option label="3"> Ich bin datalist3</option><br> <option label="4">Ich bin datalist4</option><br> </datalist><br> 

 Suchtyp-Textfeld: <br> Ein hauptsächlich verwendetes Textfeld um nach Schlüsselwörtern zu suchen<br> Der einzige Unterschied zwischen diesem Textfeld und einem gewöhnlichen Textfeld besteht darin, dass es in Safari und Chrome durchsucht wird. Unter dem Browser ist das Erscheinungsbild des Textfelds abgerundet <br> Beispiel: <Eingabetyp= "search" placeholder="Ich bin ein Suchtyp-Textfeld"><br> 

 Textfeld vom Typ E-Mail: <br> ist ein Textfeld, das E-Mail-Inhalte angeben kann. Es wird normalerweise im Eingabetextfeld für die Eingabe einer E-Mail-Adresse verwendet Textfeld Es sieht fast genauso aus wie ein gewöhnliches Textfeld, unterscheidet sich jedoch tatsächlich im Safari-Mobilbrowser <br> Die Tastatur zeigt die entsprechende Tastatur entsprechend dem Typ des Textfelds an <br> Beispiel: <Eingabetyp = "email" placeholder="Ich bin ein Textfeld vom Typ E-Mail"><br> 

 : <br> ist ein Textfeldtyp, der zur Eingabe von Zahlen verwendet wird. <br> Er kann mit Min-, Max- und Schrittattributen verwendet werden. <br> Beispiel: <input type="number" value="0" min=" 0 " max="10" step="1"><br> 

 Bereichstyp-Textfeld:<br> Es handelt sich um einen Textfeldtyp für die numerische Bereichseingabe, der eine gleitende Eingabemethode bietet. <br> Es muss mit Min., Max., Bereich und anderen Attributen verwendet werden. <br> Beispiel: <input type="range" value=" 1 " min="0" max="100" step="1"><br> 

 tel Typ Textfeld: <br> ist eine Art Textfeld, in das Benutzer Telefonnummern eingeben können <br> In mobilen Browsern zeigt die Tastatur dieses Textfelds die entsprechende Tastatur entsprechend der Art des Textfelds an <br> Beispiel: < input type="tel" placeholder="Ich bin ein Telefontyp-Textfeld"><br> 

Typ-Textfeld:
ist eine Art Textfeld, in das Benutzer eine URL-Adresse eingeben können.
In mobilen Browsern zeigt die Tastatur dieses Textfelds die entsprechende Tastatur entsprechend der Art des Textfelds an.
Beispiel:

, aber diese Typen werden nicht allgemein unterstützt <br /> Die Details lauten wie folgt: <br /> Datum und Uhrzeit (einschließlich Zeitzone). ): <br /> <input type="datetime"><br> Datum und Uhrzeit (ohne Zeitzone): <br> <input type="datetime-local"><br> Textfeld zur Auswahl der Zeit : <br> <input type="time"><br> Textfeld zur Datumsauswahl: <br> <input type="date"><br>Textfeld zur Auswahl der Wochennummer für das Jahr:<br> &lt ;input type="week"><br> Textfeld zur Monatsauswahl: <br> <input type="month"><br>

< ;/article>

HTML5 neues Element – ​​Formularelement