HTML复习之表单

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

一、表单域

表单域是一个包含表单元素的区域，在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递，<form>会把它范围内的表单元素信息提交给服务器

二、input输入表单元素

1在<input>标签(单标签)中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种样式

<input type="属性值"  />

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

• button：定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
• checkbox：定义复选框（有相同的名字name，可以实现多选）
• file：定义输入字段和“浏览”按钮，供文件上传
• hidden：定义隐藏的输入字段
• image：定义图像形式的提交按钮
• password：定义密码字段，该字段中的字符被掩码
• radio：定义单选按钮（只有当所有单选按钮有相同的名字name时才可以实现多选一）
• reset：定义重置按钮，重置按钮会清除表单中的所有数据
• submit：定义提交按钮，提交按钮会把表单数据发送到服务器
• text：定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

2、<input>其他属性

①name（属性值由用户自定义）：定义input元素的名称

②value（属性值由用户自定义）：规定input元素的值。当在value属性值中写上“请输入名字”时在表单中呈现的效果是“请输入名字”的字出现在文本框中，一般给后台人员使用

③checked（属性值为checked）：规定input元素首次加载时应当被选中，多数与单选按钮和复选框结合使用

④maxlength（属性值为正整数）：规定输入字段中的字符的最大长度

3、<label>标签（为input元素定义标注）

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

<label for="sex">男</label>

<input type="radio" name="sex" id="sex" />

三、select下拉表单元素

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

2、<select>

            <option>选项1</option>

            <option>选项2</option>

            <option>选项3</option>

    </select>

四、textarea文本域表单元素

1、使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。

五、

1、但我们点击文本框时会出现蓝色的轮廓线，当我们给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框

2、防止拖拽文本域（文本域可手动扩大，这样会影响排版布局且实际开发中文本域右下角是不可以拖拽的）

textarea { resize: none;}