一、表单的用途
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
一个表单有三个基本组成部分：
-
表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
-
表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
-
表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
HTML5新标签
| 标签 | 描述 |
|---|---|
| form | 定义供用户输入的表单 |
| input | 定义输入域 |
| textarea | 定义文本域 (一个多行的输入控件) |
| label | 定义了 input 元素的标签，一般为输入标题 |
| fieldset | 定义了一组相关的表单元素，并使用外框包含起来 |
| legend | 定义了 fieldset 元素的标题 |
| select | 定义了下拉选项列表 |
| optgroup | 定义选项组 |
| option | 定义下拉列表中的选项 |
| button | 定义一个点击按钮 |
| datalist | 指定一个预先定义的输入控件选项列表 |
| keygen | 定义了表单的密钥对生成器字段 |
| output | 定义一个计算结果 |
form标签
用来定义表单，可以包含多个表单元素
常用属性
. action 提交数据给谁处理 , 即处理数据的程序,默认为当前页面
. method方法 ; 提交数据的方式，取值 : get(默认),post
get和post的区别
get: 以查询字符串形式提交，数据在地址栏中能看到，长度有限制，不安全
post: 以表单数据组形式提交，在地址栏中式看不到数据的，长度无限制，安全
. enctype ; 指定提交数据的编码，取值application/x-www-form-urlencoded(默认值), multipart/form-data(文件上传时使用)
单行文本框：下·
type/"表单"常用属性:
. name 名称,很重要,如果没有指定name,则该表单元素的数据时无法提交的
. value 初始值,
. size 宽度
. maxlength 最大的字符数
. readonly 只读,readonly="readonly" ; 可以简写readonly,即只写属性名,不写属性,只是变为可读，但是数据依旧可以提交
. disabled 禁用 ; disabled="disabled", 可简写即disabled 完全禁用，服务器拿不到，数据不能提交
代码演示
html
<form action="" method="get">
<!-- name可以为表单控件起名，其名称在提交表单时会传输给服务器 -->
<!-- value可以为文本框赋默认值 -->
<!-- readonly表示只读 -->
<!-- required表示该信息必填 和表单域结合可以呈现验证内容 -->
<!-- disabled表示禁用 在页面中呈现灰色 -->
<!-- placeholder可以指定文本框输入前的信息提示 -->
<label for="text">*普通文本框： </label><input type="text" name="text" id="text"><br>
<!-- type="password" 表示密码文本框，其输入的内容以密文的形式出现 -->
*密码文本框： <input type="password" name="password"><br>
<!-- type="number" 表示数字数据库，只允许用户输入数字，小数或者负数 -->
*数字输入框： <input type="number" name="number"><br>
日期输入框： <input type="date" name="date"><br>
<!-- type="tel" 在移动端会调起数字键盘 -->
<!-- maxlength="11"表示输入最大的字符数 -->
电话号码输入框：<input type="tel" name="tel" maxlength="11"><br>
<!-- type="email" 在移动端会显示@ -->
邮箱输入框： <input type="email" name="email"><br>
<!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
<!-- checked表示默认选中 -->
*单选框：<label><input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女">女</label><br>
*复选框：<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="乒乓球">兵乓球<br>
搜索框：<input type="search" name=""><br>
<!-- type="button"在value属性中可以显示按钮的内容 -->
*普通按钮：<input type="button" value="普通按钮"><br>
<!-- type="submit" 结合(form)表单域实现提交效果
在表单中 submit 点击之后会自从触发提交行为，会向action指定的地址提交，请求方式为method指 定的方式通常表单提交为post
-->
*提交按钮：<input type="submit" value="提交按钮"><br>
<!-- 图片会被当作一个按钮 -->
<input type="image" src="../02Day/image/华仔.png" height="50">
<!-- reset表示重置按钮，会让表单回到默认值-->
重置按钮：<input type="reset" value="重置按钮"><br>
<!-- accept属性可以过滤文件 -->
文件上传框：<input type="file" name="file" accept="img/*"><br>
<!-- 隐藏域在页面不可见，但是可以随着表单一起提交给服务端-->
隐藏域：<input type="hidden"><br>
<!-- cols相当于width rows相当于heigh -->
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<!-- selected指定默认选中 -->
<!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
请选择课程:
<select name="recouse">
<optgroup label="理科"></optgroup>
<option value="高等数学">高等数学</option>
<option value="离散数学" selected>离散数学</option>
<option value="线性代数">线性代数</option>
<option value="概率论">概率论</option>
</select>
</form>