实验三HTML表格和HTML表单
3.HTML 表格与表单的设置
html提交数据时必须设置 提交数据时必须设置<input>标签 标签name 提交数据时必须设置 标签 属性， 程序能获取相应的值。 和value属性，以便 属性 以便asp程序能获取相应的值。 程序能获取相应的值
输入域<input>一般在表单中使用 输入域<input>一般在表单中使用 <input>
1、<input type=“text” />输入单行文字 、 输入单行文字 2、<input type=“password”/>输入密码 、 输入密码 3、<input type=“radio” /> 单选按钮 、 4、 4、<input type=“checkbox” />多选按钮 />多选按钮 5、<input type=“image” />图片 、 图片 6、<input type=“file” /> 文件上传 、 7、<input type=“hidden” />隐藏域 、 隐藏域 8、<input type=“reset” />撤销按钮 、 撤销按钮 9、<input type="submit" />提交按钮 、 提交按钮 10、<input type=“button” />普通按钮 、 普通按钮 form1.html
Rules 设置单元格的特效 Fieldset 设置特殊表格
t5.html
表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
<form name=“f1” action=“处理表单用的URL” method=“gett;
1、name： 设置表单的名称。 2、action： 设置表单的处理程序的URL。 3、method：提交表单的方法。 form.html
html表格、表单相关内容知识点
一、HTML表格的基本结构HTML表格是网页中常用的一种数据展示方式，它由表格元素<table>、行元素<tr>和单元格元素<td>组成，具体结构如下：1.1 定义表格```html<table><!-- 表格内容 --></table>```1.2 定义行```html<tr><!-- 行内容 --></tr>```1.3 定义单元格```html<td><!-- 单元格内容 --></td>```二、HTML表格的基本属性HTML表格可以通过一些属性来控制其显示效果和行为，下面是一些常用的表格属性：2.1 边框属性可以通过设置border属性来定义表格的边框样式，如：```html<table border="1"><!-- 表格内容 --></table>```2.2 合并单元格可以通过设置rowspan和colspan属性来合并单元格，实现复杂的布局效果。
2.3 表头和表体可以通过使用<thead>、<tbody>和<tfoot>元素来定义表格的表头、表体和表尾部分，提高表格的语义性和可读性。
三、HTML表单的基本结构HTML表单是网页中用于收集用户输入信息的一种方式，它由表单元素<form>、输入元素<input>、选择元素<select>和按钮元素<button>等组成，具体结构如下：3.1 定义表单```html<form><!-- 表单内容 --></form>```3.2 定义输入框```html<input type="text" />```3.3 定义下拉框```html<select><option value="1">选项1</option><option value="2">选项2</option></select>```3.4 定义按钮```html<button>提交</button>```四、HTML表单的常用属性HTML表单可以通过一些属性来控制其行为和样式，下面是一些常用的表单属性：4.1 提交位置区域可以通过action属性定义表单提交的位置区域，如：```html<form action="/submit" method="post"><!-- 表单内容 --></form>```4.2 提交方式可以通过method属性定义表单的提交方式，一般有get和post两种方式。
任务3HTML5中的表格和列表(精)
单位是像素数或者是占整个表格宽度的百分比 <th width="50%">姓名</th> <th width="30%">性别</th> <th width="20%">年龄</th>
<tr>
</tr>
• 单元格内容的对齐方式：align和valign属性
align：水平对齐方式，值为left、right或center
自动调整大小
• 对齐方式：align
属性值有left、right、和center三种，默认为left。
课堂练习
2. 设置表格格式
• 设置表格背景颜色：bgcolor属性
<table>、 <tr>、 <td>（或<;th>）中设置的背景颜色要优先于在
<tr>设置的背景颜色，而在<tr>中设置的背景颜色 优先于在<table>中设置的背景颜色。
colspan属性：表明该单元 格所占的列数
5.2 设置表格格式
课堂练习
练习一
练习2
高级表格标记
表格标题
表头（thead） 表体（tbody） 表尾（tfoot）
高级表格标记
练习
1 使用列表
• 有序列表：
• <ol>标记有两个基本 • type属性：设置列表
的编号类型 属性：type和start。
• <ul>标记的type属性:
设置列表项标志。
• type属性可以选择以
HTML列表和表单
HTML列表和表单1. 列表标签去掉列表默认的样式：li { list-style: none; }1.1 有 / ⽆序列表标签名定义说明<ul></ul>⽆序标签没有顺序，⾥⾯只能包含 li<ol></ol>有序标签有顺序，⾥⾯只能包含 li1.2 ⾃定义列表适⽤于对术语或名词进⾏解释和描述（通常⽤作⽹站底部竖排链接）<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl>2. 表单标签⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息、表单域三个部分构成2.1 input 控件输⼊的控件，根据不同的属性值⽤来指定输⼊的功能语法：<input type="text" />type 属性（表单类型）属性值描述text（默认）单⾏⽂本输⼊框password密码输⼊框radio单选按钮（设相同name）checkbox复选按钮button普通按钮submit提交按钮reset重置按钮file上传⽂件按钮image图像形式的按钮（要有src）其他属性属性属性值描述name⾃定义定义控件的名称，⽤于区别不同的表单value⾃定义表单⾥默认显⽰的⽂本size正整数控件显⽰的宽度checked checked设置默认选中的项（作⽤于单复选按钮）maxlength正整数控件允许输⼊的最多字符数placeholder⾃定义⽆法选中的空的默认值，输⼊后请空2.2 label 标签⽤于绑定表单和元素，当点击⽂字的时候，光标会定位到指定的表单⾥⾯⽅式⼀：⽤ label 包含 input 控件<label>⽤户名：<input type="text" /></label>⽅式⼆：label ⽤ for 属性绑定 input 控件的 id<label for="sex">男</label><input type="radio" id="sex" />2.3 textarea 控件可以输⼊多⾏⽂本的输⼊框语法：<textarea >⽂本内容</textarea>属性：cols="每⾏中的字符数"rows="显⽰的⾏数"2.4 select 控件多个选项让⽤户选择的下拉列表<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>select 属性：multiple="multiple"允许多选option 属性：selected="selected"当前项为默认选中项3. form表单域通过 form 表单域收集表单控件的信息传递给服务器<form action="url地址" method="提交⽅式" name="表单名称">各种表单控件</form>属性属性值作⽤action url 地址指定接收表单数据的 url 地址，可为空传给本页处理method get / post设置表单数据取值的提交⽅式，隐藏 post，默认显⽰ get name控件的名称⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单。
电子商务实训三 html基础(3)
电子商务网站建设上机实训作业（指导书）实训三 html语言基础（3）一、实训目的与要求：1 掌握表单的定义及应用。
2 掌握CSS样式的定义、种类、应用。
二、实训要求与准备：1 认真阅读实验指导书，熟悉实验内容。
2 在D盘（或E盘）建立如下文件夹结构：D:\myweb\（E:\myweb\），素材复制到该文件夹中。
3时间分配：4课时三、实验步骤第一部分：表单应用1 记事本中输入以下代码，以form1.html存盘，在IE中查看。
<html><head><title>表单的使用</title><head><body text="blue"><center><h2><font color=red>个人资料</font></h2></center><form action="" method="post">姓名: <input type="text" name="username"><br>主页的网址: <input type="text" name="" value="http://"><br>密码: <input type="password" name="pass"><br><input type="submit" value="发送"> <input type="reset" value="重设"></form></body></html>2记事本中输入以下代码，以grzl.html存盘, 在IE中查看。
HTML--表格与表单
HTML--表格与表单⼀、表格<table></table>表格 width:宽度。
可以⽤像素或百分⽐表⽰。
常⽤960像素。
border：边框，常⽤值为0。
cellpadding：内容跟边框的距离，常⽤值为0。
cellspacing：单元格与单元格之间的间距，常⽤值为0。
algin：对齐⽅式。
bgcolor：背景⾊。
background：背景图⽚。
<tr></tr>⾏ align:⼀⾏内容的⽔平对齐⽅式。
valign:⼀⾏内容的垂直对齐⽅式。
height：⾏⾼。
bgcolor：背景⾊。
background：背景图⽚。
<td></td>单元格<th></th>表头，单元格的内容⾃动居中、加粗 align:单元格内容的对齐⽅式。
valign:单元格的内容的垂直对齐⽅式。
width：单元格宽度。
height：单元格⾼度。
bgcolor：背景⾊。
background：背景图⽚。
内容必须放在单元格⾥，单元格必须放在⾏⾥，⾏必须放在表格⾥。
设置单元格⾏⾼、列⾼时，会同时影响对应的⾏或列。
单元格合并：（建议尽量⽤表格嵌套） colspan=“n” 合并同⼀⾏的单元格（后⾯写代码要减去相对应的列） rowspan=“n” 合并同⼀列单元格（从第⼆⾏开始减去相对应的列）⼆、表单<form id="" name="" method="post/get" action="负责处理的服务端">--输⼊系统时，必须有，以后⽤id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，post提交没有长度限制，且编码后内容不可见。
</form>1.⽂本输⼊（字符占2个空位，字符相当于3个像素） ⽂本框<input type="txt" name="" id="" value="" /> 密码框<input type="password" name="" id="" value="" /> ⽂本域<textarea name="" id="" cols=""(字符多少) rows=""(⼏⾏⾼)></textarea> 隐藏域<input type="hidden" name="" id="" value="" />2.按钮 提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址 重置按钮<input type="reset" name="" id="" disabled="disabled" value="" /> 普通按钮<input type="button" name="" id="" disabled="disabled" value="" /> 图⽚按钮<input type="image" name="" id="" disabled="disabled" src="图⽚地址" /> disabled使按钮失效 enable使按钮可⽤3.选择输⼊ 单选按钮组<input type="redio" name="" checked="checked" value="" /> name的值⽤来分组，value的值看不见，提交给程序⽤的，checked设置默认选项。
HTML第三章 表格和表单
如何设置对其方式
<TABLE width="350" height="100" border="2" background="images/type_back.jpg" > <TR> align属性用来设置表 属性用来设置表 <TD colspan="4"> </TD> 格、行、列的对齐方式 </TR> <TR bgcolor="#EBEFFF"> <TD colspan="2" align="center" >笔记本电脑</TD> >笔记本电脑 笔记本电脑</TD> <TD colspan="2" align="center" >办公设备、文具、耗材 办公设备、 办公设备 文具、耗材</TD> </TR> <TR bgcolor="#EBEFFF"> <TD >惠普 惠普</TD> 惠普 <TD >华硕 华硕</TD> 华硕 <TD >打印机 打印机</TD> 打印机 <TD >刻录盘 刻录盘</TD> 刻录盘 </TR> </TABLE>
如何使用表格进行布局
使用表格布局下图，需要几行几列？ 使用表格布局下图，需要几行几列？
需要7行 列 需要 行2列
如何使用表格进行布局
<TABLE width="298"> <TR> <TD colspan="2"><IMG src="images/adv.jpg" /></TD> </TR> <TR> <TD width=“122” rowspan=“6” align=“left” ><IMG “ ” “ ” “ ” src="images/wangyou.jpg" width="116" height="142" /></TD> <TD width=“285” > “ ” <A href=“#”>超值变形金钢 折!</A> 超值变形金钢2.5折 “ ” 超值变形金钢 </TD> </TR> <TR> <TD><A href="#">人们为啥对电视吼叫 </A></TD> 人们为啥对电视吼叫 </TR> …… </TABLE>
一、（3）HTML表单与表格-综合应用
DTD TF
TF STF STF STF STF STF
</tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。 2.结构化后的表格需要去掉结构标签后,再做合并操作 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
<p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网
其它属性：
placeholder：定义输入框的提示文字 maxlength：设置文本框最多输入多少字符 readonly：只读(不可输入) disabled：禁用(不可输入) -> 不会提交这个表单元素的数据 checked：仅用于 radio/checkbox，作用是设置默认选中项
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
淮海工学院计算工程学院实验报告书
课程名：Web应用开发技术
题目：HTML表格与HTML表单
班级：
学号：
姓名：
HTML表格与HTML表单
一实验目的
●掌握网页中插入表格数据的标记的用法。
●掌握不规则表格的创建方法
●掌握表格外观控制属性的应用
●掌握HTML表单的作用、HTML表单的两种提交方法及各自的使用场合；
掌握不同类型表单元素的使用方法；二实验容和要求
实验容：
1.创建网页文件sales.html，网页的标题为“ACME公司2014年销售输入”，使用合适的表格标记及属性显示ACME公司2013的4种产品4个季度的销售额。
显示效果如下（单元格数据为随机值，可以使用font等标记设置颜色等外观样式）：
2. 创建如下图所示的表单：
实验要求：
1.所有参与实验同学独立完成“实验容”部分，并记录实验步骤和结果填写在“实验步骤”、“实验结果”相应部分；
2.所有参与实验同学均需参阅资料，完成实验报告“思考题”部分容。
特别提示：若实验报告出现雷同情况，所涉及同学均无相应成绩；
三实验步骤
实验代码：
1.
<html>
<head>
<title>ACME公司2014年销售输入</title>
</head>
<body>
<table border="1" bordercolor="red" >
<tr>
<th>产品/季度</th>
2.。