4.2 input输入框
作为表单最重要的元素，input输入框用于搜集用户信息。根据不同的type属性值，可以用多种形式输入内容。例如，当type值为password时就可以设置输入框为输入密码形式，此时用户输入的内容用小黑点代替显示。灵活使用input输入框可以让表单收集更多的信息，下面来具体学习input输入框的相关属性和类型。
4.2.1 input常用属性
1. type属性
type属性表示input输入框的类型，它的默认值是text。所有浏览器都支持type属性，但是type的属性值并不是所有浏览器都可以支持，本节介绍的属性值所有浏览器均可支持，但后续小节提到的某些HTML5表单新增属性值则需要注意浏览器的兼容性。
2. name属性
name属性表示input输入框的名称，一般必填。因为传递数据时，使用“name=value”的形式传递。
3. value属性
value属性表示input输入框的默认值。
代码示例如下：
显示效果如图4-2所示。
图4-2 输入框的默认值显示效果
4. placeholder属性
placeholder属性表示输入框中的提示信息，当输入框有value属性的时候，提示内容会消失，转而显示value属性值。
代码示例如下：
显示效果如图4-3所示。
图4-3 输入框的提示信息
5. tabindex属性
tabindex="1"此属性控制按Tab键时的跳转顺序，从最小的数值开始，逐个往大的数值跳转，依次获得焦点。
6. input元素的其他属性
除以上属性外，input还有一些属性名等于属性值的特殊属性，具体如下：
1）checked="checked"默认选中。
2）disabled="disabled"设置控件不能使用。用在按钮上效果为不能单击，用在输入框上则表示不能修改。而且，如果输入框设置为disabled，则输入框中的信息不能往后台传递。
3）hidden="hidden"设置隐藏控件。基本语法如下：
＜input type="hidden"name="username"value="1234"/＞
它常用于配合disabled属性，或根据其他需要，使用隐藏域传递数据。
除了上面介绍的input输入框具有此类特殊属性，表单的其他部分控件也有此类属性名等于属性值的属性，具体属性会在后续小节中介绍。
4.2.2 text：文本输入框
文本输入框用于输入单行文本，默认宽度为20个字符。在登录注册时，常常用到文本输入框，它主要用于填写用户名称。代码示例的运行效果如图4-4所示。
代码示例如下：
图4-4 文本输入框的运行效果
4.2.3 password：密码输入框
密码输入框输入的内容会以小黑点的形式替代显示。最常见的一种用法就是用户注册登录时需要输入账号密码框，小黑点的形式可以有效地避免密码泄露。
代码示例如下：
代码运行效果如图4-5所示。
图4-5 密码输入框
4.2.4 radio：单选按钮
单选按钮用于填写表单时信息选择，如调查问卷中的单选题。
代码示例如下：
代码运行效果如图4-6所示。
图4-6 单选按钮效果
注意：
name和value属性需同时存在，提交时，提交的是value中的属性值。
例如：＜inputtype="radio"name="sex"value="男"/＞提交时，显示"sex=男"。
radio凭借name属性区分是否为同一组。name相同，为同组，同组中只能选择一个。
checked="checked"默认选中。radio只能选一个，checkbox可以选多个。
4.2.5 checkbox：复选按钮
复选按钮与单选按钮相同，也用于填写表单时信息选择，如调查问卷中的多选题。
代码示例如下：
代码运行效果如图4-7所示。
图4-7 复选按钮效果
4.2.6 file：文件上传按钮
文件上传按钮用于文件上传，单击“选择文件”按钮会弹出对话框，选择需要上传的文件。图4-8和图4-9是代码运行效果。
代码示例如下：
代码运行效果如图4-8所示。单击“选择文件”按钮，在弹出的对话框中选择需上传的文件，如图4-9所示。
图4-8 文件上传按钮效果
图4-9 弹出对话框选择文件
4.2.7 submit：表单提交按钮
表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会被发送到表单指定的地方进行处理。图4-10为一个设置了value值的submit表单提交按钮。当没有value值时，submit按钮中默认显示的文字为“提交”。
代码示例如下：
代码运行效果如图4-10所示。
图4-10 表单提交按钮效果
4.2.8 reset：重置按钮
重置按钮将表单数据重置为初始状态，通常是清空表单已填内容。
代码示例如下：
图4-11和图4-12是单击重置按钮前后的显示效果。
图4-11 重置前效果
图4-12 重置后效果
4.2.9 image：图形提交按钮
图形提交按钮需要添加src属性来设置图片路径。功能与submit相同，可以提交表单数据，通常在美化网页时会用到图形提交按钮来代替默认的提交按钮，使页面更加美观。图4-13是一个使用图片制作的图形提交按钮。
代码示例如下：
图4-13 图形提交按钮效果
4.2.10 button：可单击按钮
定义一个可单击的按钮，通常与JavaScript（后面会有专门的篇章讲解）一起使用来启动脚本。下面的代码就利用button按钮在浏览器中显示了一个弹窗，图4-14是单击“点我！”按钮后出现弹窗的效果。
代码示例如下：
图4-14 可单击按钮的弹窗效果