表单标签
表单主要用于收集用户信息,与用户交互,将数据提交给服务器。表单的三个主要元素为表单域、表单控件、提示信息。
1.表单域
表单域是指整个表单区域,标签为<form></form>(相当于表格中的<table>),这个标签会把它里面的信息提交给服务器。
<form>标签的属性:
属性 | 说明 |
---|---|
action | 用于指定接收并处理表单数据的服务器的地址 |
method | 用于设置表单数据的提交方式,属性值为get或post |
name | 用于指定表单名称以区分同一页面内的多个表单 |
2.表单控件
(1)input输入表单元素(单标签)
- 基本语法:<input type=“属性值”>
- name属性:用于区别不同input表单元素,属性值由用户自定义,可用于单选按钮实现多选一功能
- value属性:属性值由用户自定义,定义input元素的值,只有在type为text的时候才会出现在网页上,其他类型是被隐藏的,主要给后台人员使用
- type属性:
属性值 | 说明 |
---|---|
text | 单行文本框,默认长度为20个字符 |
password | 密码框,用户输入的内容会被加密不显示 |
radio | 单选按钮,注意要给同一个问题的多个单选按钮设置同一个name才可以实现多选一的效果 |
checkbox | 复选框,实现多选效果,要给同一系列的复选框定义相同的name |
button | 可点击按钮,不提交数据,只是完成某个任务,可以用于“获取短信验证码”,多数情况下用于通过js启动脚本 |
submit | 提交按钮,把表单数据发送到服务器,通过value属性可以改变按钮的值,默认按钮的值为“提交” |
reset | 重置按钮,清除表单中的所有数据,通过value属性可以改变按钮的值,默认按钮的值为“重置” |
file | 定义输入字段和“浏览”按钮,供文件上传 |
image | 定义图像形式的提交按钮 |
hidden | 定义隐藏的输入字段 |
- checked属性:属性值checked,规定此input元素首次加载时应当被选中,即打开网页的时候就默认选中了(比如可用于注册时的同意协议)。一般用于单选按钮和复选框,且单选按钮中只有一个选项可以被设置默认选中,复选框可以有多个。
- maxlength属性:属性值正整数,规定输入字段中的字符最大长度,一般较少使用
<label>标签
<label>标签本身不属于表单元素,但经常和表单元素搭配使用,用于绑定一个表单元素,当点击
<--! 设置这样一个单选按钮,直接点击"男"这个字,也可以选中按钮,不用将鼠标定位到按钮上(for属性和id属性属性值要一致) -->
<label for="sex">男</label>
<input type="radio" name="sex" value="男" id="sex">
(2)<select>表单元素
<select>表单元素用于定义下拉表单,使表单页面更加简洁。
基本语法:
提示信息
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
··· ···
</select>
- 注意事项:
- <select>标签中至少包含一对<option>标签
- 下拉表单会显示选项1的内容
- 在<option>标签中定义selected="selected"时,当前项即默认选中项
(3)<textarea>表单元素
<textarea>表单元素用于表单域,当用户输入内容较多时使用,常用于留言板、评论等。
<textarea rows="5" cols="50"> <--! 确定文本框大小 -->
文本内容
</textarea>
3.提示信息
提示用户的文字。