Was sind die neuen Formularsteuerelemente und Formularattribute in HTML5?

HTML5 ist der Internetstandard der nächsten Generation und eine Sprachmethode zum Erstellen und Präsentieren von Internetinhalten. Sie gilt als eine der Kerntechnologien des Internets.

HTML5 ist die Spezifikation der Kernsprache HTML im Web. Der Inhalt, den Benutzer beim Surfen im Internet sehen, liegt ursprünglich im HTML-Format vor und wird durch eine technische Verarbeitung im Browser umgewandelt. HTML5 hat gegenüber dem vorherigen HTML4.01 bestimmte Verbesserungen vorgenommen. Obwohl das technische Personal diese neuen Technologien während des Entwicklungsprozesses möglicherweise nicht in die Praxis umsetzt, muss das technische Personal für die Website-Entwicklung die neuen Funktionen dieser Technologie kennen.

Neue Steuerelemente für Eingabeformulare:

• E-Mail: E-Mail-Textfeld, nicht anders als gewöhnliche

• – Wenn es sich bei der Eingabe nicht um eine E-Mail handelt, wird die Überprüfung nicht bestanden

• – Auf der mobilen Tastatur werden Änderungen vorgenommen

• Tel: Telefonnummer

• URL: URL der Webseite

• Suche: Suchmaschine

• - Nach der Texteingabe unter Chrome wird ein zusätzlicher geschlossener X

• -Bereich angezeigt: Wertselektor innerhalb eines bestimmten Bereichs

• - Min., Max., Schritt (Anzahl der Schritte)

• - Beispiel: Verwenden Sie js, um den aktuellen Wert anzuzeigen

• Zahl: ein Eingabefeld, das nur Zahlen enthalten kann

• - Am Ende des Eingabefelds befinden sich zwei Pfeile, der obere ist Plus und der untere ist Minus

• Farbe: Farbauswahl

• - Klicken Sie hier, um die Farbversion anzuzeigen

• Datum/Uhrzeit: Vollständiges Datum anzeigen

• - Ähnlich wie bei Auswahlauswahlstil

• datetime-local: vollständiges Datum anzeigen, ohne Zeitzone

• time: Uhrzeit anzeigen, ohne Zeitzone

• date: Datum anzeigen {Jahr, Monat, Tag}

• Woche: Woche anzeigen { Jahr, Monat, Tag und Woche}

• Mund: Monat anzeigen {Jahr und Monat}

(Kostenloses Video-Tutorial: HTML-Video-Tutorial )

<form>
  <input type="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="submit" />
</form>

Neue Formularfeatures und -funktionen

• Platzhalter: Informationen zur Eingabefeld-Eingabeaufforderung

• – Beispiel: Eingabeaufforderung für das Weibo-Passwortfeld

• Automatische Vervollständigung

• – Standardmäßig ist die Eingabeaufforderung aktiviert und aus auswählen

• Autofokus: Geben Sie das Formular an, um den Eingabefokus zu erhalten

• Liste und Datenliste: Erstellen Sie eine Auswahlliste für das Eingabefeld

• – Der Listenwert ist die ID des Datenlisten-Tags

• erforderlich: Diese Option ist erforderlich und darf nicht leer sein

• Muster: Regelmäßige Überprüfung

• - Muster = „d{1,5}“

• Formaction definiert die Übermittlungsadresse in Submit

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" // 是否记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据，临时有事需要离开一段时间，此时数据应该保存至草稿箱，那么同一个form表单下，将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://www.baidu.com">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://www.miaov.com"/>
</form>

Verwandte Empfehlungen: HTML5-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die neuen Formularsteuerelemente und Formularattribute in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!