网页设计与制作 课件 项目五 表格与表单

1

第五章表格与表单5.1表格表格标签表格标签：<table></table>

表格标题标签：<caption></caption>

表格行标签：<tr></tr>表格单元格标签：<td></td>

表格表头标签：<th></th>表格基本语法<table><caption></caption><tr><td>单元格的文字</td><td>单元格的文字</td>……</tr>……</table><table></table>是用于定义表格的标签,<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

行和单元格的结构表格标签属性Border：表格边框设置align:水平对齐方式Cellpadding:规定单元格边沿与其内容之间的距离，默认1像素。Cellspacing:规定单元格之间的空白距离，默认值2px，当取值为0时，单元格与单元格之间便没有距离。Width:规定表格的宽度Height:规定表格的高度表头基本语法<table><tr><th>单元格的文字</th>……</tr>……</table>一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗和居中显示.单元格合并rowspan：进行跨行单元格合并，放在td或者th标签中使用，最上侧单元格为目标单元格，写合并代码语法：rowspan=“合并单元格的个数”

colspan：进行跨列单元格合并，在td或者th标签中使用最左侧单元格为目标单元格，写合并代码语法：colspan=“合并单元格的个数”合并单元格三步曲1.先确定是跨行还是跨列合并。2.找到目标单元格,一般为被合并的第一个单元格。比如:<tdcolspan=“2”></td>。3．删除多余的单元格。表格CSS属性text—align:水平对齐方式vertical-align：垂直对齐方式。取值：top顶端对齐middle：垂直居中bottom：底端对齐Border-collapse：边框是否合并为单一边框。取值：separate默认值，不合并

collaspe合并为单一边框5.2表单表单表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。作用：收集用户信息表单包含三部分：表单域表单控件提示信息表单标签表单标签：<form></form>输入表单控件：<input>或<input/>下拉列表：<select>

</select>下拉列表项

：<option></option>文本域：<textarea></textarea>表单域<form></form>概念：包含表单元素的一个区域，会把范围内的表单元素信息提交给服务器。格式：<formaction="url地址”method=“提交方式”name=“表单域名称”>各种表单元素控件</form>属性：Action:用于指定接收并处理表单数据的服务器程序的url地址.Method：用于设置表单数担的提交方式，其取值为get/post.name：用于指定表单的名称,以区分同一个页面中的多个表单域。表单控件1、输入的表单控件：<input>或者<input/>属性1：type（必须包含）常用取值：text：文本框，用户可以输入任何文字password：密码框，用户看不到输入的密码radio：单选按钮checkbox：多选按钮（复选框），可实现多选的效果属性2：Name：表单控件名字，单选按钮和复选框按钮需要有相同的name取值。例：如果放在性别控件里面，必须让每个选项具备相同的名字，才能实现多选一的效果，多选按钮类似。

例：性别：男<inputtype=“radio”name=“sex”>女<inputtype=“radio”name=“sex”>属性3：Value：规定表单控件元素的值（可设置控件内的提示信息）属性4：checked：单选按钮和复选框可以设置checked，当页面被打开时就可以默认选中这个按钮属性5：Maxlength：规定输入的最长字符数属性6：placeholder：对密码框设置提示信息，字体会自动呈现灰色Type属性取值Type属性取值：

1、submit：提交按钮，可以通过Value属性改变按钮文字。点击提交按钮，可以把表单域里面的表单控件的内容值提交给后台。

2、reset：重置按钮，可以还原表单控件初始状态，可以通过Value属性改变按钮文字。

3、button：普通按钮，可以通过Value属性改变按钮文字。点击后不提交数据，点击完后可以给手机发送短信（获取短信验证码）

4、file:文件域，用来上传文件。

5、datetime-local：设置日期时间

6、search：搜索框下拉列表控件<select></select>下拉列表<option></option>下拉列表选项使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。语法：<select><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option>……</select>注：1.<select>标签中必须包含<option>标签2.在<option>中定义selected=“selected”时，当前项即为默认选中项。文本域<textarea></textarea>使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签.在表单元素中，<textarea>标签是用于定义多行文本输入的控件。语法：个人经历：<textarea></textarea>注：文本域框大小可以通过CSS属性控制。label标签<label></label>1、<label>标签为input元素定义标注(标签).2、<label>标签用于绑定一个表单控件,当点击<label>标签内的文本时，