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