HTML5权威指南——定制input元素

input元素的属性有23个不同的值，在想要不要给他们挨个记录一下呢，光看是记不住的，但是一定要都要记住他们吗？

用input元素输入文字

• 用input元素用作输入文字，那么它的type就是text或者不设置type属性（因为它是默认属性）。
  1.设定元素大小
• maxlength属性设定用户能输入字符数的最大值。
• size属性设定文本框能够显示的字符数目。
  2.设置初始值和占位式提示
• 使用value属性设置一个默认值
• 使用placeholder属性设置一段提示文字。
  3.使用数据列表
• 讲input元素的属性list的值设置为一个datalist元素的id值
• datalist是HTML5新增的，它可以提供一批值来帮助用户输入需要的数据

<form>
    <legend>Enter You Details</legend>
    <p><label for="name">姓名： <input autofocus id="name" /> </label> </p>
    <p><label for="sex" >性别： <input  id="sex" list="sexlist" /> </label> </p>
</form>
<datalist id="sexlist">
    <option >男</option>
    <option>女</option>
</datalist>

它的效果就是这样，还不错嘛！

4.生成只读或者禁用的文本框

• readonly生成只读的文本框
• disabled属性生成禁用的文本框
• 虽然看上去作用都差不多，但是他们生成的外观是不一样的

<form>
    <legend>Enter You Details</legend>
    <p><label for="name">姓名： <input autofocus id="name" value="gyypwrs" readonly /> </label> </p>
    <p><label for="sex" >性别： <input  id="sex"   value="女" disabled/> </label> </p>
</form>

姓名是readonly它的外观和正常的没啥区别，就是无法编辑，性别是disabled它的外观就是变灰了，同样也无法编辑。

5.指定文字方向

• 使用dirname属性可以将用户输入文字的方向的数据发送给服务器。

用input元素输入密码

• type设置为password用于输入密码。
• 在用户输入的时候内容换成掩饰字符，但是在发送给服务器时收到的是明文密码。
• 当type设置为password时可以用的属性。

属性	说明
maxlength	设置用户可以在密码框中输入的字符的最大数目
pattern	指定一个用于输入验证的的正则表达式
placeholder	指定关于输入数据类型的提示
readonly	只读，防止用户编辑
required	表明用户必须输入一个值否则无法通过输入验证
size	指定密码框中可见的字符数目
value	设置初始密码

用input元素生成按钮

• 将type属性设置为submit，reset，button就会变成按钮
• 变成按钮的input元素可用的额外属性与button元素的同名属性用法相同。

用input元素为输入数据把关

input元素的type属性在HTML5中新增的一些值可以对用户输入的数据类型提出更加具体的要求。
1.用input元素获取数值

• type为number时输入框只接受数值。
• 在输入框后边还会有上调或者下调的输入框。
• 下面是属性为number时额外的属性

属性	说明
min	可接受的最小值
max	可接受的最大值
step	上调或者下调的步长

<p><label for="age" >年龄： <input type="number" id="age" min="10" max="100" step="1"   /> </label> </p>

2.用input元素获取指定范围内的数值

• type是range
• 它特有的属性跟number是一样的

<p><label for="price" >价格：1 <input type="range" id="price" min="0" max="100" step="1" value="1"  />100 </label> </p>

我滑来滑去的时候也不知道滑的的数值是多少差评！（也可能是我不会用，菜鸡的卑微）

3.用input元素获取布尔型输入

• type的值为checkbox
• 它的属性如下

属性	说明
checked	设置了该属性的复选框刚显示出来或者重制之后呈勾选状态
required	表示用户必须勾选此复选框否则无法通过验证
value	设定将复选框呈勾选状态时提交给服务器的数据值，默认为on

<p><label for="accept" >您确认过以上信息准确无误吗 <input type="checkbox" id="accept" /> </label> </p>

4.用input元素生成一组固定选项

• type为radio生成一组单选按钮
• 它额外的属性值和checkbox一样就不再写啦
• 如果要生成一组互斥的选项，只要将相关input元素的name属性设置为同一个就好了

<fieldset>
    <legend>选择您最爱吃的水果吧！</legend>
    <label for="apples">
        <input type="radio" checked value="apples" id="apples" name="fave"/>苹果
    </label>
    <label for="cherries">
        <input type="radio" value="cherries" id="cherries" name="fave"/>樱桃
    </label>
    <label for="oranges">
        <input type="radio"  value="oranges" id="oranges" name="fave"/>橘子
    </label>
</fieldset>

5.用input元素获取有规定格式的字符串

• 将type属性设置为email，tel，url的input元素能接受的有效输入数据分别是：邮箱地址，电话号码，URL。
• 除input支持的属性之外，Email还支持，还支持一个multiple属性，设置了该属性该input元素能够接受多个电子邮箱地址。

<p><label for="email" >邮箱： <input type="email" id="email" multiple /></label> </p>
<p><label for="tel" > 电话：<input type="tel" id="tel"  /></label> </p>
<p><label for="url" > URL：<input type="url" id="url"  /></label> </p>

外观上看来并无差别，但是要求输入的内容可就不一样了

6.用input元素获取时间和日期

• 当type为以下值时可以用来获取时间

属性值	说明
datetime	获取世界时日期和时间
datetime-local	获取本地日期和时间
date	获取本地日期
month	获取年月信息
time	获取时间
week	获取当前星期

<p><label for="datetime" > datetime：<input type="datetime" id="datetime"  /></label> </p>
<p><label for="datetime-local" > datetime-local：<input type="datetime-local" id="datetime-local"  /></label> </p>
<p><label for="date" > date：<input type="date" id="date"  /></label> </p>
<p><label for="time" > time：<input type="time" id="time"  /></label> </p>
<p><label for="month" > month：<input type="month" id="month"  /></label> </p>
<p><label for="week" > week：<input type="week" id="week"  /></label> </p>

下面是各个日期的表现形式

7.用input元素获取颜色值

• type为color时可以用来选择颜色
• 它还支持list属性，也就意味着可以自定义可以选择的颜色，但需要注意的是颜色的取值是以#开头加上三个两位十六进制数。
  点击中间的黑色就可以进行选择颜色了（chrome浏览器）。
  

用input元素获取搜索用词

• 当type值为search时会生成一个单行文本框，供用户输入搜索用词
• 实际上这个文本什么也不做，就如同type为text属性时一样。

<p><label for="accept" >您确认过以上信息准确无误吗 <input type="checkbox" id="accept" /> </label> </p>

虽然书上说两个没什么不一样，但在chrome浏览器输入数据之后还是会出现一个小×号

用input元素生成隐藏的数据项

• type为hidden时，能生成用户不能编辑的表单，但是提交表单的时候能够将该数据也发送到服务器
• 作用就像图上所说的一样
  

用input元素生成图像按钮和分区响应图

• 当type为image时，会显示一张图，点击图像会提交表单
• 所谓的而分区响应图我理解的就是在提交表单的数据项中包含用户点击这张图的X,Y坐标。
  该type下的额外属性，其实就是图片的属性加上button元素的属性

属性	说明
alt	提供元素的说明文字
height	以像素为单位设置图片的高度
width	以像素为单位设置图片的宽度
src	要显示的图片的地址

用input元素上传文件

• type为file可以上传文件
  它有下面几个特有的属性

属性	说明
accept	指定接受的MIME类型
multiple	设置此属性可以一次上传多个文件
required表明用户必须为其提供一个值

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
我觉得就是文件类型。