Neue Elemente und Attribute für HTML5-Formulare-H5-Tutorial-php.cn

Neue Elemente und Attribute für HTML5-Formulare

PHPz

Freigeben： 2017-03-12 15:56:09

Original

1274 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!