HTML中input标签功能介绍
我们先来了解一下input标签的几个基本控制属性。
1. name属性:元素的名称,也就是name的值代表当前input元素的名字;
2.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"一通使用。
3.style属性:为input元素设定CSS样式;
4.width属性:当input type="image"时,通过width属性控制元素的宽度;
5.height属性:当input type="image"时,通过height属性控制元素的高度;
6.maxlength属性:定义input元素中可输入的最长字符数。
二、input type属性与代码详解
1. type=“text”:创建单行文本输入框
<input type="text" size="20" maxlength="20" value="文本输入框" style="height: 30px; color:cyan">
- 1
上述代码的意思为:
input元素类型为文本输入框,元素长度为20,最多允许输入20个字符,输入框默认显示“文本输入框”几个字,设置输入CSS样式高度为30像素,文字为浅蓝色。
2.type=“password”:密码输入框
<input type="password" size="30" maxlength="20" value="">
- 1
上述代码的意思为:
input元素类型为密码输入框,元素长度为30,最多允许输入20个字符,输入框中默认显示为空。
3.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">
- 1
- 2
- 3
上述代码的意思为:
input元素类型为单选按钮,其中value属性中的值用来设置用户选中改项后提交到数据库中的值,拥有相同name属性的单选框为同一组,一个组里只能同时选中一个选项,checked属性表示的是出事选项,初始默认选项,初始值会选择"足球"。
4.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">
- 1
- 2
- 3
- 4
- 5
上述代码的意思为:
input元素类型为复选框,用户可以进行多个选项,其中value属性中的值用来设置用户选中改项目后提交到数据库中的值,name为复选框的名称。
5.type=“button”:普通按钮
<input type="button" value="确认" name="bt" onClick="">
- 1
上述代码的意思为:
input元素的类型为普通按钮,在value属性中输入的值为按钮上显示的文本,name代表该按钮的名称,onclick表示处理程序,按钮的消失效果也可以通过CSS样式来设置。
6.type=“submit”:提交按钮
<input type="submit" value="提交" name="sm" />
- 1
上述代码的意思为:
提交按钮不需要设置onclick参数,在单击提交按钮时可以向服务器发送表单数据,数据会发送到表单的action属性中指定的页面,value属性中的值为按钮上显示的文字。
- type=“reset”:重置按钮
<input type="reset" value="重置" name="reset"/>
- 1
重置按钮的作用是点击之后表单会刷新回到默认状态,在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" />
- 1
- 2
这个功能是将图片转为图片形式按钮,其中src是链接图片的路径,name为图片名称,width为图片宽度,height为图片高度,当按下图片按钮会以name中的值向服务器发送信息。
- type=“hidden”:隐藏域
<input type="hidden" name="hidden" value="提交的值">
- 1
隐藏域在页面上不显示,用来存储与传递表单的值,当用户提交表单时,隐藏域的内容会一起提交给处理程序。
- type=“file”:文件域
<input type="file" name="file" value="选择文件" />
- 1
文件域用于从本地硬盘中上传文件并提交。
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" />
- 1
用于输入数字的字段,其中min允许的最小值,max为允许的最大值,value规定默认值,还有step可规定合法数字间隔。
- type=“range”:输入数值
<input type="range" name="range" min="0" max="10" step="1" value="" />
- 1
定义用于精确值不重要的输入数字的控件,min属性指定最小值限制,max属性指定最大值限制,step属性规定合法数字间隔,value属性规定默认值。
- type=“date”:日期控件
<input type="date" min="2019-05-09" max="2020-05-09" />
- 1
可以用来选择或输入日期,包括(年/月/日),不包括时间:其中设定min属性控制开始日期,max属性控制结束日期。如果使用type=“time” 则用来输入时间,不包括日期。
- type=“month” 年月控件
<input type="month" value="2019-05" />
- 1
value属性用来控制年月,若使用type="week"则为控制(年/周)
- type=“datetime”:日期加时间控件(基于UTC时区)
<input type="datetime" id="datetime" value="2019-05-09T22:47Z" >
- 1
创建日期时间,包括(年/月/日/时/分/秒/零点几秒)
属性
传统属性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="测试图片">
- 1
- 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">
- 1
size
size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度注意:由于size属性是一个可视化的设计属性,推荐使用CSS来代替它
<input size="1"><input type="password" size="2">
- 1
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>
- 1
- 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">
- 1
- autofocus
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素
<input name="test1"><input name="test2" autofocus>
- 1
- 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" />
- 1
- 2
- 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>
- 1
- form
form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id
form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔
[注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<form id="form" action="#"> <input type="submit"></form><input name="test" form="form">
- 1
表单重写属性
表单重写属性允许重写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>
- 1
- 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>
- 1
- 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>
- 1
- 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>
- 1
-formtarget
重写表单的target属性
<form action="#"> First name: <input type="text" name="fname" /><br /> Last na
- 1
HTML中input标签功能介绍相关推荐
- Android manifest文件中的标签详细介绍
Android manifest文件中的标签详细介绍 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如: ...
- HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
- Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架 一.input标签常用属性 表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
- html语言抬头是什么,什么是head标签?html中head标签的介绍
本篇文章给大家带来的内容是关于什么是head标签 ?html中head标签的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是head标签 head 标签是 元素的内容.不像 ...
- Easyui中input标签设置只读
Easyui中input标签设置只读 直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
- IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题 在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
- vue中input标签的使用
vue中input标签的使用 普通input标签 <input type="text" value="" placeholder="placeh ...
- 中input标签赋值_Java程序员:Spring MVC JSP表单标签示例
Spring MVC的表单标签为Java程序员提供了许多额外的支持.例如数据绑定,允许自动设置数据并从Java对象中检索数据. 从2.0版本开始,Spring提供了一组全面的数据绑定感知标记,用于在使 ...
- Html中input标签的详解
今天来给大家讲解一下input标签的内部属性: 直接开门见山,首先我们先看input标签的第一个属性type: 1.type 格式:type="文本的类型" 当type设置为tex ...
最新文章
- 潜移默化学会WPF(难点控件treeview)--改造TreeView(CheckBox多选择版本),递归绑定数据...
- 《C语言课程设计》一第3章 文 件 类
- oracle索引和同义词,关于Oracle序列、索引、同义词
- 【转】VS2013中如何解决error C4996: 'fopen'问题
- cocos2dx 圆盘抽奖_cocoscreator之微信小游戏的抽奖转盘
- linux下php支持mysql_linux下php扩展mysqli的支持 .
- 大数据之-Hadoop伪分布式_配置日志聚集---大数据之hadoop工作笔记0028
- 关于Request.params的知识收藏
- Android物联网应用程序开发(智慧城市)—— 购物信息的存储界面开发
- 直流电机、减速器、编码器与TB6612FNG知识整理
- 技术实操|Apache Spark 内存管理详解(上篇)
- c语言变量报存在bss段,C语言初始化——bss段初始化、跃入C、C与汇编
- 电脑的计算机文件打开格式,如何打开zip文件_怎样在电脑上打开zip文件
- 课后实践10:以闲鱼为例,梳理产品功能结构迭代路径
- Vue 中使用 axios 传输数据,当数据量过大时会提示跨域?(√已解决)
- 内网代理穿透1:nc代理穿透
- [树剖] 树剖:从入门到进阶
- 论程序员成就之天梯排行榜
- Linux进程和计划任务的管理
- 回顾过去一年,AI人工智能领域的发展情况
热门文章
- 【Linux篇】第七篇——进程地址空间(程序地址空间+虚拟地址空间)
- 【SUMO学习】初级 SUMOlympics
- C语言自定义字符串复制函数
- Uni-app 小程序 微信登录 手机号登录
- java factorial_[Java]函数求阶乘n!(factorial)(四种方法)
- 单台安装nodejs公共(离线包、矢量瓦片服务)
- windows server2012 安全配置方案—多个管理员账号、管理员帐号改名、陷阱帐号
- helm安装postgres_Helm 安装使用
- 第五章 LLE——Locally Linear Embedding
- c语言熊猫病毒源代码,病毒:注册表的认识以及用c语言编写一个“百分之一熊猫烧香”...