表单标签
一、表单的功能
使用表单目的是为了收集用户信息。
二、表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)、提示信息3个部分构成。
1、表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集与传递。
<form>会把它范围内的表单元素信息提交给服务器。
<!--表单域的语法--><form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>
常用属性:
2、表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
(1)input输入表单元素
① 概念定义:
在表单元素中<input>标签用于收集用户信息。
在标签中,包含一个type属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值"/>
注意:
<input/>标签为单标签type属性设置不同的属性值用来指定不同的控件类型
② type属性的属性值及其描述如下:
③ 其他常用属性
示例:
<!--表单属性--><form><!--text文本框,用户可以在里面输入任何文字--><!--maxlength规定了输入的最大长度-->用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br><!--password密码框,用户看不见输入的密码-->密码: <input type="password" name="pwd"> <br><!--radio单选按钮,可以实现多选一--><!--name是表单元素名字 这里性别单选按钮必须具有相同名字name,才可以实现多选一 --><!--单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮-->性别:男 <input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked"><br><!--checkbox多选按钮,可以实现多选-->爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br><!--submit提交按钮,点击了提交按钮,可以把表单域form里面的表单元素里面的值 提交给后台服务器--><input type="submit" value="点击提交"><!--重置按钮合一还原表单元素初始的默认状态--><input type="reset" value="重新填写"><!--普通按钮button 后期结合js搭配使用--><input type="button" value="获取短信验证码"><br><!--file文件域 上传文件时使用的-->上传文件:<input type="file"></form>
注意:
(1)name和value是每个表单元素都有的属性值,主要给后台人员使用。
(2)name表单元素的名字,要求单选按钮和复选框要有相同的name值
(3)checked属性主要针对单选按钮和复选框,主要作用一打开页面,就可以默认选中耨个表单元素。
(4)maxlength是用户可以在表单元素输入的最大字符数,一般较少使用。
④ <label>标签:
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法:
<label for="sex">男</label><input type="radio" name="sex" id="sex">
<label>标签的for属性应当与相关元素的id属性相同。
(2)select下拉表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。
语法为:
<select><option>选项1</option><option>选项2</option><option>选项3</option></select>
注意:
在<select>中至少包含一对<option>。在<option>中定义selected="selected"时,当前项即为默认选中项。
示例:
籍贯:<select><option>四川</option><option selected="selected">吉林</option><option>江苏</option><option>天津</option>
(3)textarea文本域元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,我们可以使用<textarea>标签。
在表单元素中,<textarea>标签使用于定义多行文本输入的控件。
语法:
<textarea cols="50" rows="5">文本内容</textarea>