前端：HTML （学习笔记）【2】
目录
三，form表单
1，表单
（1）定义：
（2）action 属性
（3）method 属性
2，表单元素
（1）文本框
（2）密码框
（3）单选按钮 checked
（4）多选按钮
（5）普通按钮
（6）特殊按钮
（7）下拉列表
（8）文件
（9）隐藏域
（10）多行文本框
（11）时间控件
3，HTML5新增 type 类型
（1）email : HTML5的类型可以增加校验
（2）url：用于网址输入。
（3）color：用于颜色选择器。
（4）number：用于数值输入。
（5）range：用于滑动条类型的数值选择。
（6）date：用于日期选择。
（7）time： 用于时间选择。
（8）month：用于月份选择（只有月份和年份）。
（9）week：用于周选择（包含年份）
（10）search：用于搜索框，可以包含清除按钮。
（11）提交按钮
4，HTML5新增属性
（1）multiple：多选
（2） placehoder:默认提示
（3）autofocus:自动获取焦点
（4） required:必填项
三，form表单
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
1，<form>表单
（1）定义：
form表单会采集包含的有效数据，提交到后端，进行交互
（2）action 属性
提交到的地址 action = " url / uri "
- 地址栏信息：
http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=nana&pwd=123123
?之前是提交的资源的目标地址
?之后是提交的具体的数据http ： 信息交互遵照协议 http协议
127.0.0.1 ：代表本机的IP地址
8020 ：Hbuilder内置服务器的端口号
Form%E8%A1%A8%E5%8D%95：指的是你的项目名字：Form表单
PS：浏览器的地址栏是不支持中文的，都会转成编码传送，如果你在地址栏看到中文，只是当前的那个浏览器给你一个友好的显示
PS:可以使用在线解析工具查看：urlencode
aaa:目标资源 --》去当前项目下找aaa了?后的内容：
username=nana&pwd=123123
我们写的文本框，密码框等必须要加入一个属性：name
然后name属性和具体录入的信息会拼成一个键值对的形式，多个键值对之间 ，用&符号进行拼接PS：只有放在form表单中的内容才会被收集并提交
（3）method 属性
提交方式，有get和post两种，默认为get
get方式：提交数据可见，不安全提交，直接地址栏拼接传值；传参有长度限制；参数有类型要求；可以做数据缓存；各大浏览器厂商默认使用get提交方式
post方式 ：提交数据不可见，相对安全，打数据包发送；传参几乎没有长度限制；参数类型几乎没有要求；没有数据缓存
===扩展："幂等"==》 同一个url就应该对应同一个响应结果。
2，表单元素
代码过长，分开截图！！所有内容都是如上图位置中的！！
（1）文本框
【1】input标签 ：使用很广泛，通过type属性的不同值，来表现不同的形态。
【2】type="text" 文本框，里面文字可见
【3】表单元素必须有一个属性：name 有了name才可以提交数据,才可以采集数据，然后提交的时候会以键值对的形式拼到一起。
【4】value:就是文本框中的具体内容
【5】键值对：name=value的形式
【6】 如果value提前写好，那么默认效果就是value中内容。
一般默认提示语：用placeholder属性，不会用value--》value只是文本框中的值。
【7】readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
disabled禁用：完全不用，不能正常提交
<!--文本框-->文本框<br />
<input type="text" name="uname" placeholder="请录入身份证信息"/>
<input type="text" name="uname2" value="123123" readonly="true"/>
<input type="text" name="uname3" value="456456" disabled="disabled"/><br />（2）密码框
【1】效果录入信息不可见
【2】type="password"
<!--密码框-->密码框<br />
<input type="password" name="pwd" /><br />
（3）单选按钮 checked
【1】一组单选按钮，必须通过name属性来控制，让它们在一个分组中，然后在一个分组里只能选择一个.
【2】正常状态下，提交数据为：gender=on ，后台不能区分你提交的数据， 不同的选项的value值要控制为不同，这样后台接收就可以区分了。
【3】默认选中：checked="checked"
<!--单选按钮-->单选按钮<br />
<input type="radio" name="sex" value="1"checked/>男
<input type="radio" name="sex" value="2"/>女<br />
<!--选择按钮,利用name将其归为一组,属性和属性值相同可以留一个-->（4）多选按钮
【1】必须通过name属性来控制，让它们在一个分组中，然后在一个分组里可以选择多个不同的选项的value值要控制为不同，这样后台接收就可以区分了。
【2】多个选项提交的时候，键值对用&符号进行拼接：例如下： favlan=1&favlan=3
【3】默认选中：checked="checked"
<!--多选按钮-->多选按钮<br />
你喜欢的语言：
<input type="checkbox" name="favlan" value="1" checked="checked"/>java
<input type="checkbox" name="favlan" value="2" checked="checked"/>python
<input type="checkbox" name="favlan" value="3"/>php
<input type="checkbox" name="favlan" value="4"/>c#<br />（5）普通按钮
普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件
<input type="button" value="普通按钮" />
<!--普通按钮-->
<input type="button" value="普通按钮" /><br /> 
（6）特殊按钮
【1】重置按钮将页面恢复到初始状态 <input type="reset" />
【2】图片按钮 <input type="image" src="../../img/VIP3.png" />
【3】提交按钮：具备提交功能 <input type="submit" />
<!--特殊按钮-->特殊按钮<br />
重置按钮将页面恢复到初始状态<br />
<input type="reset" />
<br />图片按钮<br />
<img src="../../img/1.png" />
<input type="image" src="../../img/VIP3.png" />
<br />提交按钮：具备提交功能 <br />
<input type="submit" />
<br />
（7）下拉列表
【1】默认选中：selected="selected"
【2】多选：multiple="multiple"
<!--下拉列表-->下拉列表<br />
你喜欢的城市：
<select name="city" >
<option value="0">---请选择---</option>
<option value="1">哈尔滨市</option>
<option value="2" >青岛市</option>
<option value="3">郑州市</option>
<option value="4">西安市</option>
<option value="5">天津市</option>
</select> 
（8）文件
<input type="file" />
<!--文件-->文件域：<br />
<input type="file" name="fname" /><br />（9）隐藏域
<input type="hidden" name="uname6" value="123123" />
<!--隐藏框-->隐藏框<br />
<input type="hidden" name="hi" value="重要数据" /><br />（10）多行文本框
利用css样式来控制大小不可变：style="resize: none;"
<!--多行文本框-->多行文本框<br />
自我介绍：
<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
<br />
<!--label标签 一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性跟id配合使用。-->
<label for="uname">用户名：</label><input type="text" name="uername" id="uname"/><br /> 
（11）时间控件
<input type="date" name="dt" />
<!--时间控件-->时间控件<br />
<input type="date" name="dt" /> 
3，HTML5新增 type 类型
（1）email : HTML5的类型可以增加校验
（2）url：用于网址输入。
（3）color：用于颜色选择器。
（4）number：用于数值输入。
min——最小值； max——最大值；
step——步长；value——默认值：一定在步长的范围中，否则不能提交
（5）range：用于滑动条类型的数值选择。
（6）date：用于日期选择。
（7）time： 用于时间选择。
（8）month：用于月份选择（只有月份和年份）。
（9）week：用于周选择（包含年份）
（10）search：用于搜索框，可以包含清除按钮。
（11）提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--email:
html5的类型可以增加校验
-->
<input type="email" name="email" /><br />
<!--url-->
<input type="url" /><br />
<!--color-->
<input type="color" /><br />
<!--number:
min:最小值
max:最大值
step:步长
value:默认值：一定在步长的范围中，否则不能提交
-->
<input type="number" min="1" max="10" step="3" value="4"/><br />
<!--range-->
1<input type="range" min="1" max="10" name="range" step="3"/>10<br />
<!--date-->
<input type="date" /><br />
<!--time-->
<input type="time" /><br />
<!--month-->
<input type="month" /><br />
<!--week-->
<input type="week" /><br />
<!--searth-->
<input type="search"/><br />
<!--提交按钮-->
<input type="submit" /><br />
</form>
</body>
</html>
4，HTML5新增属性
（1）multiple：多选
——下拉列表
（2） placehoder:默认提示
——文本框代码有使用
（3）autofocus:自动获取焦点
（4） required:必填项
<input type="text" autofocus="autofocus"/>
<input type="text" required="required" />