第四十三课 表单标签-input
表单：专门用来收集用户信息
表单元素：
在HTML中 标签／标记／元素都是指HTML的标签
例如：<a> a标签／a标记／a元素
表单元素也是HTML中的标签，但是有特殊的外观和默认的功能
表单的格式：
<form>
<表单元素>
</form>
常见的表单元素：
input标签：他有一个type属性，可以有很多类型，取直不同，功能和外观不同
value：默认值
type：
text明文输入框；
password暗文输入框；
radio单选框
注意点
单选框不是互斥的，必须添加设置name属性，同时name必须相同；
默认选中，设置checked=“checked”，在HTML中取值和属性的名字一样，即可以只写一个，但建议写上；
同时设置checked以最后一个为准
checkbox多选框，默认选中设置checked
第四十四课 表单标签按钮
input 按钮
type:
- button普通按钮，通过value设置按钮标题，作用：配合JS完成一些操作
- image图片按钮，src属性设置图片，作用：配合JS完成一些操作
- reset重置按钮，作用：清空表单中已经填写好的数据，默认标题“重置”，可以空过value修改
- submit提交按钮，作用：将表单中内容提交到远程服务器
注意点：
需要给form添加action属性，设置需要提交到的服务器地址
同时需要给提交到服务器的表单元素添加一个name属性
hidden隐藏域，作用：配合提交按钮，将一些数据默默的提交的服务器 通过name和value设置 Ajas
第四十五课 label标签
将文字和输入框绑定
1、将文字利用label标签包裹起来
2、给输入框添加一个ID属性
3、在label标签中通过for属性和输入框中的id进行绑定即可
第四十六课 datalist标签 了解因为大部分浏览器不支持
datalist标签：给输入绑定待选框
格式：
<datalist>
<option>待选项</option>
</datalist>
步骤：
1、一个输入框，一个datalist列表
2、给datalist添加ID属性
3、在输入框中添加list属性，属性值是datalist的ID
第四十七课 表单标签H5 （了解）浏览器部分支持
自动检测输入内容
url
number
date 有日历选择器
color 有取色板
<!--http://www.520it.com/?name=名字&password=adfa&gender=on&hid=默默的-->
<!-- 表单 -->
<form class="" action="http://www.520it.com">
name:<input type="text" name="name" value="名字"><br>
password:<input type="password" name="password"><br>
gender:<input type="radio" name="gender">man
<input type="radio" name="gender">woman
<input type="radio" name="gender" checked="checked">保密 <br>
like:<input type="checkbox">bassketball
<input type="checkbox">football
<input type="checkbox" checked>woman
<input type="button" value="按钮一般">
<input type="image" src="0.gif">
<input type="reset">
<input type="submit">
<input type="hidden" name="hid" value="默默的">
<hr>
<!--这种可以交叉绑定-->
<label for="name">name:</label><input type="text" id="name">
<!--这种不可以交叉绑定-->
<label>
password:<input type="text" name="">
</label>
<hr>
车：<input type="text" list="cars">
<datalist id="cars">
<option>宝马</option>
<option>宝骏</option>
<option>奔驰</option>
</datalist>
<hr>
email:<input type="email" name="" value="">
number:<input type="number" name="" value="">
url:<input type="url" name="" value="">
date:<input type="date" name="" value="">
color:<input type="color" name="" value="">
</form>
第四十八课 表单标签 非input标签
1、select标签：用于定义下拉列表
格式：
><select>
<option>列表数据</option>
</select>
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
注意点：
1、下拉列表不能输入内容，但是可以直接在列表中选择内容
2、可以通过给option标签加一个selected属性来指定默认值
3、可以通过optgroup分类
<!-- 选择器 -->
<select class="" name="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">砀山</option>
</select>
<select class="" name="">
<optgroup label="上海">
<option value="">浦东新区</option>
<option value="">浦西</option>
</optgroup>
<optgroup label="其他">
<option value="">北京</option>
<option value="">广东</option>
</optgroup>
</select>
textarea标签：定义一个多行输入框
格式：
<textarea>
</textarea>
注意点：
1、默认情况下输入框可以无限换行
2、默认情况下输入框有自己的宽度和高度
3、可以通过cols和rows来指定输入框的宽度和高度
但是还是可以无限往下输入
4、默认情况下输入框是可以手动拉伸的，可以CSS控制
<!-- 文本框 -->
<textarea name="name" rows="8" cols="80"></textarea>
第四十九课 表单练习
<!-- 表单 -->
<form action="http://www.520it.com">
<fieldset>
<legend>注册界面</legend>
<p>
账号：
<input type="text" name="account">
</p>
<p>
密码：
<input type="password" name="pwd">
</p>
<p>
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="gay">保密
</p>
<p>
爱好：
<input type="checkbox" name="like" value="basketball">篮球
<input type="checkbox" name="like" value="football">足球
<input type="checkbox" name="like" value="amasy">足浴
</p>
<p>
简介：
<textarea name="desc" rows="8" cols="80"></textarea>
</p>
<p>
生日：
<input type="date" name="birthday">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
手机：
<input type="tel" name="tel">
</p>
<input type="submit" value="注册">          
<input type="reset" value="清空">
</fieldset>
</form>
<!-- http://www.520it.com/?account=adfadf&pwd=%26nbsp&gender=male&like=basketball&like=football&like=amasy&desc=%E6%89%93%E5%8F%91%E6%89%93%E5%8F%91%E5%BF%AB%E4%B9%90%E7%9A%84%E7%BD%9A%E6%AC%BE%E5%8A%9B%E5%BA%A6&birthday=2017-09-12&email=afad%40d.com&tel=13423234323 -->
多选按钮和单选按钮一样，指定统一的name
除了提交和重置按钮，其他按钮可以通过设置value来设置传给服务的值
fieldset标签给表单添加一个边框
<form action="">
<fieldset>
<legend>表单边框的标题</legend>
<input type="text">
</fieldset>
</form>
