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:

HTML5 Mobile Web Development Guide

 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 placeholder="Ich bin ein Suchtyp-Textfeld"><br> </eingabetyp>

> ;

 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 placeholder="Ich bin ein Textfeld vom Typ E-Mail"><br> </eingabetyp>

 : <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: <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
Die Details lauten wie folgt:
Datum und Uhrzeit (einschließlich Zeitzone). ):

Datum und Uhrzeit (ohne Zeitzone):

Textfeld zur Auswahl der Zeit :

Textfeld zur Datumsauswahl:

Textfeld zur Auswahl der Wochennummer für das Jahr:
< ;input type="week">
Textfeld zur Monatsauswahl:


section>
< ;/article>

HTML5 neues Element – ​​Formularelement

> ;