HTML表单标签

目录

1.表单的组成：

2.表单控件：

3.标签

4.下拉表单元素5.textarea表单元素

表单的目的是收集用户信息

1.表单的组成：

在HTML中，一个完整的表单通常由表单表单域，表单控件（也称表单元素）和提示信息三个部分组成。 常使用于注册页面

•  表单域： 是一个包含表单元素的的区域。

HTML标签中，<form>标签用于定义表单域，以实现用户信息的搜集和传递。
<form>会把它范围内的单元格元素信息提交给服务器

其基本语法：

<form action="url地址" method="提交方式" name="表单域名称">
    各种单元表元素控件
</form>

• 常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，提取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2.表单控件：

1. input输入表单元素
2. select下拉表单元素
3. textarea文本域元素

<input/>标签为单标签，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（文本字段、复选框、掩码后的文本控件、单选按键、按钮）

<input type="属性值"/>

type属性的属性值及其描述如下：

属性值	描述
button	定义可点击按钮
checkbox	定义复选框，多选按钮，实现多选
file	定义输入字段和“浏览”按键，供文件传输
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段(密码框)，该字段中的字符被掩码
radio	定义单选按钮，实现多选一
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段(文本框)用户可以在其中输入文本，默认宽度为20个字符

       注意： 单选按钮radio和复选框checkbox必须要加name属性，必须的有相同的名字name才可以实现多选选一或多选

<input>标签属性

属性	属性值	描述
name	由用户自定义	定义input元素名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时默认选中的内容
maxlength	正整数	规定输入字段中的字符的最大长度

注意：

    1)name和value是每个表单元素都有的属性值，主要给后台人员使用
    2)name表单元素的名字，要求单选按钮和复选框要有相同的name值
    3)checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单          元素 （checked="checked"）
    4)maxlength是用户可以在表单输入的最大字符数，一般比较少用

例题
问：有些表单元素想刚打开页面就默认显示几个文字怎么做
答：可以给这些表单元素设置value属性=“值”，例如:用户名：<input type="text" value="请输入用户名"/>

3.<label>标签

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上用来增加用户体验。
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for属性应当与相关元素id属性相同。

4.<select>下拉表单元素

        在页面中，如果有多个选项让用户选择，并且想要节约页面空间，可以使用<select>标签控件定义下拉列表。

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

注意：

    1)<select>标签中至少包含一对<option>
    2)在<option>中定义select="select"时，当前项即为默认选中项

5.<textarea>表单元素

        当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用文本域<textarea>标签
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板、评论。

语法：

<textarea row="3" cols="20">
文本内容
</texarea>

注意：
1)通过<textarea>标签可以轻松的创建多行文本输入框。
2)cols="每行中的字符数"，row=" 显示的行数"，我们在实际开发中不会使用，都是用CSS来改变大小