表单主要用来制作动态网页，方便和用户进行交互
<form method="post"action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
post和get：规定如何发送表单数据常用值:get |post
get：提交有限只能255个长度字符并且不安全
post： 【安全
action="result.html"表示向何处发送表单数据
表单元素格式
<input type="text" name="fname" value="text"/>
| 属性 | 说明 |
|---|---|
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
文本框
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/> text:文本框
userName：文本框名称
用户名:文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
密码框password
<input type="password " name="pass" size="20" /> type:密码框
name:密码框名称
size：密码框长度
单选按钮radio
<input name="gen"type="radio"value="男" checked />男
<input name="gen"type="radio"value="女"/>女
radio:单选按钮框
value:值
checked：单选按钮选中状态
复选框:checkbox
<input type="checkbox" name="interest"value="sports"/>运动
<input type="checkbox" name="interest"value="talk" checked />聊天
<input type="checkbox" name="interest"value="play"/>玩游戏
checkbox:复选框
checked:选中状态
value:值
列表框（下拉列表框）<select>和<option>
<select name="列表名称"size="行数">
<option value="选项的值"selected="selected">…</option>
<option value="选项的值">…</option >
</select>
select:列表框
selected：默认选中项
option：选项
按钮button、submit和reset
<input type="reset"name="butReset"value="reset按钮">
<input type="image" src="images/login.gif" />
<input type="button " name="butButton" value="button按钮"/>
rest:重置按钮
reset按钮 ：按钮上显示的文字
images/login.gif：图片路径
button:普通按钮
多行文本域 textarea <textarea name="showText" cols="x" rows="y">文本内容 </textarea > textarea多行文本
cols="x"：显示的列数
rows="y"：显示的行数
文件域
<form action=""method="post" enctype="multipart/form-data">
<p><input type="file"name="files" />
<input type="submit" name="upload" value="上传"/></p>
</form>
file:文件域
enctype="multipart/form-data":表单编码属性
邮箱:email
<p>邮箱:<inputtype="email" name="email"/></p>
<inputtype="submit"/>
email：邮箱
网址url
<p>请输入你的网址:<inputtype="url" name="userUrl"/></p>
<inputtype="submit"/>
url:网址
数字number
<p>请输入数字:<input type="number" name="num"min="0" max="100" step="10"/></p>
<inputtype="submit"/>
number:数字
min:允许的最小值
max:允许的最大值
step:合法的数字间隔
滑块range
<p>请输入数字:<input type="range" name="range1"min="0" max="10" step="2"/></p>
<inputtype="submit"/>
range：滑块
min:允许的最小值
max:允许的最大值
step:合法的数字间隔
搜索框search
<p>请输入搜索的关键词:<inputtype="search" name="sousuo"/></p>
<inputtype="submit"/>
search：搜索框
隐藏域
<input type="hidden" value="666" name="userid"> hidden: 隐藏域
只读和禁用
<input name="name"type="text" value="张三" readonly>
<input type="submit" disabled value="保存">
readonly:只读文本框
disabled ：禁用
表单元素的标注
优点:增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<label for="id">标注的文本</label>
<input type="radio"name="gender" id="male"/>
表单元素的可用性
for="id":表单元素的id
id="male“:表单元素id
注意:for的id一定要和input里的id一致
表单初级验证：
为什么要进行表单验证？
1.减轻服务器的压力
2.保证数据的可行性和安全性
placeholder
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
语法:
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
required
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
语法:
<input type="text" name="username" required/> pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="tel" required pattern= "^1[358]d{9}" />
<>两端的汉语连接用span