input元素

1. 定义

HTML表单用于收集用户输入，<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

2. type属性(限定输入类型)

其中的type属性

text、password

按钮：submit、reset、button

单选框：radio

复选框：checkbox

时间和日期：time、date、month、week、datetime-local

限定输入框输入的类型

type改为number：限制数字输入

限定数字输入的范围：三大属性min、max、step

数字具象化显示：数值滚动条显示，type=range

邮箱、电话和网址：email\tel\url

pattern属性：自定义匹配模式

比如

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

a. 单选实例

<form>
<input type="radio" name="sex" value="male" checked="">Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

b. 文本实例

<input type="text"> 定义用于文本输入的单行输入字段：

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

c. 按钮实例

*<input type="submit">* 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

3. value属性(设置默认值)

设置表单的默认值，只需给表单元素的value属性赋值即可

4. autofocus属性(自动聚焦)

文本输入字段被设置为当页面加载时获得焦点：

<form action="demo_form.asp">
  First name: <input type="text" name="fname" autofocus=""><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 input 标签的 autofocus 属性。</p>

加载以后,自动聚焦

5. 按钮(补充)

这里也可以采用button元素进行按钮的设置

使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。

请始终位 button 元素设置 type 属性，因为不同的浏览器为其指定的默认值可能不同。

<button type="submit">提交</button>

6. Action 属性

6.1 定义

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

7. Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段：

First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

8. disabled 属性

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname"></p>
  <p>Last name: <input type="text" name="lname" disabled="disabled"></p>
  <input type="submit" value="Submit">
</form>

<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

9. readonly 属性

9.1 定义

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 或 配合使用。

9.2 实例

<form action="/example/html/form_action.asp" method="get">
  
  <p>Name:<input type="text" name="email"></p>

  <p>Country:<input type="text" name="country" value="China" readonly="readonly"></p>
  
  <input type="submit" value="Submit">
</form>

<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

Country一列无法修改

10. 其余补充

placeholder给出提醒

require属性，输入框必填

size属性：调整输入框的大小

maxlength属性：限定输入的字符长度

list属性和datalist属性（与option搭配）：数据列表

在web开发过程中，对于在页面存储但不需要显示出来的值，我们通常使用上面的代码来存储。但是此时的代码具有兼容性，在ie6，ie7中仍然会占位（ie8没有），所以在ie6，ie7中会导致页面区域出现无故的空白区域。

解决方法是：

<div style="height:0px;width:0px;display:none">  



<input type="hidden" value="1">  



<input type="hidden" value="1">  



<input type="hidden" value="1">  



.....  



</div>  

作用：1 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。

​ 2 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。

参考

创建我的第一个表单

HTML 表单