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. placeholder属性

placeholder属性表示输入框中的提示信息，当输入框有value属性的时候，提示内容会消失，转而显示value属性值。

代码示例如下：

显示效果如图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.2.3 password：密码输入框

密码输入框输入的内容会以小黑点的形式替代显示。最常见的一种用法就是用户注册登录时需要输入账号密码框，小黑点的形式可以有效地避免密码泄露。

代码示例如下：

代码运行效果如图4-5所示。

4.2.4 radio：单选按钮

单选按钮用于填写表单时信息选择，如调查问卷中的单选题。

代码示例如下：

代码运行效果如图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.2.6 file：文件上传按钮

文件上传按钮用于文件上传，单击“选择文件”按钮会弹出对话框，选择需要上传的文件。图4-8和图4-9是代码运行效果。

代码示例如下：

代码运行效果如图4-8所示。单击“选择文件”按钮，在弹出的对话框中选择需上传的文件，如图4-9所示。

4.2.7 submit：表单提交按钮

表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会被发送到表单指定的地方进行处理。图4-10为一个设置了value值的submit表单提交按钮。当没有value值时，submit按钮中默认显示的文字为“提交”。

代码示例如下：

代码运行效果如图4-10所示。

4.2.8 reset：重置按钮

重置按钮将表单数据重置为初始状态，通常是清空表单已填内容。

代码示例如下：

图4-11和图4-12是单击重置按钮前后的显示效果。

4.2.9 image：图形提交按钮

图形提交按钮需要添加src属性来设置图片路径。功能与submit相同，可以提交表单数据，通常在美化网页时会用到图形提交按钮来代替默认的提交按钮，使页面更加美观。图4-13是一个使用图片制作的图形提交按钮。

代码示例如下：

4.2.10 button：可单击按钮

定义一个可单击的按钮，通常与JavaScript（后面会有专门的篇章讲解）一起使用来启动脚本。下面的代码就利用button按钮在浏览器中显示了一个弹窗，图4-14是单击“点我！”按钮后出现弹窗的效果。

代码示例如下：