1.表单的基本语法
action="表单提交地址"；method="get/post；get/post的区别
注意：get/post都不写的时候默认为get
get不安全，会显示在地址栏上你的表单信息，文本形式，传的内容较少
post安全，不会显示在地址栏上，能传的内容较多
<!DOCTYPE html><html> <head> <title>表单get和post提交</title> </head> <body> <form action="#" method=""> <label for="username">用户名：</label> <!-- <input type="text"/> --> <input name="username" id="username"/> <br> <label for="pwd">密 码：</label> <input type="password" name="pwd" id="pwd"/> <br> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body></html>
<formmethod="post"action="result.html">//action="表单提交地址"；method="get/post"<p>名字：<inputname="name"type="text"></p><p>密码：<inputname="pass"type="password"></p><p><inputtype="submit"name="Button"value="提交"/><inputtype="reset"name="Reset"value="重填“/> </p></form>
2.表单元素格式
3.文本框(text)
<inputtype="text"name="userName"value="用户名"size="30"maxlength="20"/>
4.密码框(password)
5.单选按钮(radio)
注意：如果是同一组内容，需要name的名字相同，否则会出现选中之后不能取消并且可以同时选择两个
6.复选框(checkbox)
注意：value值必须得写，否则取value值的时候会拿不到
7.列表框（下拉列表）
8.提交、重置按钮（submit）(reset)
9. 图片按钮(image)
10.多行文本域(textarea)
11.文件域(file)
12.邮箱(email)
13.网址(url)
14.数字(number)
15.滑块(range)
16.搜索框(search)
17.隐藏域（hidden）
18.只读和禁用(readonly)(disabled)
19.表单元素的标注
20.表单初级验证的方法
1.placeholder(默认显示)
input类型的文本框提供一种提示（hint）可以描述文本框期待用户输入何种内容提示语默认显示，当文本框中输入内容时提示语消失适合于input标签：text、search、url、email和password等类型
2.required（内容不能为空）
规定文本框填写内容不能为空，否则不允许用户提交表单适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
3.pattern（规则验证，正则表达式）
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"//4-10位字符密码：pattern="[\dA-Za-z]{6,16}"//6-16位字符，有大小写手机号码：pattern="1[3578]\d{9}"//以1开头，第二位数字为3578，后9位全数字年龄：pattern="\d|[1-9]\d|1[0-2]\d"
20.总结
21.表单习题练习
<!DOCTYPE html><html><head> <title>表单元素</title></head><body> <!-- 表单 --> <form method="POST" action="#"> <!-- 标记标签 --> <label for="username">姓名：</label> <!-- 文本框 --> <input id="username" type="text" value="用户名" /> <br> <label for="pwd">密码：</label> <!-- 密码框 --> <input type="password" id="pwd" /> <br> <label for="sex">性别：</label> <!-- 单选按钮 --> <input type="radio" name="sex" checked id="sex" />男 <input type="radio" name="sex" />女 <br> <label for="hobby">爱好：</label> <!-- 复选框 --> <input type="checkbox" name="hobby" id="hobby" checked />听音乐 <input type="checkbox" name="hobby" />旅游 <input type="checkbox" name="hobby" />玩游戏 <br> <!-- 下拉列表 --> <label for="month">月份：</label> <select name="" id="month"> <option value="" selected>一月</option> <option value="">二月</option> <option value="">三月</option> </select> <br>
<!-- 按钮 --> <input type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> <input type="button" value="普通按钮" /> <button type="submit">提交</button> <button type="reset">重置</button> <br> <!-- 图片按钮 --> <input type="image" src="image/bg2.jpeg" height="150px" width="200px"> <br> <label for="profile">个人简介：</label> <!-- 多行文本域 --> <textarea name="" id="" cols="30" rows="10">对风华高科了解福利计划空间来衡量</textarea> <br> <!-- 文件域 --> <label for="upload">上传头像：</label> <input type="file" name="upload" /> <br> <!-- 邮箱 \h5新添加的元素--> <label for="qqEmail">邮箱：</label> <input type="email" id="qqEmail" /> <br> <!-- 网址 --> <label for="userUrl">网址：</label> <input type="url" id="userUrl" /> <br> <!-- 数字 --> <label for="num">数字：</label> <input type="number" id="num" /> <!-- 滑块 --> <br> <label for="rang">滑块：</label> <input type="range" id="rang" /> <br> <!-- 搜索框 --> <label for="search">搜索框：</label> <input type="search" id="search" /> <br> <!-- 隐藏域 --> <label for="hidden">隐藏域</label> <!-- 需要使用查看元素才能看得到hidden元素 --> <input type="hidden"> <br> <!-- 只读和禁用（只读只能读取不能修改，禁用：直接是灰色的） --> <input value="我是只读的" readonly /> <input type="button" value="我是禁用的" disabled /> <br> <!-- placeholder框里面的默认提示信息 --> <label for="sea">搜索框</label> <input type="search" placeholder="请输入电话号码" id="sea" /> <br> <!-- required必填项 --> <label for="email">邮箱</label> <input type="email" required id="email" /> <br> <!-- 正则表达式验证--> <label for="pattern">电话号码验证</label> <input type="text" pattern="^1[358]\d{9}"> </form></body></html>
运行结果：
22.
自定义区域
块元素，行内标签，别用来组合文档中的行内元素
23.行内元素：span
24.HTML总结：
