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

1. 前言​​​​​​​​​​​​​​

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

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

以下为其主要作用：

  1. 用户交互和数据输入：表单是用户输入数据的主要方式。它们允许用户在网页上输入信息

  2. 数据收集和处理：表单是收集用户数据的工具。无论是调查、反馈表、申请表还是在线测试，表单都允许网站所有者从用户那里收集所需的数据

  3. 电子商务和支付处理：在电子商务网站中，表单是实现购物车、结账和支付处理的核心组件。用户可以通过表单选择商品、输入送货地址、提供付款信息等，完成整个购买流程

  4. 数据验证和安全：表单支持在客户端和服务器端进行数据验证，以确保用户输入的数据符合预期格式和安全要求。这有助于保护网站的安全性和数据完整性

  5. 前端与后端的桥梁：表单是前端（用户界面）与后端（服务器逻辑）之间的数据桥梁。它们通过 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网页设计》

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/53081.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Audio分区——音频分区加载流程（三）

Android Audio分区——音频分区加载流程（三）

前面文章介绍了车载多区音频基础&#xff0c;并且介绍了音频分区相关类及对应功能&#xff0c;这里我们就来看一下音频分区的解析过程。 一、音频分区加载 音频分区的加载是在 CarAudioService 的初始化函数 init() 流程中进行的。 1、CarAudioService.java 源码位置&#x…
阅读更多...
【ragflow】安装2：源码安装依赖

【ragflow】安装2：源码安装依赖

中文文档【ragflow】安装1： docker：失败官方说的成功 docker 安装的启动失败 重新来一遍，不会重新拉取： root@k8s-master-pfsrv:/home/zhangbin/perfwork/rag# cd ragflow/ root@k8s-master-pfsrv:/home/
阅读更多...
USB3202N多功能数据采集卡16位模拟量250K频率LabVIEW采集卡

USB3202N多功能数据采集卡16位模拟量250K频率LabVIEW采集卡

品牌&#xff1a;阿尔泰科技 系列&#xff1a;多功能数据采集卡 概述&#xff1a; USB3202N多功能数据采集卡&#xff0c;LabVIEW无缝连接&#xff0c;提供图形化API函数&#xff0c;提供8通道&#xff08;RSE、NRSE&#xff09;、4通道&#xff08;DIFF&#xff09;模拟量输…
阅读更多...
向量和矩阵学习笔记

向量和矩阵学习笔记

向量和矩阵学习笔记 Ps:因为本人实力有限&#xff0c;有一部分可能不太详细&#xff0c;若有补充评论区回复&#xff0c;QWQ 向量 向量的定义 首先&#xff0c;因为我刚刚学到高中的向量&#xff0c;对向量的看法呢就是一条有长度和方向的线&#xff0c;不过这在数学上的定…
阅读更多...
C/C++入门案例01

C/C++入门案例01

文章目录 写在前面1. 你好&#xff0c;世界&#xff01; (Hello, World!)2. 基本的算术运算3. 判断奇偶数4. 计算数组元素的和5. 求最大值和最小值6. 简单的计算器7. 字符串反转8. 计算阶乘9. 查找质数10. 冒泡排序 系列推荐 写在前面 以下是10个适合初学者的C语言入门案例&am…
阅读更多...
【如何在MacOS升级ruby版本】

【如何在MacOS升级ruby版本】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
C++期末知识点概述

C++期末知识点概述

《大学 C知识点概述》 在大学的计算机课程中&#xff0c;C作为一门重要的编程语言&#xff0c;有着广泛的应用和丰富的知识点。 一、基础语法 数据类型&#xff1a;C包含多种数据类型&#xff0c;如整数类型&#xff08;int、short、long 等&#xff09;、浮点类型&#xff…
阅读更多...
Unity(2022.3.41LTS) - 音频

Unity(2022.3.41LTS) - 音频

目录 一、音频系统概述 二、音频资源类型 三、音频组件 四、音频空间定位 五、音频效果处理 六.音乐框架设计 一、音频系统概述 Unity 的音频系统允许开发者在游戏中添加各种声音效果&#xff0c;包括背景音乐、音效、环境音等。它提供了丰富的功能来控制音频的播放、音…
阅读更多...
MIT 6.5940 EfficientML.ai Fall 2023: Lab 1 Pruning

MIT 6.5940 EfficientML.ai Fall 2023: Lab 1 Pruning

EfficientML.ai Lec 3 - Pruning and Sparsity (Part I) MIT 6.5940, Fall 2023, Zoom 本文是EfficientML.ai Fall 2023课程作业1练习答案&#xff0c;在本次练习里将会对经典的分类神经网络进行剪枝处理&#xff0c;减少模型大小和延迟。The goals of this assignment are as …
阅读更多...
python破解[5分钟解决拼多多商家后台字体加密]

python破解[5分钟解决拼多多商家后台字体加密]

可【QQ群】拿源码 进入经营总览想把数据存下来发现返回的json数据部分空白如下 这可怎么办 稳住应该是字体的问题&#xff0c;可能是多多自己实现了某种字体&#xff0c;我们去找他的js 发现如我们所想&#xff0c;进行跟踪&#xff0c;发现的确是在css端进行了字体替换&am…
阅读更多...
Servlet, Filter, Listener 启动与执行顺序

Servlet, Filter, Listener 启动与执行顺序

Servlet, Filter, Listener 启动与执行顺序 1、启动顺序 **Listener -> Filter -> Servlet**2、记忆口诀3、执行顺序 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java Web应用中&#xff0c;Servlet、Filter和Listener的启动与执…
阅读更多...
从0开始深度学习（2）——自动微分

从0开始深度学习（2）——自动微分

1 微积分 1.1 导数和微分 略 1.2 偏导数 略 1.3 梯度&#xff08;gradient&#xff09; 1.3.1 定义 对于一个多变量函数 f ( x 1 , x 2 , … , x n ) f\left(x_{1}, x_{2}, \ldots, x_{n}\right) f(x1​,x2​,…,xn​)其中点 a ( a 1 , a 2 , … , a n ) \mathbf{a}(a_…
阅读更多...
【卷起来】VUE3.0教程-01-环境搭建与安装

【卷起来】VUE3.0教程-01-环境搭建与安装

​分享不易&#xff0c;耗时耗力&#xff0c;麻烦给个不要钱的关注和赞吧 &#x1f332; 什么是VUE Vue 是一个框架&#xff0c;也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的&#xff0c;不同的开发者在 Web 上构建的东西可能在形式和规模…
阅读更多...
SpringSecurity笔记整理

SpringSecurity笔记整理

自定义登录页面 编写登录页面<!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml" xmlns:th"https://www.thymeleaf.org"> <head><title>Please Log In</title> </head> <body> <h1>Please Log …
阅读更多...
鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT的区别

鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT的区别

鸿蒙OpenHarmony、HarmonyOS、HarmonyOS NEXT的区别 OpenHarmony&#xff1a;开源底层。HarmonyOS&#xff1a;闭源手机系统&#xff0c;兼容安卓生态。HarmonyOS NEXT&#xff1a;纯血鸿蒙&#xff0c;不兼容安卓。 OpenHarmony&#xff08;开源&#xff09; 开源地址&…
阅读更多...
Question mutiple pdf‘s using openai, pinecone, langchain

Question mutiple pdf‘s using openai, pinecone, langchain

题意&#xff1a;使用 OpenAI、Pinecone 和 LangChain 对多个 PDF 文件进行提问。 问题背景&#xff1a; I am trying to ask questions against a multiple pdf using pinecone and openAI but I dont know how to. 我正在尝试使用 Pinecone 和 OpenAI 对多个 PDF 文件进行提…
阅读更多...
【Linux】保姆级 Linux 常见命令使用

【Linux】保姆级 Linux 常见命令使用

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. Linux 是什么1.1 Linux 是什么1.2 关于 Linux 我们需要学什么 2. 需提前准备的东西2.1 环境 —— 如何获取…
阅读更多...
使用 Eigen 库中的 Kronecker 积运算

使用 Eigen 库中的 Kronecker 积运算

前言 在数值计算和线性代数的众多应用中&#xff0c;Kronecker 积&#xff08;Kronecker Product&#xff09;是一种常用的矩阵运算。Eigen 是一个高性能的 C 数值计算库&#xff0c;广泛用于科学计算和工程应用中。在 Eigen 库中&#xff0c;Kronecker 积运算属于不常用的扩展…
阅读更多...
【QNX+Android虚拟化方案】114 - QNX /dev/switch 节点创建 及 读写功能实现实例

【QNX+Android虚拟化方案】114 - QNX /dev/switch 节点创建 及 读写功能实现实例

【QNX+Android虚拟化方案】114 - QNX /dev/switch 节点创建 及 读写功能实现实例 一、/dev/switch 节点创建代码分解1. 头文件包含2. 创建节 /dev/switch 节点代码3. /dev/switch 节点读函数实现（cat /dev/switch）4. /dev/switch 节点写函数实现（echo "abcdef" &g…
阅读更多...
构建高效微服务架构：Spring Cloud中的注册中心与负载均衡实践

构建高效微服务架构：Spring Cloud中的注册中心与负载均衡实践

一、注册中心的重要性 服务发现&#xff1a; 服务注册/注销&#xff1a;注册中心维护着所有服务提供者和服务消费者的元数据信息。服务订阅/取消订阅&#xff1a;服务消费者可以通过订阅来获取服务提供者的信息&#xff0c;并且注册中心应当支持实时推送更新。服务路由&#…
阅读更多...
最新文章

Copyright @ 2022~2023