了解HTML表单之input元素的23种type类型_html/css_WEB-ITnose
目录传统类型
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">
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
