Document

网站开发：HTML+CSS - 表格与表单

2024-09-03
dfer
157
前端 html css javascript CSDN

1. 前言

表格与表单在网页开发中非常重要。表格使得用户可以更简洁清晰的去浏览信息。

表单提供了一种在客户端（浏览器）和服务器之间进行数据交互的方式。

以下为其主要作用：

用户交互和数据输入：表单是用户输入数据的主要方式。它们允许用户在网页上输入信息
数据收集和处理：表单是收集用户数据的工具。无论是调查、反馈表、申请表还是在线测试，表单都允许网站所有者从用户那里收集所需的数据
电子商务和支付处理：在电子商务网站中，表单是实现购物车、结账和支付处理的核心组件。用户可以通过表单选择商品、输入送货地址、提供付款信息等，完成整个购买流程
数据验证和安全：表单支持在客户端和服务器端进行数据验证，以确保用户输入的数据符合预期格式和安全要求。这有助于保护网站的安全性和数据完整性
前端与后端的桥梁：表单是前端（用户界面）与后端（服务器逻辑）之间的数据桥梁。它们通过 HTTP 请求（如 GET、POST）将用户数据发送到服务器，并接收服务器的响应，以提供动态的网页体验。

2. 表格设计

在HTML中，表格的标签为<table></table>。在此范围内我们为页面定义一个表格

<tr></tr>此标签代表表格的行，在行中添加表格的元素

<td></td>对应到表格的行之后，对应进行元素的填充

最简单的表格就是这三个标签共同组成

<html>
<head></head>
<body>
<table>
    <tr>
        <td>A1</td><td>B1</td><td>C1</td>
    </tr>
    <tr>
        <td>A2</td><td>B2</td><td>C2</td>
    </tr>
</table>
</body>
</html>

运行结果：

2.2 合并单元格

2.2.1 合并左右单元格

左右合并单元格实际就是进行列合并，在列标签处定义参数即可

• <td colspan='2'>A1 B1</td>

<table>
<tr>
    <td colspan='2'>A1B1</td><td>C1</td>
</tr>
</table>

2.2.2 合并上下单元格

仍然对于标签<td>进行操作

如下所示：

• <td rowspan='2'>A1A2</td>

下一行之后默认存在第一列，以此顺后进行声明即可

<table>
<tr>
    <td rowspan='2'>A1A2</td><td>B1</td>
</tr>
<tr>
    <td>B2</td>
</tr>
</table>

运行结果：

合并单元格实例：

<!DOCTYPE html>
<html>
<head>
<title> 表格 </title>
</head>
<body>
<table>
	<tr>
		<td rowspan='2'>A1 A2</td> <!-- 行合并 下一行中默认空出 -->
		<td>B1</td>
		<td>C1</td>
	</tr>
	<tr>
		<td>B2</td>
		<td>C2</td>
	</tr>
	<tr>
		<td colspan='2'>A3 B3</td> <!-- colspan为列合并控制合并几个单元格 -->
		<td>C3</td>
	</tr>
</table>
</body>
</html>

2.3 格式化表格

相关参数将表格内容格式化，更加工整

<caption></caption>	表格标题
<thead></thead>	表格索引栏
<tbody></tbody>	表格内容主体
<tfoot></tfoot>	表格结尾
<th><th>	表格粗体字

实例：

<!DOCTYPE html>
<html>
<head>
<title>学生成绩单</title>
</head>
<body>
	<table>
		<caption>学生成绩单</caption><!--声明表格的标题-->
		<thead> <!--声明表格的第一行，索引行-->
		<tr>
			<th>姓名</th><th>性别</th><th>成绩</th> <!--th为粗体字-->
		</tr>
		</thead>
		<tbody> <!--声明表格的主体-->
		<tr>
			<td>张三</td><td>男</td><td>560</td>
		</tr>
		</tbody>
		<tfoot> <!-- 声明表格的末尾 -->
	    <tr>
			<td>平均分</td><td colspan='2'>540</td>
		</tr>
		</tfoot> 
	</table>
</body>
</html>

3. 表单设计

3.1 表单设定

表单主要用于收集网页上浏览者的相关信息。标记为<form></form>

基本语法如下：

<form action='url' method='get|post' enctype='mime'>
</form>

• action指定处理提交表单的格式，可以是网页也可以是电子邮箱

• method指明提交表单的HTTP方法

• enctype指明用来把表单提交给服务器时的互联网媒体方式

所有的表单操作都应在<form></form>内完成

3.2 表单基本元素的使用

单行文本输入框

<input type='text' name='' value='' maxlength='' size=''>
<!-- name属性为变量赋名 size属性定义宽度 maxlength定义最多字符数 value定义初始值 -->

name	属性赋名
value	初始化文本
maxlength	定义最多字符数
size	定义宽度

多行文本框

<textarea name='' cols='' rows='' wrap=''></textarea>

name	为文本框变量赋名
cols	定义文本框宽度
rows	定义文本框高度
wrap	定义输入内容大于文本域时的显示方式

密码域Password

输入文本时，浏览者是看不见具体数字组成，具有唯一性

<input type='password' name='' size='' maxlength=''>

name	定义密码框的名称，应具有唯一性
size	定义密码框的宽度
maxlength	定义最多输入的字符数

单选按钮radio

单击选择对应选项

<input type='radio' name='' value=''>

name	单选按钮以组为单位，同一组的按钮name相同
value	同一组中值域不同，定义单个按钮的值

实例：

<input type='radio' name='book' value='Book1'>《如何不学习》
<input type='radio' name='book' value='Book2'>《如何躺平》

复选框checkbox

可以让浏览者一组选项内同时选择多个选项

<input type='checkbox' name='' value=''>

name	单选按钮以组为单位，同一组的按钮name相同
value	同一组中值域不同，定义单个按钮的值

选择列表标记<select>

下拉选择框可以在有限的空间内设置多个选项，可以单选也可以多选

<select name='' size='' multiple>
<option value='Book1'>《如何不学习》
<option value='Book2'>《如何躺平》
<option value='Book3'>《如何养老》

普通按钮botton

用来控制其他定义了脚本的处理工作

<input type='button' name='' value='' onclick=''>
<!-- onclick表示单击行为 也可以进行修改 -->

name	按钮的变量名称
value	定义按钮显示文字
onclick	表示单击行为，也可以对其进行自定义化设置

提交按钮submit

通过提交按钮可以将表单里的信息提交给表单里action所指向的文件

<input type='submit' name='' value=''>

name	按钮的变量名称
value	定义按钮显示文字

重制按钮reset

重制按钮将会清空表单中输入的所有信息

<input type='reset' name='' value=''>

name	按钮的变量名称
value	定义按钮显示文字

3.3 表单高级元素的使用

URL属性

显示一个文本框输入URL地址，如若格式错误系统则会提醒浏览者

<input type='url' name='userurl'>

email属性

与url属性类似，提交表单时验证是否会email地址

<input type='email' name=''>

date&Times 时间属性

<input type='date' name=''>

日期和时间的输入类型：

属性	含义
date	选取年，月，日
month	选取月，年
week	选取周与年
time	选取时间
datetime	选取时间，日，月，年
datetime-local	选取本地时间

number数字属性

浏览者可以通过直接输入数字或者通过单击微调框中的按钮选择数字

<input type='number' name='' max='' min='' step=''>

range滚动属性

显示一个可以滚动的滑块

<input type='range' name='' min='' max=''>

name	属性名称
min	范围最小值
max	范围最大值
step	每一阶数值

required参数

内置于<input>中，规定在提交之前必须填写域

<input type='text' name='user' required='required'>

4. 参考资料

《精通HTML5+CSS3+Javascript网页设计》

上一篇：探索高效网站开发：I

下一篇：网站开发基础：HTM