1. 程式人生 > >HTML5<input>標簽

HTML5<input>標簽

顏色 microsoft maxlength inf val color span info 輸入框

在表單中最為核心的就是<input>標簽,使用<input>標簽可以在表單中定義文本輸入框、單選按鈕、復選框、重置按鈕等,其基本語法格式如下:

<input type="控件類型"/>

在該語法中,type屬性為其最基本的屬性,取值有很多種,用來指定不同的控件類型,除type屬性外,還可以定義其它的屬性,常用的屬性如name,value,size等。

示例:

技術分享圖片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8"
> 5 <title>常用表單控件</title> 6 </head> 7 <body> 8 9 10 <form action="#" method="post" > 11 用戶名:<input type="text" value="張三" maxlength="6"><br/><br/> 12 密碼:<input type="password" size="40"><br/><br/> 13 14
性別:<input type="radio" name="sex" checked="checked">15 <input type="radio" name="sex" ><br/><br/> 16 年齡:<input type="number" name="age" min="18" max="100"><br/><br/> 17 興趣:<input type="checkbox" />唱歌 18 <
input type="checkbox" />跳舞 19 <input type="checkbox" />遊泳<br/><br/> 20 喜歡的顏色:<input type="color" name="color" value="#ff0000"><br/><br/> 21 22 關鍵詞:<input type="search" ><br/><br/> 23 難易程度:<input type="range" min="1" max="120"><br/><br/> 24 <div><input type="button" name="button" value="普通按鈕"> 25 <input type="submit" name="submit" value="提交"> 26 <input type="reset" value="重置"> 27 </div> 28 29 30 31 32 </form> 33 34 </body> 35 </html>

在上面的示例中,number、color、search和range為HTML新增的type類型。在下面我會分別介紹一下它們的效果,具體如下:

(1)單擊“年齡”輸入框測試number類型的效果,如下圖所示,技術分享圖片在這裏我們設置的年齡範圍是18~100歲。

技術分享圖片

(2)單擊技術分享圖片color框時,會彈出顏色選取器,如下圖所示:

技術分享圖片

(3) 輸入關鍵詞“搜索關鍵詞”,搜索框右側會出現一個“×”按鈕,頁面效果如下圖所示。單擊該按鈕,可以清除已經輸入的內容。

技術分享圖片

(4) 拖動range控件這個數值的大小,這裏的數值範圍設置為1-120.技術分享圖片

HTML5<input>標簽