Web前端开发 课件 第4章 表格与表单

第4章

表格与表单《Web前端开发》表格是怎样形成的？说到表格，其实大家并不陌生课程表排行榜查票4.1创建表格使用标签创建表格的语法格式<table><caption>表格标题</caption><tr> <td>单元格内的文字</td><td>单元格内的文字</td> ...</tr>...</table>在HTML中，所有的元素都是通过标签定义的，要想创建表格，就需要使用表格相关的标签。4.1创建表格用于定义表格的开始与结束。在<table>标签中，可放表格的标题、表格行和单元格等。<table>标签用于定义表格中的一行，必须嵌套在<table>标签中。<tr>标签用于定义表格的标题，该标签必须直接放置到<table>开始标签之后，不需要可省略。<caption>标签用于定义表格中的单元格，必须嵌套在<tr>标签。<td>标签表格标签的介绍4.1创建表格4.1创建表格应用表格时经常需要为表格设置表头，以使表格的格式更加清晰，方便查阅。表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头多学一招:4.1创建表格只需用表头标签<th>替代相应的单元格标签<td>即可。<th>标签与<td>标签的属性、用法完全相同，但<th>标签具有语义性，特指表头，标签包含的文本默认加粗居中显示。而<td>标签只是普通的单元格，标签包含的文本为普通文本且水平左对齐显示。设置表头多学一招:4.1创建表格<thead>表格的结构用于定义表格的头部，必须位于<table>标签中，一般包含网页的logo和导航等头部信息。<tfoot>用于定义表格的页脚，位于<table>标签中<thead>标签之后，一般包含网页底部的企业信息等。<tbody>用于定义表格的主体，位于<table>标签中<tfoot>标签之后，一般包含网页中除头部和底部之外的其他内容。4.1创建表格表格标签属性中，较为常用的是colspan属性和rowspan属性，这两个属性书写在<td>标签中，用于合并单元格。21colspan属性用于设置单元格横跨的列数，也就是用于合并水平方向的单元格，取值为正整数。colspan属性rowspan属性用于设置单元格竖跨行数，也就是用于合并垂直方向的单元格，取值为正整数。rowspan属性4.2单元格的合并<table>标签属性如下表。属性描述常用属性值border设置表格的边框（默认border="0"为无边框）像素值cellspacing设置单元格与单元格之间的空间像素值（默认为2px）cellpadding设置单元格内容与单元格边缘之间的空间像素值（默认为1px）align设置表格在网页中的水平对齐方式left、center、rightbgcolor设置表格的背景颜色颜色值英文单词、十六进制#RGB、rgb(r,g,b)4.3美化表格和单元格<tableborder="10"><tableborder="2"><table>4.3美化表格和单元格4.3美化表格和单元格4.4表单的基本概念登录快递查询注册想想表单由哪些构成？在HTML中，一个完整的表单通常由表单控件、提示信息和表单域3个部分构成。4.4表单的基本概念对表单控件、提示信息和表单域的具体解释如下。包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。说明性的文字，提示用户进行填写和操作。用于采集用户的输入或选择的数据。如果不定义表单域，表单中的数据就无法传送到后台服务器。表单控件表单域提交信息4.4表单的基本概念在HTML5中，<form>标签用于创建表单，即定义表单域，以实现用户信息的收集和传递，<form>标签中的所有内容都会被提交给服务器。创建表单的语法格式<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件</form><form>与</form>之间的表单控件是由用户自定义的action、method和name为表单标签<form>的常用属性4.4表单的基本概念action属性用于指定接收并处理表单数据的服务器程序的url地址1.action属性<form>标签的常用属性介绍如下。method属性用于设置表单数据的提交方式。2.method属性name属性用于指定表单的名称。3.name属性4.4表单的基本概念表单控件：表单控件有多种形式，主要用来收集用户数据，包括label、input、textarea、select等。最常使用的是input标签，根据功能的不同，input控件又分为text、password、radio、checkbox、file、submit、reset等类型。表单按钮：包括提交按钮、重置按钮和普通按钮。从本质上讲，表单按钮也是表单控件，之所以把它分离出来。单独介绍，是因为它的功能比较特别。4.4表单的基本概念提交按钮用于把表单数据发送到服务器重置按钮用于重置整个表单的数据普通按钮则需要开发者赋予它功能<formaction="login.php"method="post">

用户名：<inputtype="text"name="username"/>

密码：<inputtype="password"name="password"/><inputtype="submit"value="登录"/><inputtype="reset"></form>4.4表单的基本概念浏览网页时经常会看到输入框、单选按钮、提交按钮、重置按钮等，这些输入框和按钮都属于表单控件。要想在网页中定义这些表单控件就需要使用<input/>标签。input控件的语法格式<inputtype="控件类型"/>type属性取值有多种，用于指定不同的表单控件类型。4.5input表单控件<input/>标签的常用属性如下。属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域4.5input表单控件color类型<inputtype="color"/>number类型<inputtype="number"/>range类型<inputtype="range"/>Datepickers类型<inputtype=date,month,week…"/>email类型<inputtype="email"/>url类型<inputtype="url"/>tel类型<inputtype="tel"/>search类型<inputtype="search"/>（1）（2）（3）（4）（5）（6）（7）（8）新的input控件类型4.5input表单控件属性属性值描述name由用户自定义input控件的名称value由用户自定义input控件中的默认文本内容size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数<input/>标签的常用属性如下。4.5input表单控件案例演示4.5input表单控件通过<textarea>标签可以轻松地创建多行文本输入框。textarea控件的语法格式<textareacols="每行中的字符数"rows="显示的行数">

文本内容</textarea>cols属性用来定义多行文本输入框每行的字符数。rows属性用来定义多行文本输入框显示的行数。4.6其他表单控件textarea控件可选属性：disabled、name和readonly。可选属性属性值描述name由用户自定义控件的名称readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）4.6其他表单控件浏览网页时，经常会看到包含多个选项的下拉菜单。例如，选择所在的城市、出生年月、兴趣爱好等。<select>标签4.6其他表单控件使用select控件可以制作下拉菜单效果。使用<select>标签定义下拉菜单的基本语法格式<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select><select>标签用于在表单中添加一个下拉菜单。<option>标签用于定义下拉菜单中的具体选项。4.6其他表单控件在HTML5中，可以为<select>标签和<option>标签定义属性，以改变下拉菜单