Heim > Artikel > Web-Frontend > Neue Elemente und Attribute für HTML5-Formulare

Neue Elemente und Attribute für HTML5-Formulare

PHPzOriginal: 2017-03-12 15:56:091244Durchsuche

1. Tag Control Attribut

In HTML5 können Sie ein Formularelement innerhalb des Tags platzieren und das Steuerelement des Tags übergeben Attribut, um auf das Formularelement zuzugreifen.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9     function setValue(){10         var label=document.getElementById("label");11         var textbox=label.control;12         textbox.value=510006;13     }14 </script>15     <form>16     <label id="label">17     邮编：18         <input id="txt_zip" maxlength="6">19         <small>请输入六位数字</small>20     </label>21     <input type="button" value="设置默认值" onclick="setValue()">22     </form>23 </body>24 </html>

TextfeldPlatzhalterattribut

Platzhalter bedeutet, dass, wenn sich das Textfeld im befindet uninput stateStatus . Wenn sich das Textfeld in einem nicht eingegebenen Zustand befindet und den Cursor-Fokus nicht erhält, ist der Eingabeaufforderungstext unscharf.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>Placehoder属性</title> 6 </head> 7 <body> 8     <input type="text" placeholder="请输入用户名"> 9 </body>10 </html>

Textfeld

ListeAttribut

In HTML5 wurde ein einzeiliges Textfeld hinzugefügt Ein Listenattribut, dessen Wert die ID eines Datenlistenelements ist. Das datalist-Element ist ebenfalls ein neu hinzugefügtes

-Element in HTML5. Dieses Element ähnelt einem Auswahlfeld, aber wenn der Wert, den der Benutzer festlegen möchte, nicht in der Auswahlliste enthalten ist, kann der Benutzer ihn selbst eingeben. Das Datenlistenelement selbst wird nicht angezeigt, sondern als Eingabeaufforderung angezeigt, wenn das Textfeld den Fokus erhält.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>List属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" list="zkdir">10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

Textfeld-AutoComplete-Eigenschaft

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>文本框AutoComplete属性</title> 6 </head> 7 <body> 8     <form> 9         <input type="text" name="zkdir" autocomplete="on" list="zkdir"> <!--autocomplete有两个值：on&off，不填写取决于当前浏览器的默认值-->10         <datalist id="zkdir" style="display: none;">11         <option value="HTML5学习">HTML5学习</option>12         <option value="CSS3学习">CSS3学习</option>13         <option value="JavaScript学习">JavaScript学习</option>14         </datalist>15     </form>16 </body>17 </html>

Das Musterattribut des Textfelds

Das Attribut „Auswahl“

Richtung

des Textfelds

Das unbestimmte Attribut des Kontrollkästchens

Bild Das Attribut

Höhe

und das Attribut Breite der Schaltfläche „Senden“

Das obige ist der detaillierte Inhalt vonNeue Elemente und Attribute für HTML5-Formulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Empfehlen Sie 15 hervorragende plattformübergreifende mobile EntwicklungstoolsNächster Artikel：Empfehlen Sie 15 hervorragende plattformübergreifende mobile Entwicklungstools

In Verbindung stehende Artikel

Mehr sehen