HTML表单基础知识

表单

1、作用：收集用户信息

2、使用场景：登录页面、注册页面、搜索区域

3、input标签基本使用

input标签type属性值不同，则功能不同

type属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

①占位文本：提示信息

placeholder="提示信息"（文本框和密码框都可以使用）

②单选框radio

常用属性：

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

③多选框checkbox（复选框）——默认选中（checked)

④上传文件file

       默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。

代码：

结果：

4、下拉菜单

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。

默认选中：selected

代码：

结果：

5、文本域

作用：多行输入文本的表单控件

标签：textarea，双标签

6、label标签

作用：网页中，某个标签的说明文本

经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

增大点击范围：

写法一：①label标签只包裹内容，不包裹表单控件

              ②设置label标签的for属性值和表单控件的id属性值相同

写法二：使用label标签包裹文字和表单控件，不需要属性

提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、下拉菜单、文本域等等。

7、按钮——button

type属性值：

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合Javascript使用

8、无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div 独一行——<div>标签，独占一行</div>

span不换行——<span>span标签，不换行</span>

9、字符实体

作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	 
<	小于号	&lt;
>	大于号	&gt;

注：如果在代码中，敲键盘的空格，网页只可识别一个！