unit3 表单
1、表单form语法
总结：表单必须配合表单项使用
<form method="post" action="http://www.baidu.com">
表单项：
</form>
属性1：method 表单提交方式：get(默认) post
html5中的表单的意义？收集用户数据(登录，注册，发说说,....s)
1.get提交与post提交的区别？
1)get提交方式的特点： form默认的提交方式
a.提交的数据会在地址栏显示
b.地址栏携带的数据大小不能超过2k左右
c.上传文件不能用get
d.get不安全
2）post提交方式的特点：
a.保证数据安全(相对)
b.文件传输必须要用post提交
c.post提交数据理论上是没有大小限制
d.提交的数据不会在地址栏显示
属性2：action 表单提交的服务器地址
2、表单（项）元素
1.文本框（显示明文）
<!--1.文本框（显示的是明文）
name:表单项的名字 ==>为了方便服务器区分单项信息 [必须]
value:定义默认值
size:文本框的长度
maxlength:文本框可输入的最大字符数
-->
用户名：<input type="text" name="username" value="张三狗"
size="30" maxlength="3" />
2.密码框（显示的是密文）
<!--2.密码框(显示的是密文)
type:password [必写]
name:表单项的名字 ==>为了方便服务器区分单项信息 [必写]
value:定义默认值
size:文本框的长度
maxlength:文本框可输入的最大字符数
-->
密码：<input type="password" name="pwd" maxlength="3" placeholder（文本提示）="请输入密码" />
3.单选按钮
<!--3.单选框(多)
type:radio [必写]
name:表单项的名字 ==>为了方便服务器区分单项信息 [必写 必须一致]
value:定义默认值 [必写]
checked:是否选中 checked表示选中 或checked="checked"表示选中
-->
性别：<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" checked />女
4.复选框
<!--4.复选框
type :checkbox [必写]
name:表单项的名字 ==>为了方便服务器区分单项信息 [必写 必须一致]
value:定义默认值 [必写]
checked:是否选中 checked表示选中 或checked="checked"表示选中
-->
爱好：<input type="checkbox" name="hobbies" value="睡觉"/>睡觉
<input type="checkbox" name="hobbies" value="学习" checked />学习
<input type="checkbox" name="hobbies" value="吹牛逼"/>吹牛逼
5.列表框
<!--5.列表框 select标签
name:表单项的名字 ==>为了方便服务器区分单项信息 [必写 必须一致]
value:定义默认值 [必写]
selected:是否选中 selected表示选中 或selected="selected"表示选中
size:下拉列表的高度
-->
学历：<select name="xueli" size="3">
<option value="本科">本科</option>
<option value="专科" selected="selected">专科</option>
<option value="研究生" selected>研究生</option>
<option value="博士生">博士生</option>
</select>
6.按钮
<!--6.按钮
type :
reset(重置按钮) image (图片按钮)==>提交表单的功能
button(普通按钮) 默认点击无任何反应
submit(提交按钮) ==>提交表单的功能
name:按钮的名称 【可以不写】
value:按钮显示的文字【可以不写】
-->
<input type="reset" value="重 置"/>
<input type="image" src="loginIcon.gif" />
<input type="button" value="给我一个美女"/>
<input type="submit" value="注册"/>
- 重置按钮
- 图片按钮
- 普通按钮
- 提交按钮
7.多行文本框（文本域）
<!--7.多行文本框(文本域) textarea表
rows：行数
cols：列数
name:表单项的名字 ==>为了方便服务器区分单项信息 [必写]
-->
备注·····》<textarea name="附录" rows="10" cols="10"></textarea>
8.文件框
<!--8.文件框
type="file"
注意：
表单加：enctype="multipart/form-data" 【必须加】
name:表单项的名字 ==>为了方便服务器区分单项信息[必写]
-->
头像：<input type="file" name="head_img"/>
9.邮箱、网址
<!--9.邮箱 、网址
type="email"
name:表单项的名字 ==>为了方便服务器区分单项信息[必写]
注意：1.自动验证邮箱格式。
1.自动网址格式。
-->
邮箱：<input type="email" name="email"/>
网址：<input type="url" name="url"/>
10.数字
数字：
<input type="number" name="num" min="0" max="100" step="10"/>
11.滑块
请输入数字:
<input type="range" name="range1" min="0" max="10" step="2"/>
12.搜索框
请输入搜索的关键词:
<input type="search" name="sousuo"/>
3、表单高级应用
<form method="post" action="http://www.baidu.com">
<!--1.隐藏域-->
<input type="hidden" value="22o2oo1100" name="order_id"/>
<!--2.只读 -->
<input type="text" value="二狗" readonly />
<!--3.禁用-->
<input type="image" disabled value="提交"/>
<!--4. 标注-->
<label for="man">男</label>
<input id="man" type="radio" name="sex" value="男"/>
<label for="woman">女</label>
<input id="woman" type="radio" name="sex" value="女"/>
</form>
1、隐藏域
- type="hidden"
2、只读
- readonly
只读文本框
3、禁用
- disabled
禁用按钮
4、标注
1、增强鼠标的可用性
2、 自动将焦点转移到与该标注相关的表单元素上
5、placeholder、required、pattern
<!--5.placeholder提示 :文本框输入内容提示
required不能为空 ：必填项
pattern 正则表达式：验证规则，正则表达式
^13[0-9]{9}$ 电话号码不是13开始的
^1[358]/d{9} 以13 15 18开始的电话号码才能提交表单
-->
用户名：<input name="username" required placeholder="请输入6位用户名" />
电话:<input name="mobile" pattern="^13[0-9]{9}$" />