CSS学习七：表单和表格
一、表格：table
表格标签：
- <table></table>：定义表格，表格的边界标签，必定包括表格的其它元素标签
- <tr></tr>：定义表格的行
- <td></td>：定义表格的列
- <th></th>：定义表格的表头
- <thead></thead>：定义表格的页眉，表格分组标签，可将表格分割
- <tbody></tbody>：定义表格的主体，表格分组标签，可将表格分割
- <tfoot></tfoot>：定义表格的页脚，表格分组标签，可将表格分割
- <caption></caption>：定义表格标题
thead，tbody，tfoot需一起定义，且按顺序出现。
th，thead都是表头。
表格重要属性：
- colspan="value"：合并列
- rowspan="value"：合并行
- align="left/center/right" 水平对齐方式
- valign="top/bottom/middle/baseline" 垂直对齐方式
- cellpadding="value" 单元边沿与其内容之间的空白距离
- cellspacing="value" 单元格之间的空白距离
示例：
<table border="1" cellspacing="0" cellpadding="5"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> <tbody> <tr> <td>jerry</td> <td>20</td> <td>男</td> </tr> <tr> <td>tom</td> <td>22</td> <td>女</td> </tr> </tbody> <tfoot> 表格 </tfoot> </table>
表格的css属性：
- caption-side：top/bottom/left/right 设置表格标题放置的位置。left，right只有firefox识别。因此，比较少用。
- border-spacing：value 单元格间距
- border-collapse：separate边框分开，collapse边框合并
- empty-cells：show/hide 无内容单元格显示、隐藏。默认为show。
- table-layout：auto/fixed
table-layout说明 ：自动表格布局，列的宽度是由列单元格中没有折行的最宽的内容设置的。缺点：较慢。固定表格布：加快运行的速度，允许浏览器更快的对表格进行布局。缺点：不太灵活。
示例：
<table border="1" style="caption-side: bottom;border-spacing: 10px;empty-cells: hide;"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> <tbody> <tr> <td>jerryjerryjerryjerryjerry</td> <td>20</td> <td></td> </tr> <tr> <td>tom</td> <td>22</td> <td>女</td> </tr> </tbody> <tfoot> 表格 </tfoot> </table>
二、各种表格示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .d { width: 300px; height: 90px; border-spacing: 0; } .d td { border-bottom: solid 1px red; } </style> </head> <body> <table class="d"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
三、常用的表单：form
表单的作用：收集用户信息
表单组成：
- 表单域
- 表单控件
- 提示信息
1.表单域
表单域的语法：
<form [属性名称="值"]> </form>
表单域的常用属性：
- name="值"：规定表单的名称
- action="值"：提交表单的url
- method="get/post"：提交表单的方式
- enctype="值"：规定在发送表单数据之前进行的编码。可能的值："application/x-www-form-urlencoded"，"multipart/form-data"，"text/plain"
- target="_black/_self/_parent/_top"：在何处打开表单url，默认为_self
enctype，target比较少用。
H5新增的表单域属性：
- autocomplete="on/off"：是否启动表单自动完成
- novalidate="novalidate"：不验证表单
这两个属性一般比较少用，一般用js去验证。
2.表单控件
placeholder提示信息，当输入内容的时侯，提示信息自动消失；提示信息仅作提示使用，不作为默认值。
value默认值，当输入内容的时侯，默认值仍然存在，除非删除它再输入内容；默认值，会作为值传入。
文本框，name=“name"传递给js或后端的时侯，作为属性：属性值，来使用：
<input type="text" name="name" value="这是默认值" /> <input type="text" name="name" value="" placeholder="提示信息:请输入用户名" />
密码框：
<input type="password" [placeholder="提示信息' />
提交按钮：
<input type="submit" value="按钮内容" />
重置按钮：
<input type="reset" value="按钮内容" />
单选框、单选按钮：
一组单选按钮的name必须相同。
<input type="radio" name="r1" value="money" /> <input type="radio" name="r1" value="power" /> <input type="radio" name="r1" value="girl" />
按钮，动作自定义，如onclick....：
<input type="button" value="按钮内容" />
复选框，同一组复选框的name必须相同，disabled禁用：
<input type="checkbox" name="r1" value="money" disabled /> <input type="checkbox" name="r1" value="power" /> <input type="checkbox" name="r1" value="girl" />
下拉菜单：
<select name="xxx"> <option>菜单内容a</option> <option>菜单内容b</option> <option>菜单内容c</option> </select>
多选文本框：
<textarea name="xxx" cols="行的字符宽度" rows="行数"></textarea>
四、高级表单
1.表单字段集：
<fieldset></fieldset>
功能：相当于一个方框，在字段集中可以包含文本和其它元素。该元素用于对表单中的无数进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以再设置多个fieldset元素。现在比较少用了。
2.字段级标题
<legend></legend>
功能：legend元素可以在fieldset对象绘制的方框内，插入一个标题。legend元素，必须是fieldset内的第一个元素。现在比较少用了。
<form name="registerForm" action="/form" method="post"> <fieldset> <legend>基本信息</legend> <input type="text" name="name" value="这是默认值" /> <input type="text" name="name" value="" placeholder="提示信息:请输入用户名" /> <input type="password" name="passwd" value=""/> <input type="submit" value="按钮内容" /> </fieldset> </form>
3.其它表单控件：
1）.上传文件框、文件域：type="file"，multiple属性，可以选择多个文件
<input type="file" name="" id="" value="请选择要上传的文件"/> <input type="file" name="" id="" value="请选择要上传的文件" multiple="multiple"/>
2）.图像域，相当于点击图片时，提交表单
<input type="image" width="100" height="100" border="2" src="img/timg.jpg" />
3）.提示信息标签，聚焦鼠标
<label for="name">姓名： <input type="text" id="name" name="name" value="" placeholder="提示信息:请输入用户名" /> </label>
功能：label元素，用来定义标签，为页面上的其它元素指定提示信息。要将label元素绑定到其它 的控件上，可以将label元素的for属性设置为与该控件的id属性相同。
label元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果你在label元素内点击文本，就会触发此控件。
也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
4）. 其它类型的表单控件：type="date/datetime/color/email/tel/number/......."
5).表单和非表单的按钮：
<input type="radio"或"button"或....，是在表单中的按钮。
非表单中的按钮，使用元素：<button></button>
五、表单示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 600px; background-color: antiquewhite; margin: 0 auto; } </style> </head> <body> <div id="box"> <form action="#" method="get"> <fieldset> <legend>基本信息</legend> <label for="name">姓名： <input type="text" name="name" id="name" value="" placeholder="请输入姓名"/> </label> <br /> <label for="age">年龄： <input type="text" name="age" id="age" value="" placeholder="请输入年龄"/> </label> <br /> <label>出生：</label> <select> <option>1999</option> <option>2001</option> <option>2002</option> </select> <span>年</span> <select> <option>1</option> <option>2</option> <option>3</option> </select> <span>月</span> <select> <option>1</option> <option>2</option> <option>3</option> </select> <span>日</span> </fieldset> <fieldset> <legend>其它信息</legend> <span>你喜欢这个表单吗?</span> <br /> <input type="radio" name="like" id="like1" value="1"/> <label for="like1">喜欢 </label> <input type="radio" name="like" id="like2" value="2"/> <label for="like2">不喜欢 </label> <br /> <span>你喜欢什么？</span> <br /> <!-- value中的数据，是提交给服务器的数据 --> <input type="checkbox" name="ch" id="ch1" value="1"/> <label for="ch1">money </label> <input type="checkbox" name="ch" id="ch2" value="2"/> <label for="ch2">power </label> <input type="checkbox" name="ch" id="ch3" value="3"/> <label for="ch3">girl </label> <br /> <span>你的建议：</span> <br /> <textarea name="" rows="5" cols="30"></textarea> </fieldset> <input type="submit" name="" id="" value="确认提交" /> </form> </div> </body> </html>
posted on 2018-11-16 21:33 myworldworld 阅读(182) 评论(0) 收藏 举报
浙公网安备 33010602011771号