创建一个HTML的form表格表单

最新推荐文章于 2024-06-11 11:30:38 发布
最新推荐文章于 2024-06-11 11:30:38 发布
阅读量8.7k 收藏 33
点赞数 8
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tritoy/article/details/80208347
版权

创建一个HTML的form表格形式的表单，我们要实现如图的样式：


话不多说，直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户信息</title>
	</head>
	
	<body>	
		
		<!--
        	form表单部分：用来传输数据 是一个整个组件
        
        	form属性
        	action:将表单内容提交的地址
        		我将提交地址设为了百度_(:зゝ∠)_
        
        	method:提交的方式有两种get和post
        		这里我使用的get方式
        	
        -->
        <form action="https://www.baidu.com" method="get">
        
			<!--
            	border用来规定表格边框的宽度
            	align表格在网页中的对齐方式
            	cellpadding规定单元边缘和其中内容的空白大小
            	cellspacing规定单元格之间的空白大小
            -->
			<table border="1" align="center" cellpadding="1" cellspacing="2" >
				<tr>
					<td width="125" height="35">用户名：</td>
					<td width="300" ><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td width="125" height="35">密码：</td>
					<td width="300"><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td width="125" height="35">性别:</td>
					<td width="300">
						<input type="radio" name="sex" value=1 />男
						<input type="radio" name="sex" value=0 />女
					</td>
				</tr>
				<tr>
					<td width="125" height="35">爱好：</td>
					<td width="300">
						<input type="checkbox" name="hobby" value="basketball" />篮球
						<input type="checkbox" name="hobby" value="football" />足球
						<input type="checkbox" name="hobby" value="badminton" />羽毛球
					</td>
				</tr>
				<tr>
					<td width="125" height="35">来自：</td>
					<td width="300">
						<select>
							<option value="上海">上海</option>
							<option value="北京">北京</option>
							<option value="广州">广州</option>
							<option value="成都">成都</option>
							<option value="郑州">郑州</option>
						</select> 
					</td>
				</tr>
				<tr>
					<td width="125" height="35">照片：</td>
					<td width="300">
						<input type="file" name="photo"
					</td>
				</tr>
				<tr>
					<td width="125" height="35">介绍：</td>
					<td width="300">
						<textarea cols="50" rows="5"></textarea>
					</td>
				</tr>
				<tr>
					<td width="125" height="35" colspan="2">
						<input type="submit" value="提交数据"/>
						<input type="reset" />
					</td>
	
				</tr>
			</table>
		</form>
	</body>
</html>

目的是设计一个表格格式的表单，那就主要是熟悉对<table>标签的使用。

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或 td 元素。

<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）

td 元素中的文本一般显示为正常字体且左对齐。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

Tritoooooy
关注
  • 8
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML基础篇002】HTML之form表单超详解_html form表单
2401_84182392的博客
04-17 1133
(img-JrIfd5b3-1713343289604)]p204888 （备注大数据）**
HTML基础---表单
凤凰的博客
09-05 181
HTML基础—表单
HTML表单使用PHP实现MySQL数据库插入
lovehuishouzan的专栏
11-27 2303
1.employeeInf.html页面提供用户信息的录入，如下图所示： 2.employeeInf.html源代码如下图所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Insert the information...
HTML 登录页表单
最新发布
南北极之间
06-11 975
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
实验一 HTML 应用
Kuugo_的博客
09-26 224
利用 JavaScript 或者 jQuery 等完成页面元素合法性的校验，例如当用户输入 的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图 2-1 所示，注意选取适当的输入元素类型，并对其命名；表单的 action 属性课设置为空。图中“用户注册”几个字可以不和示意图一样。编写一个用户注册界面。2、实现用户输入信息的校验。
From表单的提交与Post请求
weixin_44542115的博客
04-28 7951
在JQuery代码中常见的页面与控制器的互动的方法有Form表单提交数据和Post请求发送两种方法。 方法一：Form表单提交 在提交表单之前要先获取表单里面的内容的数据("#formEmployee[name=‘employeeID’]") 是id为formEmployee的表单下面的name值为employeeID的标签，val是获取这个选中的标签的值，你需要提交表单的哪些数据就获取到表单下面...
今天的Django教训汇总：建立表单、POST数据-20210331
Season CSDN博客
03-30 273
1.用Form类来新增表单。 forms.py from django import forms class NewEmployee(forms.Form): name = forms.CharField() email = forms.EmailField() message = forms.CharField() In [2]: from myclass.forms import NewEmployee In [4]: f = NewEmployee() In [5]
档案管理html,人员档案管理.html
weixin_34208400的博客
06-27 887
人员档案管理$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
HTML中的表格和表单
国庆的博客
09-16 4461
目录 1、表格 1.1创建表格 1.2 表格属性 1.3 表头单元格和表格标题 2、表单 2.1 input控件 2.2 label标签 2.3 textarea控件（文本域） 2.4 下拉菜单 2.5 表单域 1、表格 表格是较为常见的一种标签，但不是用来布局，常见处理、显示表格数据。 （1）表格提供了HTML中定义表格数据的方法 （2）表格由行中的单元格组成 （3...
vue实现form表单与table表格的数据关联功能示例
10-17
首先，HTML部分创建了一个包含姓名（Name）、年龄（Age）和性别（Sex）输入字段的表单，以及一个用于添加新条目的“Create”按钮。表单中的每个输入字段都使用`v-model`指令与Vue实例的数据属性进行双向绑定，例如`v...
实验三HTML表格与HTML表单优质资料.doc
12-02
HTML 表格是网页中常用的一个元素，用于展示数据。HTML 表格由 table、tr、td 等标记组成。table 标记用于定义表格，tr 标记用于定义表格中的行，td 标记用于定义表格中的单元格。 掌握网页中插入表格数据的标记的...
用 HTML 做一个表单模板
01-20
- **表单控件 (action, method, name, value, type, select)**：`<form>`标签定义表单，`action`指定表单提交的URL，`method`设置提交方式（GET或POST），`name`为表单命名。表单控件包括`<input>`、`<textarea>`等...
Contact-Form:一个简单的联系表格
05-08
总结来说，"Contact-Form"项目是一个基础的Web表单系统，展示了如何使用HTML创建表单，然后利用PHP处理表单数据并发送邮件。对于初学者来说，这是一个很好的起点，可以学习到网页交互的基本原理，并逐步深入到更复杂...
美观又功能齐全的HTML form表单
03-21
`<form>`标签定义了一个表单区域，它包含了一系列的输入控件，如`<input>`、`<select>`、`<textarea>`等。这些控件允许用户输入数据，然后通过`<form>`的`action`属性指定的URL提交给服务器处理。 例如，一个简单的...
使用HTML表格制作简易的个人简历表
weixin_45993305的博客
12-09 5013
使用HTML表格制作简易的个人简历表 一、创建过程 创建表格标题 创建表格 创建行 创建单元格 二、原理 主要使用HTML表格的不规则表格属性以及HTML表格的基本属性 三、使用的主要代码 创建表格标题 创建表格 创建行 创建单元格 四、主要代码的基本元素代码 table属性:border：边框 cellpadding：单元格的内边距（单元格边框与内容之间的距离） cell...
简单的学生档案页面（基础的HTML表单使用）
wei257的博客
07-03 3769
本次目标: 一、基础知识 1.form（表单域）：在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下： <form action="URL地址" method="提交方法" name="表单名字"> 内容 </form> 常用属性： action：用...
表单forms的设计与使用
liuskyter
04-16 1383
什么是表单？何时使用表单？ 在web开发里表单的使用必不可少。表单用于让用户提交数据或上传文件，表单也用于让用户编辑已有数据。Django的表单Forms类的作用是把用户输入的数据转化成Python对象格式，便于后续操作（比如存储，修改）。 自定义表单 类似模型，Django表单也由各种字段组成。表单可以自定义(forms.Form)，也可以由模型Models创建(forms.ModelFo...
js习题（把location.search获取的字符串转换为对象属性的方法）
weixin_46611729的博客
09-27 761
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form&gt
html用form表单做一个简约漂亮的登录页面
Louke_lixianqi的博客
04-15 5193
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录界面</title> <link rel="stylesheet" href="./style.css"> <link rel="shortcut icon" href="icon.png" type="image/x-ic
form generator 表单引擎生成数据表格
08-30
表单引擎是一种软件工具，用于生成数据表格。它能够帮助用户轻松地创建和定制数据表格，而无需编写任何代码。通过使用表单引擎，用户可以在几分钟内生成一个完全可用的数据表格。 表单引擎具有简单易用的界面，用户可以通过拖拽和放置的方式来添加和排列不同的字段。用户可以选择不同的字段类型，例如文本框、选择框、日期选择器等等，以满足他们的数据记录需求。此外，用户还可以自定义字段的验证规则，以确保输入的数据符合预期。表单引擎还提供了一些预定义的模板和样式，以便用户根据自己的品牌和风格进行个性化定制。 一旦用户完成了表单的设计，表单引擎将自动生成相应的HTML和CSS代码。用户只需简单地将生成的代码嵌入到自己的网页中，就能够将数据表格展示给用户，并且可以进行数据的录入和编辑。表单引擎还可以与各类数据库进行集成，使用户能够方便地将数据存储和提取。 表单引擎的使用简单高效，适用于各类网站和应用程序。它可以帮助用户快速建立数据表格，而无需编写复杂的前端代码。通过表单引擎，用户可以更加专注于数据的管理和分析，而不需要花费太多时间和精力在表格的设计和实现上。总之，表单引擎是一个强大的工具，可以让数据表格的创建变得更加便捷和灵活。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值