<input>标签整理

<input>标签的知识点比较多，特别拿出来单独汇总。<input> 的主要作用是用来搜集用户的信息，是一个非常重要的标签，<input>的属性中大多和type的值息息相关，因为type决定了用户将以何种形式来提交信息。

type属性

<input type="text"/>
<!--text是一个20个字符的文本框-->

<input type="password"/>
<!--password是一个密码框，密码会转换成暗码显示-->

<input type="checkbox"/>apple
<input type="checkbox"/>orange
<!--checkbox是复选框-->

<input type="radio"/>apple
<input type="radio"/>orange
<!--radio是单选框-->

<input type="submit" value="提交"/>
<!--submit是提交按钮-->

<input type="reset"/>
<!--reset是清空表单按钮-->

<input type="image" src="" alt=""/>
<!--image是图片形式的提交按钮，src和alt是必须属性-->

<input type="file" />
<!--file是文件选择和浏览功能-->

<input type="hidden"/>
<!--hidden定义隐藏字段-->

另外还有color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url，这几个类型是h5新增的，浏览器支持尚不确定


–测试后补充–

<input type="color"/>
<!--color定义一个调色板-->

<input type="date"/>
<!--定义一个可选的date控件，格式是yy-mm-dd，chrome测试无任何变化-->

<input type="datetime"/>
<!--定义可选的带时区的date和time控件，格式是yy-mm-dd-hh-ss-mm，chrome测试无任何变化-->

<input type="datetime-local"/>
<!--定义可选的不带时区的date和time控件-->

<input type="month"/>
<!--定义一个yy-mm的时间控件-->

<input type="week"/>
<!--定义一个yy-ww的时间控件-->

<input type="time"/>
<!--定义一个ss-mm的时间控件-->

<input type="email"/>
<!--校验输入的内容是否为email格式-->

<input type="number"/>
<!--定义一个可以输入或者选择数字的控件-->

<input type="range"/>
<!--定义一个可以拖动的滚动条-->

<input type="search"/>
<!--定义一个用于搜索的文本框，chrome测试无任何变化-->

<input type="tel"/>
<input type="url"/>
<!--分别用于定义电话和url，tel无任何浏览器支持，url经chrome测试无任何变化-->

checked属性

规定首次加载被选中

<form>
<input type="checkbox"/>apple
<input type="checkbox" checked="checked"/>orange
</form>

disabled属性

规定input元素被禁用

<form>
name<input type="text" value="user" disabled="disabled"/>
email<input type="text"/>
</form>

required属性

规定input元素的值是必须的

<form>
name<input type="text" value="user" disabled="disabled"/>
email<input type="text" required="required"/>
<input type="submit" value="提交"/>
</form>
<!--required不支持safari-->
<!--required是html5新增属性-->

readonly属性

规定input元素只读，不可修改

<form>
name<input type="text" value="user" disabled="disabled"/>
<br/>
email<input type="text" required="required"/>
<input type="submit" value="提交"/>
<br/>
password<input type="password" value="123456" readonly="readonly"/>
</form>

maxlength属性

限制输入内容的最大长度，文本框本身长度不会变化，主要针对可以输入内容的type：text、search、tel、url、email 和 password

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" maxlength="6" /></p>
  <p>Email: <input type="text" name="email" maxlength="20" /></p>
  <input type="submit" value="Submit" />
</form>

size属性

规定以字符数计的 <input> 元素的可见宽度，主要针对可以输入内容的type：text、search、tel、url、email 和 password

<form action="form_demo.asp" method="get">
  <p>Email: <input type="text" name="email" size="35" /></p>
  <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p>
  <input type="submit" value="Submit" />
</form>

multiple属性

允许一个以上的值上传，主要针对type：file、email

<form action="form_demo.asp" method="get">
<input type="file" multiple="multiple"/>
</form>
<!--multiple是html5新增属性-->

autofocus属性

加载完成后自动给焦点

<form>
  First name:<input type="text" name="fname" autofocus="autofocus" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" />
</form>
<!--autofocus是html5新增属性-->

autocomplete属性

自动完成表单，基于用户之前输入的值给予预测

<form action="demo_form.asp" method="get" autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email" autocomplete="off" /><br />
  <input type="submit" />
</form>
<!--autocomplete是html5新增属性-->

placeholder属性

定义填写提示，和value不同，placehold只是提示，并不是真的填写，而value需要用户清空旧内容，才能填写新内容，主要针对可以输入内容的type：text、search、tel、url、email 和 password

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
  <input type="submit" />
</form>
<!--placeholder是html5新增属性-->

alt属性和src属性

一般运用在type=”image”。alt的作用是当图片形式的提交按钮上的图片显示不出来的时候，可以显示文字；src的作用是规定提交按钮显示图像的来源

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="submit.jpg" alt="Submit" />
</form>
<!--不支持safari-->

width和height属性

一般运用在type=”image”。规定image的高度和宽度

<form action="demo_form.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<!--html5新增属性-->

pattern属性

验证input值得正则表达式，属于客户端验证，用title来提示用户验证规则

<!DOCTYPE html>
<html>
<body>
<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>
</body>
</html>
<!--html5新增属性-->

list属性

带有预选项的下拉列表

<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
<!--safari不支持-->
<!--html5新增属性-->

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

max和min属性

规定input元素的最大值和最小值，适用于与数字有关的type：number、range、date、datetime、datetime-local、month、time 和 week

<form action="demo_form.html">
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31">
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02">
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

step属性

规定输入字段的合法数字间隔，可以与min，max一起使用，适用于与数字有关的type：number、range、date、datetime、datetime-local、month、time 和 week

<form action="demo_form.asp" method="get">
  <input type="number" name="points" step="3" />
  <input type="submit" />
</form>

name属性

略

value属性

略

align属性

建议CSS