繁星H5之旅-HTML5表單新增元素與屬性

時間 2019-12-11

標籤繁星 h5 之旅 html5 html 表單新增元素屬性欄目 HTML5 简体版

原文原文鏈接

一、標籤control屬性javascript

在HTML5中，能夠在標籤內部放置一個表單元素，而且經過該標籤的control屬性來訪問該表單元素。html

 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>

文本框placeholder屬性java

placeholder是指當文本框處於未輸入狀態時顯示的輸入提示。當文本框處於未輸入狀態且未獲取光標焦點時，模糊顯示輸入提示文字。瀏覽器

 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>

文本框list屬性學習

在HTML5中，爲單行文本框增長了一個list屬性，該屬性的值爲某個datalist元素的id。datalist元素也是HTML5中新增的元素，該元素相似於選擇框，可是當用戶想要設定的值不在選擇列表以內時，容許自行輸入。datalist元素自己並不顯示，而是當文本框得到焦點時以提示輸入的方式顯示。spa

 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>

文本框AutoComplete屬性code

 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>