html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

转载请注明：文章转载自:[169IT-最新最全的IT资讯]

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值介绍 

1，input标签属性type值为text举例说明

输入类型是text，这是使用最多的input类型，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。这也是Input的默认类型。 

参数name：同样是表示的该文本输入框名称。 

参数size：输入框的长度大小。 

参数maxlength：输入框中允许输入字符的最大数。 

参数value：输入框中的默认值 

特殊参数readonly：表示该框中只能显示，不能添加修改。 

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.com">  </form>  <script>  alert("隐藏域的值是 "+document.form1.yourhiddeninfo.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.com" onclick="window.open('http://www.169it.com')">  </form>

6，input标签属性type值为checkbox详细介绍及举例

多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 

其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。） 

input标签属性type值为checkbox示例代码:

1 2 3 4 5

<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>  </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="http://www.169it.com/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="submit" value="提交">  <input type="reset" value="重置">  </form>