第二讲 HTML标签2--表格以及表单元素
本节继续学习HTML中的标签，表格标签、表单元素标签以及HTML5中新增的表单元素标签与新增的表单元素的属性。
1.认识表格
一个完整的表格由这几个标签组成(thead、tbody、tfoot和tr、td组成)
第一步：我们写表格了首先们要先写的是table标签，也就是先写一对table标签。
第二步：在table这对标签里写thead这对标签（thead的意思是表格的头部）
第三步：在thead这对标签里写tr这对标签（tr表示行）
第四步：在tr这对标签里写th这对标签（th表示重要的单元格）或td这对标签（td表示单元格）
第五步：在td这对标签里写内容（内容包括各种标签）
注：
同理写tbody和tfoot.
接下来，再来介绍下table标签常用的标签属性：
border:边框
cellspacing:单元格与单元格之间的间距
cellpadding:内容到边框的距离
align:center/left/right:表格的对齐方式
width:表格的宽度
border-collapse：separate： 边框独立 | collapse： 相邻边被合并
<table border="1" cellspacing="0" cellpadding="0" align="center" width="600"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> <tfoot> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tfoot> </table>
thead部分和tfoot部分是可以省略的，但tbody是不能省略的，而且tbody部分可以有多个。表格的完整结构在HTML页面的时候一般都不需要这样写了，这样写有些复杂，我们一般的时候写看表格的简写结构，下面看下表格的简写结构。
<table border="1" cellspacing="0" cellpadding="0" align="center" width="600"> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table>
以后我们就写这种简写版就可以，但是大家观察上面的这个表格好像长的不太好看，我还需要进一步修饰。那我们来修饰一下tr和td。那tr和td有那些属性呢？
tr的属性:
- algin属性:left/center/right
- valgin属性 :top/bottom/middle
- height属性
td的属性:
- colspan属性 水平合并
- rowspan属性 垂直合并
- algin属性: left/center/right
- valgin属性 : left/center/right
- width/height属性
2、表格案例展示
<table border="1" cellspacing="0" cellpadding="0" align="center" width="500"> <tr height="60" align="center"> <td colspan="3">工作证</td> </tr> <tr height="40" align="center"> <td width="100">姓名：</td> <td width="200">张大宝</td> <td rowspan="3">照片</td> </tr> <tr height="40" align="center"> <td>职位：</td> <td>HTML5讲师</td> </tr> <tr height="40" align="center"> <td>部门：</td> <td>教学部</td> </tr> </table>
3、认识表单以及表单元素
1. 表单的作用
表单在网页中主要负责数据采集功能，是网站管理者与浏览者之间沟通的桥梁。
2. 表单的组成
一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据的URL以及数据提交到服务器的方法。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上或者取消输入。
3. 表单页面的实现
第一步：先写一对form标签及其它的标签属性。
<form action=“表单提交地址”method=“post/get”> 这里面包含了所有的表单控件 </form>
Action: 向何处发送表单数据,一般指的是后台程序。
Method: 规定如何发送表单数据。有两种方式（get与post）
第二步：在表单标签form中间填写表单元素。值得注意的是每一个表单元素都有一个name属性。但是这个属性可写可不写。
4、表单元素
1. text 文本框
<input type=”text” name=”username”/>
2、text文本框并带有默认值
<input type=”text” name=”url” value=”http://”/>
3、password密码输入框
<input type=”password” name=”pwd“/>
4、radio单选按钮
<input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女
5、checkbox复选框
<input type="checkbox" name="type" value="实木" />实木 input type="checkbox" name="type" value="沙发" checked="checked"/>沙发 <input type="checkbox" name="type" value="办公" />
6、file上传文件域
<input type="file" name="file" />
9、select下拉框
<select name="problem"> <option value="">请选择查询问题</option> <option value="1">你的毕业院校</option> <option value="2">你居住的城市</option> <option value="3">你的职业</option> </select>
10 textarea多行文本
<textarea rows="6" cols="30"></textarea>
11 submit提交按钮 与reset重置按钮
<input type="submit" value="提交" /> <input type="reset" value="取消" />
12、普通按钮button
<input type="button" name="btn value="普通按钮"/>
13、hidden 隐藏域,在页面中没有任何效果，但是他可以传递数据
<input type="hidden" name="hidbtn />
5、表单案例
<form action="#" method="get"> 公司名称:<input type="text" name="name" maxlength="16" /><br> 公司网站:<input type="text" name="url" /><br> 登录密码:<input type="password" name="pwd" /><br> 性别:<input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女<br> 申请产品:<input type="checkbox" name="type" value="实木" />实木 <input type="checkbox" name="type" value="沙发" checked="checked"/>沙发 <input type="checkbox" name="type" value="办公" />办公<br> 联系人证件:<input type="file" name="file" /><br> 密码查询问题：<select name="problem"> <option value="">请选择查询问题</option> <option value="1">你的毕业院校</option> <option value="2">你居住的城市</option> </select><br> 备注：<textarea rows="6" cols="30"></textarea><br> <input type="submit" value="提交" /> <input type="reset" value="取消" /> </form>
大家看到上面的效果在浏览器中显示的不是很好看，所以我们一般写表单的时候还是放到表格里，就整齐，美观。但是需要注意的是table需要放在form里面，而不是table里面放form
<form action="#" method="get"> <table border="0" cellspacing="0" cellpadding="0"> <tr height="35"> <td align="right">公司名称:</td> <td> <input type="text" name="name" /></td> </tr> <tr height="35"> <td align="right">公司网站:</td> <td> <input type="text" name="url" /></td> </tr> <tr height="35"> <td align="right">登录密码:</td> <td> <input type="password" name="pwd" /></td> </tr> <tr height="35"> <td align="right">性别:</td> <td> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr height="35"> <td align="right">申请产品:</td> <td> <input type="checkbox" name="type" value="实木" />实木 <input type="checkbox" name="type" value="沙发" checked="checked"/>沙发 <input type="checkbox" name="type" value="办公" />办公 </td> </tr> <tr height="35"> <td align="right">联系人证件:</td> <td> <input type="file" name="file" /></td> </tr> <tr height="35"> <td align="right">密码查询问题:</td> <td> <select name="problem"> <option value="">请选择查询问题</option> <option value="1">你的毕业院校</option> <option value="2">你居住的城市</option> </select> </td> </tr> <tr> <td align="right">备注:</td> <td> <textarea rows="6" cols="30"></textarea></td> </tr> <tr height="35"> <td align="right"></td> <td> <input type="submit" value="提交" /> <input type="reset" value="取消" /> </td> </tr> </table> </form>
5、HTML5中新增的表单元素和表单元素属性
5.1 email元素
5.2 url元素
5.3 number元素
5.4 ranger元素
5.5 search元素
5.6 tel元素：用于输入电话号码，验证输入的是否是电话号码（pc端无效，在移动端使用该框时，会切换到数字键盘）
5.7 color颜色拾取器 供用户选择颜色，并将用户选择的颜色填充到此元素中。
5.8 date用于日期选择的表单域，支持日期，月份，周几。
6、HTML5新增表单元素案例
<h1>HTML5中新增的表单元素</h1> <form action="#" method="get"> <table border="0" cellpacing="0" cellpadding="0"> <tr> <td align="right">email:</td> <td> <input type="email" name="email" id="email"></td> </tr> <tr> <td align="right">url:</td> <td> <input type="url" name="url" id="url"></td> </tr> <tr> <td align="right">age:</td> <td> <input type="number" name="age" step="5" min="10" max="100" id="age"></td> </tr> <tr> <td align="right">range:</td> <td> <input type="range" name="rang" min="1" max="10" value="3"></td> </tr> <tr> <td align="right">search:</td> <td> <input type="search" name="search" results="s"></td> </tr> <tr> <td align="right">tel:</td> <td> <input type="tel" name="tel"></td> </tr> <tr> <td align="right">color:</td> <td> <input type="color" name="color"></td> </tr> <tr> <td align="right">date:</td> <td> <input type="datetime-local" name="date"></td> </tr> <tr> <td align="right"></td> <td> <input type="submit" value="提交"></td> </tr> </table> </form>
7、HTML5新增表单元素的属性
1. autofocus
打开页面的时候，自动获得焦点；
2.placeholder
输入框的默认提示
<input type="text" name="name" placeholder="请输入公司名称" />
3.required
表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空 常给input,textarea等标签使用。
<input type="text" name="url" required="required" />
5、max/min/step
限制值的输入范围，以及值的变化程度。新增number元素有介绍。 常给input标签使用。
<input type="number" name="age" step="5" min="10" max="25"/>
6、autocomplete:
使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on。 常给form,input使用
值为off时：
值为on时:
7、multiple:
在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传，或者给select标签使用
<input type="file" name="file" multiple="multiple" />
8、formaction:
重写表单的action属性, formmethod: 重写表单的method属性.
<input type="submit" value="提交" formaction="demo.html" formmethod="post"/>
9、list属性和datalist
元素list属性的值为datalist元素的id，datalist元素类似于选择框，在文本框获得焦点的时候以提示输入的方式显示。
地址：<input type="text" list="item" name="address"/> <datalist id="item"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </datalist>
显面效果：
10、新增form属性
在我们之前的html中，表单元素必须被form标签所包含，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id。在form元素里面的表单元素可以不用添加form属性，如果你想利用form获取所有表单元素的值，那么在form元素外面的表单元素就必须添加form属性，input、select、textarea等元素都满足该功能。
代码：
<form method="get" id="test"> <input type="text" name="name"/> <input type="password" name="password"/> <input type="submit" value="提交"> </form> <input type="text" name="confirm" form="test">
