目录传统类型
textpasswordfileradiocheckboxhiddenbuttonimageresetsubmit
新增类型前面的话
随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个
传统类型
text定义单行的输入字段，用户可在其中输入文本
password定义密码字段。该字段中的字符被掩码
file定义输入字段和 "浏览"按钮，供文件上传
radio定义单选按钮
checkbox定义复选框
hidden定义隐藏的输入字段
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
image定义图像形式的提交按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器
text
type="text"表示一个文本输入框，它是默认的输入类型，是一个单行的控件，一般是一个带有内嵌框的矩形
password
type="password"表示一个密码输入框，它与文本输入框几乎一模一样，功能上唯一的不同的字母输入后会被隐藏，一般是一连串的点
【 默认样式】
chrome/safari/opera padding: 1px 0px; border: 2px inset;firefox padding: 2px; border-width: 1px;ie padding: 2px 1px; border-width: 1px;
【默认宽高】
chrome height: 14px; width: 148px;safari height: 15px; width: 148px;firefox height: 17px; width: 137px;IE9+ height: 14px; width: 147px;IE8- height: 16px; width: 149px;
【重置样式】
padding: 0;border: 1px solid;
[注意]IE6浏览器设置的type="text"或"password"的input元素的宽高为包含padding和border的宽高
点击下列相应按钮可进行演示
【tips】模拟密码显示隐藏的功能
说明：现在很多软件在密码框右侧都有一个小眼睛，用于设置密码的显示和隐藏。通过更改input元素的type属性得以实现
<style>body{ margin: 0; font-size: 16px;} #show{ padding: 0; border: 1px solid black; height: 20px; width: 200px; line-height: 20px;}#set{ display: inline-block; height: 22px; background-color: rgba(0,0,0,0.5); color: white; line-height: 18px; margin-left: -72px; cursor: pointer;}</style></head><body><input id="show" type="password" maxlength="6"><span id="set">显示密码</span><script>set.onclick = function(){ if(this.innerHTML == '显示密码'){ this.innerHTML = '隐藏密码'; show.type="text"; }else{ this.innerHTML = '显示密码'; show.type="password"; }} </script> file
type="file"定义输入字段和"浏览"按钮，用于文件上传
【重置样式】
padding: 0; border: 0;
【默认宽高】
chrome height: 21px; width: 238px;safari height: 21px; width: 238px;firefox height: 27px; width: 222px;IE9+ height: 21px; width: 220px;IE8 height: 16px; width: 214px;IE7- height: 15px; width: 210px;
[注意]IE8-浏览器设置的type="file"的input元素的宽高为包含padding和border的宽高
该类型的input元素支持accept属性和multiple属性
关于accept属性的详细信息移步至此
关于multiple属性的详细信息移步至此
radio
type="radio"定义单选按钮，允许用户从给定数目的选择中选一个选项。同一组按钮，name值一定要一致
[注意]radio类型的input元素无法设置padding和border(除IE10-浏览器以外)
【默认样式】
chrome/safari/opera/firefox margin: 3px 3px 0 5px; box-sizing:border-box;ie11 margin: 3px 3px 3px 4px; box-sizing:border-box;ie10- padding: 3px; box-sizing:border-box;
【默认宽高】
chrome/safari/IE height: 13px; width: 13px;firefox height: 16px; width: 16px;
【重置样式】
padding: 0; margin: 0; border: 0;
checkbox
type="checkbox"定义多选按钮，允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name取值一定要一致
[注意]checkbox类型的input元素无法设置padding和border(除IE10-浏览器以外)
【默认样式】
chrome/safari/opera/firefox/ie11 margin: 3px 3px 3px 4px; box-sizing:border-box;ie10- padding: 3px; box-sizing:border-box;
【默认宽高】
chrome/safari/IE height: 13px; width: 13px;firefox height: 16px; width: 16px;
【重置样式】
padding: 0; margin: 0; border: 0;
type="radio"或"checkbox"的input元素支持checked属性
关于checked属性的详细情况移步至此
hidden
type="hidden"定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据
[注意]disabled属性无法与type="hidden"的input元素一起使用
//点击提交按钮后，隐藏域的内容test=12会包含在URL中<form name="form" action="#"> <input type="hidden" name="test" value="12"> <input type="submit"></form>
button
type="button"的input输入类型定义可点击的按钮，但没有任何行为，常用于在用户点击时启动javascript程序
【button、submit、reset的默认样式】
chrome/safari padding: 1px 6px; border: 2px outset buttonface; box-sizing:border-box;firefox padding: 0 6px; border: 3px outset; box-sizing:border-box;IE9+ padding: 3px 10px; border: 1px outset; box-sizing:border-box; IE8 padding: 3px 10px; border: 1px outset;IE7- padding: 1px 0.5px; border: 1px outset;
[注意]IE8-浏览器的box-sizing:content-box;而其他浏览器的box-sizing:border-box;
<input type="button" value="Click me" onclick="alert(1)" />
type="button"的input输入类型和button元素有很多重叠特性
关于button元素的详细信息移步至此
image
type="image"的input输入类型定义图像形式的提交按钮，该类型可以设置width、height、src、alt这四个属性
用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用，如果图片有name属性，也会随坐标发送
<form action="#"> <input name="test"> <input type="image" name="imagesubmit" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>
submit
type="submit"的input输入类型用于创建提交表单的按钮
reset
type="reset"的input输入类型用于创建重置表单的按钮
<form action="#" method="get"> <input> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /></form>
新增类型
color定义调色板
tel定义包含电话号码的输入域
email定义包含email地址的输入域
url定义包含URL地址的输入域
search定义搜索域
number定义包含数值的输入域
range定义包含一定范围内数字值的输入域
date定义选取日、月、年的输入域
month定义选取月、年的输入域
week定义选取周、年的输入域
time定义选取月、年的输入域
datetime定义选取时间、日 月、年的输入域(UTC时间)
datatime-local
定义选取时间、日 月、年的输入域(本地时间)
color
type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码
[注意]safari和IE不支持该类型
【默认样式】
chrome width:44px; height:23px; border: 1px solid rgb(169,169,169); padding: 1px 2px;firefox width:46px; height:17px; border: 3px solid rgb(169,169,169); padding: 6px 0;
<input type="color">
tel
type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异
<form action="#"> <input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> <input type="submit"></form> type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异
email类型的input元素支持multiple属性
[注意]IE9-浏览器及safari浏览器不支持
<form action="#" > <input type="email" name="email" multiple> <input type="submit"></form>
url
type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异
[注意]IE9-浏览器及safari浏览器不支持
<input type="url">
search
type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异
<input type="search">
number
type="number"的input输入类型用于处理数字输入
[注意]IE不支持该类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;firefox border: 1px inset; padding: 2px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="number" min="0" max="10" step="0.5" value="6" />
range
type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型
[注意]IE9-不支持该类型
【默认样式】
chrome/safari margin: 2px;firefox border: 1px inset; padding: 1px; margin: 0 9.3px;IE10+ padding: 17px 0 32px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="range" min="0" max="10" step="0.5" value="6" />
HTML5拥有多个可供选取日期和时间的新输入类型
date
type="date"的input输入类型用于选取日、月、年
month
type="month"的input输入类型用于选取月、年
week
type="week"的input输入类型用于选取周、年
time
type="time"的input输入类型用于选取时、分
datetime
type="datetime"的input输入类型用于选取时、日、月、年(UTC时间)
datetime-local
type="datetime-local"的input输入类型用于选取时、日、月、年(本地时间)
[注意]IE和firefox这6种日期类型都不支持，chrome不支持datetime类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;
<input type="date"><br><br><input type="month"><br><br><input type="week"><br><br><input type="time"><br><br><input type="datetime"><br><br><input type="datetime-local">
要预设控件的日期和时间，可以用字符串设置value属性
【value属性格式】
date YYYY-MM-DDtime hh:mm:ss.sdatetime YYYY-MM-DDThh:mm:ss:sZdatetime-local YYYY-MM-DDThh:mm:ss:smonth YYYY-MMweek YYYY-Wnn
YYYY=年MM=月DD=日hh=小时mm=分钟ss=秒s=0.1秒T=日期与时间之间的分隔符Z=Zulu时间的时区Wnn=W周数，从1月的第一周开始是1，直到52
该类型的value属性格式还可以用在min和max的属性里，用来创建时间跨度；step可以用来设置移动的刻度
[注意]chrome不支持该类型的step设置
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML：建立網頁的結構Apr 14, 2025 am 12:14 AMHTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。
了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3漢化版
中文版，非常好用
Dreamweaver Mac版
視覺化網頁開發工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
