Html表单和表格例子

最新推荐文章于 2025-03-26 13:48:46 发布
最新推荐文章于 2025-03-26 13:48:46 发布
阅读量1w 收藏 64
点赞数 8
分类专栏： 前端 文章标签： html 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/boke14122621/article/details/70896504
版权
本文介绍了HTML中表格和表单的基本用法及实例。详细解释了表格标签table、tr、td、th以及colspan和rowspan属性的作用，并通过一个完整的表格示例展示了如何创建复杂的布局。此外，还提供了表单的示例代码，包括输入类型、下拉选择、文本区域等元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Html表格和表单制作：
1.关于表格：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
跨行：colspan
跨列：rowspan
2.关于表单：
输入
多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
单选按钮（Radio Buttons）
复选框（Checkboxes）
表单的动作属性（Action）和确认按钮：
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

表格：

<<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>web2 表格</title>
</head>
<body>

	<table border="1" width="400" height="100" cellspacing="0" cellpadding="0">
	 <caption align="center"> <h3> ##IT教育——学生档案</h3> <br/> <h5>  档案编号 XSJY-2016 </h5></caption>  <br/>

	<thead>
		<th>培训课程</th>
		<th>前端开发工程师课程</th>
		
	</thead>
    
	<tbody>
		<tr>
			<td text align="center"><b>班号</b></td>
			<td text align="center"><b>	<font color="#f00">	公司填写</font>	</b></td>
			<td rowspan="4"> <b>照片</b></td>
		</tr>

		<tr>
			<td text align="center" rowspan="3"><b>填表时间</b></td>
		</tr>
	</tbody>
		
	</table>

	<table border="1" width="400"  cellspacing="0" cellpadding="0">

	<thead>
		<th>学员姓名</th>
		<th></th>
		<th>性别</th>
		<th></th>
		<th width="50">出生日期</th>
		<th></th>
	</thead>

	<tbody>
	<tr>
	<td rowspan="2"> <b>目前从事职位或上学</b></td>
	<td rowspan="2" width="50">  </td>
	<td rowspan="2"> <b>学历</b></td>
	<td rowspan="2" width="50"></td>
	<td><b>	<font color="#f00">	QQ号码</font>	</b></td>
	<td  width="50"></td>
	</tr>
	
	<tr>
	<td><b>	<font color="#f00">	YY号码</font>	</b></td>
	<td  width="50"></td>
		
	</tr>
	<tr>
	<td><b>手机</b></td>
	<td colspan="5"> </td>

	</tr>
	<tr>
	<td><b>证件名称 </b></td>
	<td><b>	身份证</b></td>
	<td><b>	证件前十四位号码</b></td>

	<td colspan="3"></td>

	</tr>
	<tr>
	<td><b>	目前工作城市 </b></td>
	<td colspan="5"></td>

	</tr>
	<tr>
	<td><b>	毕业院校</b></td>
	<td colspan="5"></td>
	</tr>	
	<tr>
	<td><b>	目前从事岗位</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	毕业院校</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	你是从那里知道##的</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	##哪方面吸引了你</b></td>
	<td colspan="5"></td>
	</tr>

	<tr>
	<td><b>	序号</b></td>
	<td text align="center" colspan="2"><b>	缴费金额</b></td>
	<td><b>	缴费日期 </b></td>
	<td><b>	收款人</b></td>
	<td><b>	咨询老师</b></td>

	</tr>
	
	<tr>
	<td><b>	1</b></td>
	<td colspan="2"></td>
	<td></td>
	<td><b>	<font color="#f00">	公司填写</font>	</b></td>
	<td><b>	<font color="#f00">	公司填写</font>	</b></td>
	</tr>
	</tbody>	




</body>
</html>

浏览器打开如图所示：
这里写图片描述

表单：

<<!DOCTYPE html>
<html lang="en">
<html>
<head>
	 <meta charset="UTF-8">
   
	<title><b>  基本资料</b></title>

</head>
<body>
 <h3>基本资料</h3>
<form action="html5.html" method="get">
性别: <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
    <br/>

生日:<select name="year" >
                         <option value="0">年</option>
                        <option value="1">1980</option>
                        <option value="2">1981</option>
                        <option value="3">1982</option>
                        <option value="4">1983</option>
                        <option value="5">1984</option>
                        <option value="6">1985</option>
                        <option value="7">1986</option>
                        <option value="8">1987</option>
                        <option value="9">1988</option>
                        <option value="10">1989</option>
                         <option value="11">1990</option>
                        <option value="12">1991</option>
                        <option value="13">1992</option>
                        <option value="14">1993</option>
                        <option value="15">1994</option>
                        <option value="16">1995</option>
                        <option value="17">1996</option>
                        <option value="18">1997</option>
                        <option value="19">1998</option>
                        <option value="20">1999</option>
			</select>
			<select name="month"  >
                        <option value="1">月</option>
                        <option value="2">1</option>
                        <option value="3">2</option>
                        <option value="4">3</option>
                        <option value="5">4</option>
                        <option value="6">5</option>
                        <option value="7">6</option>
                        <option value="8">7</option>
                        <option value="9">8</option>
                        <option value="10">9</option>
                         <option value="11">10</option>
                        <option value="12">11</option>
                        <option value="13">12</option>
               </select>
                <br />
血型:<select name="blood">
                        <option value="1">未知</option>
						<option value="1">A</option>
                        <option value="2">B</option>
                        <option value="3">AB</option>
                        <option value="4">O</option>
                        <option value="5">RH</option>
                  </select>
                <br />
 出生地:<select name="省份" >
                        <option value="0">请选择</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广东</option>
                         <option value="4">天津</option>
                        <option value="5">江苏</option>
                        <option value="6">浙江</option>
                         <option value="7">湖南</option>
                        <option value="8">湖北</option>
                        <option value="9">山东</option>
                         <option value="10">陕西</option>
                        <option value="11">山西</option>
                        <option value="12">广西</option>

                        
                    </select>
           <select name="city" >
                         <option value="0">请选择</option>
           				 <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        
           	 </select>

                <br />
 居住地:<select name="city">
                           <option value="0">请选择</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广东</option>
                         <option value="4">天津</option>
                        <option value="5">江苏</option>
                        <option value="6">浙江</option>
                         <option value="7">湖南</option>
                        <option value="8">湖北</option>
                        <option value="9">山东</option>
                         <option value="10">陕西</option>
                        <option value="11">山西</option>
                        <option value="12">广西</option>
                        
                    </select>
           <select name="city" placeholder="请选择"required />
                        <option value="0">请选择</option>
           				 <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        
           	 </select>

                <br />

                 个人简介:<textarea name="text" rows="5" cols="30"></textarea>
                <br/>
                <input type="submit" color="#abcdef" value="保存">
               
</body>
</html>

这里写图片描述

HTML学习 —常用表单及简单实例
weixin_67614925的博客
05-06 1895
文章目录常用表单介绍简单实例 常用表单介绍 show code： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
HTML（之表单的）案例
ChengMeng11的博客
03-14 1222
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
零基础HTML表格制作：手把手教你创建规范数据表（附企业级案例）
最新发布
2502_90908307的博客
03-26 399
∩是交集，∪是并集，∩∪是病娇，这是表格合并的教程。
html实例，实现表单
aigo_2021的博客
03-29 7790
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
html表单实现小案例
异想实验室|Arduion|ESP8266|Micro Python|
02-22 213
html表单实现方法
html 表单实例
LIN的博客
09-07 256
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html表单</title> </head> <body> <div align="center" > 表单 <form action=...
HTML系列之表格、表单综合案例
StayAlive1887的博客
07-01 1726
要求：用HTML实现下面的效果。要求：用HTML实现下面的效果。
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
在HTML中，表格是一种用于组织数据的基本元素，它允许我们将数据排列成行列，方便阅读和理解。本教程将深入讲解如何使用HTML中的`<TABLE>`标签的`WIDTH`和`HEIGHT`属性来设置表格的宽度和高度。 首先，我们要了解...
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2520
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
HTML学习笔记二--表单及表格的结合使用个人简历制作
qq_45231291的博客
06-02 1992
一、表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
html表单和表格的嵌套
04-07
HTML表单和表格可以嵌套在一起，以便收集和显示数据。例如，可以在表格中包含一个表单，以便用户可以在表格中输入数据并将其提交到服务器。 以下是一个示例代码，其中包括一个包含表单的表格： ```html ...
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
HTML表单示例
Useless_csdn的博客
01-11 3180
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
HTML表格（table）实例
热门推荐
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
html表单制作及实例
专注java二开部署
01-01 2927
这个表单包含了文本输入、电子邮件输入、密码输入、下拉列表和文本框等多种类型的输入。这个表单有两个文本输入字段（名和姓），一个提交按钮，当用户点击提交按钮时，数据会以POST方式发送到服务器的"/submit_form"地址。注意：这只是一个基本的表单，实际上你可能需要包含更多的HTML元素，例如复选框，下拉列表，单选按钮等，以及更复杂的验证和错误处理机制。除了上述的表单元素，HTML表单还可以包括一些用于验证用户输入的元素和特性。属性来定义一个正则表达式，以验证用户输入的数据是否符合特定的格式。
Html的表单
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6394
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
HTML实例--列表、表单
ymangu的专栏
07-18 1670
First Row Second Row
HTML---表单案例
sumuqi的博客
03-14 501
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action="" m...
欧拉角、旋转矩阵、四元数
01-14
### 欧拉角、旋转矩阵和四元数的关系 #### 定义与概念 欧拉角是一种用于描述刚体姿态的方法，通过三个连续的旋转变换来定义物体的姿态。通常使用的序列有 ZYX 或 XYZ 等[^1]。 旋转矩阵是一个正交矩阵，用来表示三维空间中的旋转操作。它由九个元素组成，这九个元素满足特定条件使得行列式的值为 1，并且每一列都是单位向量。 四元数则提供了一种紧凑的方式来表达三维旋转，避免了万向锁问题并减少了计算复杂度。一个四元数 \(q\) 可以写作： \[ q = w + xi + yj + zk \] 其中 \(w, x, y,\) 和 \(z\) 是实数部分和虚部系数；\(i,j,k\) 遵循哈密顿乘法规则。 #### 优点对比 - **欧拉角** - 易于理解和解释物理意义。 - 存在奇异点（即当俯仰角接近 ±90°时），此时会出现所谓的“万向锁”，导致自由度丢失[^2]。 - **旋转矩阵** - 不受奇异性影响，在所有情况下都能唯一确定旋转状态。 - 计算开销较大，因为涉及到更多的浮点运算以及存储需求更高。 - **四元数** - 更加高效地处理插值和平滑过渡等问题。 - 对抗数值不稳定性和累积误差的能力较强[^3]。 #### 应用场景 - **机器人学**：为了简化控制算法的设计过程，常采用四元数来代替传统的欧拉角或旋转矩阵形式来进行姿态估计和路径规划任务。 - **计算机图形学**：由于其良好的视觉效果表现力，特别是在动画制作领域内广泛运用四元数实现平滑的对象运动轨迹模拟[^4]。 - **航空航天工程**：飞行器导航系统依赖高精度的姿态测量设备如陀螺仪等传感器数据融合技术，利用四元数能够更精确稳定地跟踪目标位置变化情况。 ```python import numpy as np def euler_to_quaternion(roll, pitch, yaw): cy = np.cos(yaw * 0.5) sy = np.sin(yaw * 0.5) cp = np.cos(pitch * 0.5) sp = np.sin(pitch * 0.5) cr = np.cos(roll * 0.5) sr = np.sin(roll * 0.5) w = cr * cp * cy + sr * sp * sy x = sr * cp * cy - cr * sp * sy y = cr * sp * cy + sr * cp * sy z = cr * cp * sy - sr * sp * cy return [w, x, y, z] ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值