htmlinput标签类型属性type（file、text、radio、hidden等）详
细介绍
html <input>标签类型属性type(file、text、radio、hidden等)详
细介绍
转载请注明：⽂章转载⾃:[]
html <input>标签类型属性type(file、text、radio、hidden等)简介
html <input>标签搜集⽤户信息，是 html Form表单中的⼀种输⼊对象。根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、掩码后的⽂本控件、单选按钮、按钮等等。
html <input>标签类型属性type定义和⽤法
type 属性规定要显⽰的 <input> 元素的类型。默认类型是：text。该属性不是必需的，但是我们认为您应该始终使⽤它。
html <input>标签类型属性type详解
html input标签type属性值(包括html 5新增的type值)
1
2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24值描述
button    定义可点击的按钮（⼤多与 JavaScript 使⽤来启动脚本）checkbox  定义复选框。
color      定义拾⾊器。
date      定义⽇期字段（带有 calendar 控件）
datetime  定义⽇期字段（带有 calendar 和 time 控件）
datetime-local  定义⽇期字段（带有 calendar 和 time 控件）
month    定义⽇期字段的⽉（带有 calendar 控件）
week        定义⽇期字段的周（带有 calendar 控件）
time      定义⽇期字段的时、分、秒（带有 time 控件）
email      定义⽤于 e-mail 地址的⽂本字段
file      定义输⼊字段和 "浏览..." 按钮，供⽂件上传
hidden    定义隐藏输⼊字段
image  定义图像作为提交按钮
number  定义带有 spinner 控件的数字字段
password  定义密码字段。字段中的字符会被遮蔽。
radio  定义单选按钮。
range  定义带有 slider 控件的数字字段。
reset  定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search  定义⽤于搜索的⽂本字段。
submit  定义提交按钮。提交按钮向服务器发送数据。
tel    定义⽤于电话号码的⽂本字段。
text  默认。定义单⾏输⼊字段，⽤户可在其中输⼊⽂本。默认是 20 个字符。url    定义⽤于 URL 的⽂本字段。
以下 input 类型是 HTML5 中的新类型：
color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。html<input>标签类型属性type(file、text、radio、hidden等)简介-html5新增属性
html 常⽤input type值介绍
1，input标签属性type值为text举例说明
输⼊类型是text，这是使⽤最多的input类型，⽐如登陆输⼊⽤户名，注册输⼊电话号码，电⼦邮件，家庭住址等等。这也是Input的默认类型。
参数name：同样是表⽰的该⽂本输⼊框名称。
参数size：输⼊框的长度⼤⼩。
html中提交表单用什么属性参数maxlength：输⼊框中允许输⼊字符的最⼤数。
参数value：输⼊框中的默认值
特殊参数readonly：表⽰该框中只能显⽰，不能添加修改。
html<input>标签类型属性type(file、text、radio、hidden等)简介-input type text
input标签属性type值为text代码实例
1 2 3 4 5<form>
your name:
<input type="text"name="yourname"size="30"maxlength="20"value="输⼊框的长度为30，允许最⼤字符数为20"><br> <input type="text"name="yourname"size="30"maxlength="20"readonly value="你只能读不能修改">
</form>
2，input标签属性type值为password 举例说明
不⽤我说，⼀看就明⽩的密码输⼊框，最⼤的区别就是当在此输⼊框输⼊信息时显⽰为保密字符。参数和“type=text”
相类似。
input标签属性type值为password代码举例
1 2 3 4<form>
your password:
<input type="password"name="yourpwd"size="20"maxlength="15"value="123456">密码长度⼩于15 </form>
3，input标签属性type值为file举例说明
当你在论坛上传图⽚，在EMAIL中上传附件时就使⽤当前属性，input type为file时提供了⼀个⽂件上传的平台，参数有name，size。input标签属性type值为file的html代码如下:
1 2 3 4<form>
your file:
<input type="file"name="yourfile"size="30"> </form>
4，input标签属性type值为hidden详细介绍及举例
input标签type值为hidden时，通常称为隐藏域，如果⼀个⾮常重要的信息需要被提交到下⼀页，但⼜
不能或者⽆法明⽰的时候，可以使⽤hidden。
input标签属性type值为hidden⽰例代码:
1 2 3 4 5 6 7<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce"> </form>
<script>
alert("隐藏域的值是 "+urhiddeninfo.value)
</script>
5，input标签属性type值为button详细介绍及举例
标准的⼀windows风格的按钮，当然要让按钮跳转到某个页⾯上还需要加⼊写JavaScript代码 input标签属性type值为button⽰例代码:
1 2 3 4<form name="form1">
your button:
<input type="button"name="yourhiddeninfo"value="打开www.169it"onclick="window.open('www.169it')"> </form>
6，input标签属性type值为checkbox详细介绍及举例
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表⽰默认选择）其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不⼀样，但不推荐。）
input标签属性type值为checkbox⽰例代码:
1 2 3 4<form name="form1">
a:<input type="checkbox"name="checkit"value="a"checked><br> b:<input type="checkbox"name="checkit"value="b"><br>
c:<input type="checkbox"name="checkit"value="c"><br>
5</form>
name值可以不⼀样，但不推荐<br>
1 2 3 4 5<form name="form1">
a:<input type="checkbox"name="checkit1"value="a"checked><br> b:<input type="checkbox"name="checkit2"value="b"><br>
c:<input type="checkbox"name="checkit3"value="c"><br>
</form>
7，input标签属性type值为radio详细介绍及举例
即单选框，出现在多选⼀的页⾯设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是，name值⼀定要相同，否则就不能多选⼀。当然提交到处理页的也还是value值。input标签属性type值为radio⽰例代码:
1 2 3 4 5<form name="form1">
a:<input type="radio"name="checkit"value="a"checked><br> b:<input type="radio"name="checkit"value="b"><br>
c:<input type="radio"name="checkit"value="c"><br>
</form>
下⾯是name值不同的⼀个例⼦，就不能实现多选⼀的效果了<br>
1 2 3 4 5<form name="form1">
a:<input type="radio"name="checkit1"value="a"checked><br> b:<input type="radio"name="checkit2"value="b"><br>
c:<input type="radio"name="checkit3"value="c"><br>
</form>
8，input标签属性type值为image 详细介绍及举例⽐较另类的⼀个input type，可以作为提交式图⽚。input标签属性type值为image⽰例代码:
1 2 3 4<form name="form1"action="www.169it/test.php"> your Imgsubmit:
<input type="image"src="../blog/images/face4.gif">
</form>
9，input标签属性type值为submit和reset详细介绍及举例
分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进⾏提交action页处理，reset则起个快速清空所有填写内容的功能。input标签属性type值为submit和reset代码举例:
1 2 3 4 5<form name="form1"action="xxx.asp"> <input type="text"name="yourname"> <input type="s
ubmit"value="提交">
<input type="reset"value="重置">
</form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。