input标签属性详解大全
我们先来了解一下input标签的几个基本控制属性。
- name属性:元素的名称,也就是name的值代表当前input元素的名字;
- value属性:元素的默认值
1)当input type=“text”、“password”、"hidden"时,定义输入字段的初始值;
2)当input type=“button”、“reset”、"submit"时,定义按钮上的显示的文本;
3)当input type=“checkbox”、“radio”、"image"时,定义与输入相关联的值;
注意:input type="checkbox"和input type="radio"中必须设置value属性;value属性无法与input type="file"一通使用。 - style属性:为input元素设定CSS样式;
- width属性:当input type="image"时,通过width属性控制元素的宽度;
- height属性:当input type="image"时,通过height属性控制元素的高度;
- maxlength属性:定义input元素中可输入的最长字符数。
input type属性与代码详解
type=“text”:创建单行文本输入框
<input type="text" size="20" maxlength="20" value="文本输入框" style="height: 30px; color:cyan">
上述代码的意思为:
input元素类型为文本输入框,元素长度为20,最多允许输入20个字符,输入框默认显示“文本输入框”几个字,设置输入CSS样式高度为30像素,文字为浅蓝色。
type=“password”:密码输入框
<input type="password" size="30" maxlength="20" value="">
上述代码的意思为:
input元素类型为密码输入框,元素长度为30,最多允许输入20个字符,输入框中默认显示为空。
type=“radio”:单选按钮
篮球<input type="radio" value="bb" name="bool">足球<input type="radio" value="fb" name="bool" checked>All<input type="radio" value="all" name="bool">
上述代码的意思为:
input元素类型为单选按钮,其中value属性中的值用来设置用户选中改项后提交到数据库中的值,拥有相同name属性的单选框为同一组,一个组里只能同时选中一个选项,checked属性表示的是出事选项,初始默认选项,初始值会选择"足球"。
type=“checkbox”:复选框
北京<input type="checkbox" value="北京" name="city">上海<input type="checkbox" value="上海" name="city">深圳<input type="checkbox" value="深圳" name="city">香港<input type="checkbox" value="香港" name="city">澳门<input type="checkbox" value="澳门" name="city">
上述代码的意思为:
input元素类型为复选框,用户可以进行多个选项,其中value属性中的值用来设置用户选中改项目后提交到数据库中的值,name为复选框的名称。
type=“button”:普通按钮
<input type="button" value="确认" name="bt" onClick="">
上述代码的意思为:
input元素的类型为普通按钮,在value属性中输入的值为按钮上显示的文本,name代表该按钮的名称,onclick表示处理程序,按钮的消失效果也可以通过CSS样式来设置。
type=“submit”:提交按钮
<input type="submit" value="提交" name="sm" />
上述代码的意思为:
提交按钮不需要设置onclick参数,在单击提交按钮时可以向服务器发送表单数据,数据会发送到表单的action属性中指定的页面,value属性中的值为按钮上显示的文字。
type=“reset”:重置按钮
<input type="reset" value="重置" name="reset"/>
重置按钮的作用是点击之后表单会刷新回到默认状态,在value属性中输入的值为按钮上显示的文本;
type=“image”:图像按钮
<input type="image" src="图片URL" name="Yes" width="80" height="25" /><input type="image" src="图片URL" name="No" width="80" height="25" />
这个功能是将图片转为图片形式按钮,其中src是链接图片的路径,name为图片名称,width为图片宽度,height为图片高度,当按下图片按钮会以name中的值向服务器发送信息。
type=“hidden”:隐藏域
<input type="hidden" name="hidden" value="提交的值">
隐藏域在页面上不显示,用来存储与传递表单的值,当用户提交表单时,隐藏域的内容会一起提交给处理程序。
type=“file”:文件域
<input type="file" name="file" value="选择文件" />
文件域用于从本地硬盘中上传文件并提交。
HTML5新增input type属性
type=“url”:输入URL字段
type=“tel”:用来输入电话号码
type=“search”:搜索字符串
type=“email”:改控件用来输入"email"地址,若用户输入非email格式,那么再支持HTML5的浏览器中提交改表单时,会提示为不是合法格式。
type=“color”:颜色选择器,使用color属性能直接调用系统的颜色调节窗口,默认为黑色
type=“number”:数字字段
<input type="number" name="number" min="2" max="8" value="3" />
用于输入数字的字段,其中min允许的最小值,max为允许的最大值,value规定默认值,还有step可规定合法数字间隔。
type=“range”:输入数值
<input type="range" name="range" min="0" max="10" step="1" value="" />
定义用于精确值不重要的输入数字的控件,min属性指定最小值限制,max属性指定最大值限制,step属性规定合法数字间隔,value属性规定默认值。
type=“date”:日期控件
<input type="date" min="2019-05-09" max="2020-05-09" />
可以用来选择或输入日期,包括(年/月/日),不包括时间:其中设定min属性控制开始日期,max属性控制结束日期。如果使用type=“time” 则用来输入时间,不包括日期。
type=“month” 年月控件
<input type="month" value="2019-05" />
value属性用来控制年月,若使用type="week"则为控制(年/周)
type=“datetime”:日期加时间控件(基于UTC时区)
<input type="datetime" id="datetime" value="2019-05-09T22:47Z" >
创建日期时间,包括(年/月/日/时/分/秒/零点几秒)
属性
传统属性name type accept alt checked disabled readonly maxlength size src value新增属性autocomplete autofocus novalidate height width list min max step multiple pattern placeholder required form formaction formenctype formmethod formnovalidate formtarget
name
name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据。注意只有设置了name属性的表单元素才能在提交表单时传递它们的值。
type
type属性用来规定input元素的类型。注意:如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type=“text”。
accept
accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型。注意: 该属性只能与type="file"配合使用
alt
alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息
[注意]alt属性只能与type="image"的input元素配合使用<input type="image" src="#" alt="测试图片">
checked
checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置注意;checked属性只能与type="radio"或type="checkbox"的input元素配合使用
disabled
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本注意1:disabled属性无法与type="hidden"的input元素一起使用
注意2:对于IE7-浏览器必须设置为disabled=“disabled”,而不可以直接设置disabled,否则使用javascript控制时将失效
readonly
readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本。readonly属性可与type="text"或"password"的input元素配合使用注意:IE7-浏览器不支持使用javascript控制readonly属性
maxlength属性规定输入字段的最大长度,以字符个数计
注意:该属性只能与type="text"或type="password"的input元素配合使用
<input maxlength="6"><input type="password" maxlength="6">
size
size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度注意:由于size属性是一个可视化的设计属性,推荐使用CSS来代替它
<input size="1"><input type="password" size="2">
src
src属性作为提交按钮显示的图像的URL注意:src属性只能且必须与type="image"的input元素配合使用
<form action="#"> <input name="test"> <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>
value
value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:
type=“button”、“reset”、"submit"用于定义按钮上的显示的文本
type=“text”、“password”、"hidden"用于定义输入字段的初始值
type=“checkbox”、“radio”、"image"用于定义与输入相关联的值
- 注意1:type="checkbox"或"radio"必须设置value属性
- 注意2:value属性无法与type="file"的input元素一起使用
新增属性
- autocomplete
autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项
autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<input name="test1" autocomplete="on"><input name="test2" autocomplete="off">
- autofocus
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素
<input name="test1"><input name="test2" autofocus>
- novalidate
novalidate属性规定在提交表单时不验证form或input域
novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器不支持
- height
height属性用于规定image类型的input标签的图像高度
[注意]该属性只适用于image类型的input标签
- width
width属性用于规定image类型的input标签的图像宽度
[注意]该属性只适用于image类型的input标签
- list
大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据
list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器及safari浏览器不支持
min
min属性规定输入域所允许的最大值max
max属性规定输入域所允许的最小值step
step属性为输入域规定合法的数字间隔
min、max、step属性适用于以下类型的input元素:date pickers、number、range
<input type="number" min="0" max="10" step="0.5" value="6" /><input type="range" min="0" max="10" step="0.5" value="6" />
- multiple
multiple属性规定按住ctrl按键,输入字段可以选择多个值
该属性适用于type="email"和"file"的input元素
[注意]该属性IE9-浏览器不支持
- pattern
pattern属性规定用于验证input域的模式。模型pattern是正则表达式
pattern属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器及safari浏览器不支持
- placeholder
placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器不支持
- required
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
[注意]IE9-浏览器及safari浏览器不支持
<form action="#"> <input required> <input type="submit"></form>
- form
form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id
form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<form id="form" action="#"> <input type="submit"></form><input name="test" form="form">
表单重写属性
表单重写属性允许重写form元素的某些属性设定。其中,formnovalidate适用于button或input元素,而其他属性适用于submit或reset的button或input元素
- formaction
重写表单的action属性
<form action="#" >First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><br /><input type="submit" formaction="#" value="以管理员身份提交" /></form>
- formenctype
重写表单的enctype属性
<form action="#" method="post"> First name: <input type="text" name="fname" /><br /> <input type="submit" value="提交" /> <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" /></form>
- formmethod
重写表单的method属性
<form action="#" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formmethod="post" formaction="#" value="使用POST提交" /></form>
- formnovalidate
重写表单的novalidate属性
<form action="#" method="get">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="提交" /><br /><input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" /></form>
- formtarget
重写表单的target属性
<form action="#"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" /></form>
input标签属性详解大全相关推荐
- html frameset 属性,html frameset标签怎么用?html frameset标签属性详解
html frameset标签怎么用?html frameset标签属性详解,本篇文章主要讲述了html frameset标签的定义和用法,还有html frameset标签两个属性的用途(附实例) ...
- audio标签的controls属性_HTML5教程 audio标签属性详解
本篇教程探讨了HTML5教程 audio标签属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < src:String型,所播放音频的 url. auto ...
- 【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
- Html中input标签的详解
今天来给大家讲解一下input标签的内部属性: 直接开门见山,首先我们先看input标签的第一个属性type: 1.type 格式:type="文本的类型" 当type设置为tex ...
- Android 总结:Manifest文件中,application和activity标签属性详解
android:hasCode = ["true" | "false"] android:icon = "drawable resource" ...
- 前端CSS input type属性详解
input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个. 1.首先是最常用的 text <input type="text" placeh ...
- object标签属性详解
最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍:我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OBJ ...
- [绍棠] input 标签 (详解)如何去除输入时边框
去掉input边框: <input type="text"/> input{ boder:0px; } 去除点击后的边框: input{ outline:none; } ...
- input 标签 (详解)如何去除输入时边框
去掉input边框: <input type="text"/> input{ boder:0px; } 去除点击后的边框: input{ outline:none; } ...
- 【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型 属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
最新文章
- 独家 | R语言中K邻近算法的初学者指南:从菜鸟到大神(附代码&链接)
- maven入门(1-3)maven的生命周期
- PAT甲级1106 Lowest Price in Supply Chain:[C++题解]树、结点到根结点的距离、树形dp、记忆化搜索
- CF1472(div3):总结
- python将json转换为excel_使用python将Excel转换为JSON_python_酷徒编程知识库
- 异步api_如何设计无服务器异步API
- 图论 —— 网络流 —— 最小割 —— 平面图与对偶图
- 20200410:路径总和 Ⅰ Ⅱ(leetcode112 /113)
- python数据录入_Re:从零开始的Python数据分析(实战篇)
- windows下的vimrc
- 题目:[汪老师结婚]婚礼上的袭击
- python自动选课原理_python实现学生选课系统 面向对象的应用:
- 初见Autorun病毒与解决办法
- Python中三个双引号的作用是什么?
- 计算机绘画社团活动教案,电脑绘画社团课教师教案.doc
- vue.js+muse-ui制作在线简历编辑
- Android 实现应用桌面角标
- Cortana小娜失败背后,微软的傲慢与偏见
- 移动拨号上网开热点(不是360开热点,而是使用电脑自带的热点功能)详解
- python拟合非线性模型_python-绘制分段拟合到非线性数据
热门文章
- 无法通过计算机名访问 win10,win10系统主机名无法访问局域网共享的恢复方法
- 2022年奶茶行业发展趋势
- 树莓派系列(十五):使用英特尔神经计算棒2(NCS2)
- python作诗_用Python作诗,生活仍有诗和远方
- SPSS进行问卷数据的效度分析及结果解读(问卷数据统计分析第3步(转载)
- 计算机桌面ie图标无法删除,为什么桌面的ie图标删不掉_桌面的ie图标怎么都删不掉的解决方法-系统城...
- pwm脉宽调制c语言程序,MCS-51系列单片机C语言编程PWM脉宽调制器程序模板
- 一次spinlock死锁故障的定位(太经典,收藏!)
- Linux下常见音频格式之间的转换方法【转】
- python绘制国内生产总值散点图_Python学习第90课-数据可视化之散点图绘制