html - 表单元素
一、select标签
select 元素可创建单选或多选菜单
注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性
形式：
<form>
<select name="" id="">
<option value="xx">表单项</option>
</select>
</form>
<body> <h1>HTML表单元素</h1> <h2>select标签</h2> <form> <select name="username"> <option value="1">陈豪</option> <option value="2">李浩</option> </select> </form> </body>
效果如下：
select标签有几个常用的属性
name="" 列表的名字 size="" 指定下拉列表的可见选项数，超出的需要下拉滚轴 disabled="disabled" 这个是禁用下拉，变成灰色
二、html标签 - 隐藏域标签
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
形式
<form>
<input type="hidden" name="hid" value="value">
</form>
<body> <h1>HTML表单元素</h1> <h2>select标签</h2> <form action="#" method="get"> <select name="username"> <option value="1">陈豪</option> <option value="2">李浩</option> </select> <input type="hidden" name="hid" value="value" /> <input type="username" name="user" /> <input type="submit" value="commit"> </form> </body>
效果如下：
再次查看url如下：
file:///C:/Users/moresweet/Desktop/html/bd2.html?username=2&hid=value&user=dasdas
发现select标签所选项username=2和输入文本域内容user=dasdas以及隐藏域hid=value一并提交了（不写method默认是get）
三、html标签 - label标签
<label> 标签为 input 元素定义标注（标记）；
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上<label> 标签的 for 属性应当与相关元素的 id 属性相同。
形式：
<form>
<label for="nan">男</label>
<input type="radio" name="sex" id="nan" /><br />
<label for="nv">女</label>
<input type="radio" name="sex" id="nv" /><br />
<label for="xq">篮球</label>
<input type="checkbox" id="xq"/>
</form>
效果如下：
这个标签可以提升用户点选体验，之前的radio按钮只能点选圆圈表示，点击文字无效，用了label标签，点击文字就可以选中，大大提升了用户体验
四、html标签 - 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
表格 <table> 淘汰了，但是有的地方还在用，至少要知道这个用法
企业级开发都要把 <thead></thead>、<tbody></tbody>将表格分开以明显区分
<thead> <table border="1" width="600" height="300"> <tr> <td>编号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>婚否</td> </tr> </thead> <tbody> <tr> <td>001</td> <td>苍狼</td> <td>女</td> <td>18</td> <td>已婚</td> </tr> <tr> <td>002</td> <td>丸子</td> <td>男</td> <td>48/</td> <td>未婚</td> </tr> </tbody> </table>
效果如下：
表格的运用的难点在于跨行与跨列，如何跨行或者跨列
<td rowspan="2">男</td> 跨行。也就是和合并单元格
<td colspan="2"></td> 跨列合并单元格
标题
<tr>
<td colspan="5">..</td> colspan 需要自己看
</tr>
常用布局<thead id=""></thead> 标题和编号等属性行
<tbody></tbody>
如果要给表格加个顶部标题的话，就需要用到跨行的点
这里将加顶部表，表格项共5项，则首行跨5行，
<table border="1" width="600" height="300"> <thead> <tr> <td colspan="5">通讯录</td> </tr> <tr> <td>编号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>婚否</td> </tr> </thead> <tbody> <tr> <td>001</td> <td>苍狼</td> <td>女</td> <td>18</td> <td rowspan="2">已婚</td> </tr> <tr> <td>002</td> <td>丸子</td> <td>男</td> <td>48/</td> </tr> </tbody> </table>
效果如下：
