表单基础
在html中，通常把form标签称为表单
表单不会对页面样式产生任何影响，但它会影响页面的行为
它可以将表单中的数据，使用指定的请求方式（get或post），提交到指定的服务器地址。
1. 表单的基本构造
<form>标签用于创建供用户输入的 HTML 表单，我们也必须要把所有表单标签放在form标签内部。
- 语法
<form><!--各种表单元素--></form>
举例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单基础</title></head><body><form><div><label for="name">用户名</label><input type="text" id="name" /></div></form></body></html>
2. 常用表单元素
<fieldset>表单控件的分组<legend>标签为<fieldset>元素定义标题。
<label>标签为 input 元素定义标注（标记）。元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
注意：
<label>标签的 for 属性应当与相关元素的 id 属性相同。<input>标签规定了用户可以在其中输入数据的输入字段。用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
<select>元素用来创建下拉列表。<option>标签定义下拉列表中的一个选项。<optgroup>标签经常用于把相关的选项组合在一起。<textarea>标签定义一个多行的文本输入控件。- 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
- 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
<button>标签定义一个按钮。元素内部，您可以放置内容，比如文本或图像。这是该元素与使用
<input>元素创建的按钮之间的不同之处。
3. 表单元素常用属性
| 属性名称 | 所诉元素 | 属性说明 |
|---|---|---|
| action | <form> |
处理表单数据的脚本 |
| method | <form> |
表单的提交方式, get(默认),post |
| for | <label> |
绑定相关元素的id |
| placeholder | <input> |
placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 |
| selected | <option> |
默认选中 |
| checked | <input type="radio" />、<input type="checkbox" > |
默认选中 |
| value | 通用 | 定义送往服务器的选项值。 |
| autofocus | 通用 | 页面初始化/加载成功时,焦点自动落入 |
| required | 通用 | 必填项, 不写不能提交。注释（只有名称没有值的属性叫:布尔属性(只要写上就是true,不写就是false) ） |
| disabled | 通用 | 禁用 |
| id | 通用 | 规定元素的唯一 id |
| class | 通用 | 规定元素的类名（classname） |
| style | 通用 | 定元素的行内样式（inline style） |
| name | 通用 | name是提交互服务器上的变量名 |
| type | <input>、<button> |
规定元素的类型 |
4. <input>元素type类型
| 类型名称 | 类型说明 |
|---|---|
| button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
| checkbox | 定义复选框。 |
| colorNew | 定义拾色器 |
| dateNew | 定义 date 控件（包括年、月、日，不包括时间）。 |
| datetimeNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
| datetime-localNew | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
| emailNew | 定义用于 e-mail 地址的字段。 |
| file | 定义文件选择字段和 “浏览…” 按钮，供文件上传。 |
| hidden | 定义隐藏输入字段。 |
| image | 定义图像作为提交按钮。 |
| monthNew | 定义 month 和 year 控件（不带时区）。 |
| numberNew | 定义用于输入数字的字段。 |
| password | 定义密码字段（字段中的字符会被遮蔽）。 |
| radio | 定义单选按钮。 |
| rangeNew | 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 |
| reset | 定义重置按钮（重置所有的表单值为默认值）。 |
| searchNew | 定义用于输入搜索字符串的文本字段。 |
| submit | 定义提交按钮。 |
| telNew | 定义用于输入电话号码的字段。 |
| text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| timeNew | 定义用于输入时间的控件（不带时区）。 |
| urlNew | 定义用于输入 URL 的字段。 |
| weekNew | 定义 week 和 year 控件（不带时区） |
5. <button>type类型
| 类型名称 | 类型说明 |
|---|---|
| submit | 提交按钮 |
| button | 可点击的按钮 |
| reset | 重置按钮（清除表单数据）。 |
6. 实例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单基础</title><style>form{width: 40%;margin: 0 auto;}form div{width: 80%;margin: 10px auto;} input[type="text"],input[type="password"],input[type="email"]{width: 80%;}button{width: 100%;}</style></head><body><form><fieldset><legend>用户注册</legend><div><label for="uname">用户名：</label><input type="text" placeholder="用户名不能少于6位，且只能以英文字母开头" id="uname" name="username" autofocus required></div><div><labe for="email">邮 箱：</label><input type="email" name="email" id="email" placeholder="admin@admin.com" required></div><div><label for="pwd">密 码：</label><input type="password" name="password" id="pwd" required placeholder="密码必须包含大小写以及数字，且不小于8位" /></div><div><label for="age">年 龄：</label><input type="number" id="age" name="age" min="18" max="120" /></div><div><label for="birthday">生 日：</label><input type="date" id="birthday" value="1997-11-05" name="birthday" min="1949-10-01" /></div><div ><label for="male">性 别:</label><input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label><input type="radio" name="sex" value="female" id="female" /><label for="female">女</label><input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label></div><div><label>爱好:</label><input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label><input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program">编程</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label><input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label></div><div><label for="">学历:</label><select name="edu" id=""><option value="1">中学</option><option value="2" selected>大学</option><option value="2">大学</option><option value="3">博士</option></select></div><div><button>提交</button></div></fieldset></form></body></html>
