表单标签:
表单标签主要用于HTML页面中针对相关信息的采集提交、比对验证等与用户进行交互。
表单标签由三部分组成:表单域、提示信息、表单控件。
表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过表单域的url地址,将表单域中的数据提交到服务器。
特点:
1、属于双标签
2、容纳表单控件、提示信息、文本域相关标签
3、可将表单域中的相关数据提交到服务器
格式:
<form action="url地址" method="提交方式" name="表单名称">
各种表单标签
</form>
常用属性:
action : 用于指定接收并处理表单数据的服务器程序的url地址
method : 用于设置表单数据的提交方式,起取值为get或post
name : 用于指定表单的名称,以区分同一个页面中的多个表单
<form action="xxx.html" method="post" name="fm1">
... //存放input、label、textarea、select相关标签
</form>
表单控件:常用的 input控件、textarea控件、select控件,用作于信息的输入,选择等。
input标签:
特点:
1、属于单标签
2、可通过指定其类型属性,定义为不同的input控件
格式:
<input type="控件类型"/>
常用属性:
type : 输入控件的类型
text 单行文本输入框
password 密码输入框(输入内容以*或·代替)
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name : 自定义控件名称
value : 控件中默认的文本值
size : 控件在页面中显示的宽高值
checked : 选择控件默认被选中的项
maxlength : 控件允许输入的最多字符数
<form action="xxx.html" method="post" name="fm1">
<input type="text"/> //文本输入标签
<input type="button"/> //按钮输入标签
...
</form>
textarea控件:文本域,可创建一个多行文本输入框。
特点:
1、属于双标签
格式:
<textarea cols="每行中的字符数" rows="显示的行数">
</textarea>
常用属性:
cols : 允许对应的textarea文本输入框一行能够显示多少个字符
rows : 允许对应的textarea文本输入框能够显示多少行字符
<form action="xxx.html" method="post" name="fm1">
<textarea cols="10" rows="5"></textarea> //该文本域控件每行只能显示10个字符,能显示5行
...
</form>
select控件:下拉选择菜单。
特点:
1、属于双标签
2、使用select为下拉菜单的根标签
3、在select标签中,只能嵌套option标签,并且至少有一对option标签存在
格式:
<select>
<option> 选项1 </option>
<option> 选项2 </option>
<option> 选项3 </option>
...
</select>
常用属性:
option的selectd属性,表示选项默认选中
<form action="xxx.html" method="post" name="fm1">
<select>
<option selected="selected"> 北京 </option>
<option> 上海 </option>
<option> 广州 </option>
<option> 深圳 </option>
<option> 重庆 </option>
</select>
...
</form>
label标签:用于绑定一个表单元素,当点击label标签时,被绑定表单元素将获得输入焦点。
特点:
1、属于双标签
格式:
<label> 文本内容 </label>
常用属性:
for : 该元素的文本 和 表单元素的id保持一致,实现绑定
<form action="xxx.html" method="post" name="fm1">
<label for="username"> 姓名: </label>
<input type="text" id="username"/>
...
</form>