- Web开发技术:HTML、CSS、JavaScript
- 赵振
- 1680字
- 2025-02-18 03:40:52
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 可单击按钮的弹窗效果