HTML5的表單所有type類型


button:定義可點擊的按鈕(通常與 JavaScript 一起使用來啟動腳本)。<br>
<input type="button" name="" id="" value="按鈕"><br>
<br>

checkbox:定義復選框。<br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id="" checked><br> <br>

color:定義拾色器。<br> <input type="color" name="" id=""><br> <br>

color:定義 date 控件(包括年、月、日,不包括時間)。<br> <input type="date" name="" id=""><br> <br>

datetime:定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,基於 UTC 時區)。<br> <form action="">生日 (日期和時間):<input type="datetime" name="" id=""> <input type="submit" name="" id="" value="提交"></form><br> <br>

datetime-local:定義 date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,不帶時區)。<br> <input type="datetime-local" name="" id=""><br> <br>

month:定義 month 和 year 控件(不帶時區)。<br> <input type="month" name="" id=""><br> <br>

week:定義 week 和 year 控件(不帶時區)。<br> <input type="week" name="" id=""><br> <br> time:定義用於輸入時間的控件(不帶時區)。<br> <input type="time" name="" id=""><br> <br>
email:定義用於 e-mail 地址的字段。<br> <form action=""></form>E-mail:<input type="email" name="" id=""></form><br> <br>

file:定義文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。<br> <input type="file" name="" id=""><br> <br>

hidden:定義隱藏輸入字段。<br> <input type="hidden" name="" id=""><br> <br>

image:定義圖像作為提交按鈕。<br> <input type="image" name="" id=""><br> <br>

number:定義用於輸入數字的字段。<br> <input type="number" name="" id=""><br> <br>

password:定義密碼字段(字段中的字符會被遮蔽)。<br> <input type="password" name="" id=""><br> <br> radio:定義單選按鈕。<br> <input type="radio" name="" id=""><br> <input type="radio" name="" id="" checked><br> <br>

range:定義用於精確值不重要的輸入數字的控件(比如 slider 控件)。<br> <input type="range" name="" id=""><br> <br>

reset:定義重置按鈕(重置所有的表單值為默認值)。<br> <input type="reset" name="" id=""><br> <br>

search:定義用於輸入搜索字符串的文本字段。<br> <input type="search" name="" id=""><br> <br>

submit:定義提交按鈕。<br> <input type="submit" name="" id="" value="提交"><br> <br>

tel:定義用於輸入電話號碼的字段。<br> 輸入電話:<input type="tel" name="" id=""><br> <br>

text:默認。定義一個單行的文本字段(默認寬度為 20 個字符)。<br> <input type="text" name="" id=""><br> <br>

url:定義用於輸入 URL 的字段。<br> 添加你的主頁網址:<input type="url" name="" id="">

 

顯示效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM