在HTML用表格和表单做一个注册页面

最新推荐文章于 2024-09-02 11:46:47 发布
最新推荐文章于 2024-09-02 11:46:47 发布
阅读量112 收藏
点赞数 4
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx030717/article/details/141610976
版权

在做这个页面的时候，我们先判断这个页面需要做一个几行几列的表格，先把表格给搭建好，再在表格中通过表单和其他标签实现我们的目的

看一个例题：

 如果要通过html把这个页面做成表格的形式，我们需要跨行，跨列，分别为rowspan，colspan

这个题要用到表格和表单的很多标签

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr>
				<td>登录名：</td>
				<td><input type="text" /></td>
				<td>(可包含a-z、0-9和下划线)</td>
				<td rowspan="9"><img src="img/read.gif" alt="" />
					<strong>阅读贵美网服务协议</strong>
					<br />
					<textarea name="" id="" cols="30" rows="15">欢迎阅读服务条款协议...</textarea>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" /></td>
				<td>(至少包含6个字符)</td>
			</tr>
			<tr>
				<td>再次输入密码：</td>
				<td><input type="password" /></td>
				<td></td>
			</tr>
			<tr>
				<td>电子邮箱：</td>
				<td><input type="text" /></td>
				<td>(必须包含@字符)</td>
			</tr>
			<tr>
				<td>性别：</td>
				<td colspan="2">
					<input type="radio" name="sex" value="" />
					<img src="img/Male.gif" alt="" />男
					<input type="radio" name="sex" value="" />
					<img src="img/Female.gif" alt="" />女
				</td>
			</tr>
			<tr>
				<td>头像：</td>
				<td colspan="2"><input type="file" /></td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td colspan="2"><input type="checkbox" name="hab" value=""/>运动
					<input type="checkbox" name="hab" value=""/>聊天
					<input type="checkbox" name="hab" value=""/>玩游戏
				</td>
			</tr>
			<tr>
				<td>喜欢的城市：</td>
				<td colspan="2">
					<select name="city" id="">
						<option value="" selected>请选择</option>
						<option value="">北京</option>
						<option value="">郑州</option>
						<option value="">天津</option>
						<option value="">上海</option>
					</select>
				</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2">
					<input type="submit" value="同意右侧服务条款,提交注册信息" disabled />
					<input type="reset" name="reset" value="重 填" />
				</td>
			</tr>
		</table>
	</body>
</html>

zx不秃头
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2294
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
用html代码制作一个表单页面,HTML网页表单制作详细讲解
weixin_39747975的博客
06-04 5555
表单是一个网站和访问者开展互动的窗口，我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。初识表单表单可以用来在网页中发送数据，特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表...
页面使用html生成一个n行n列表格,HTML静态网页：表格、表单
weixin_30998047的博客
06-03 1215
一、表格tabletable的属性width 宽度，可以用百分比或者像素，像素常用960border 边框，常用值是0cellpadding 表格内容与单元格边框的边距，常用值0cellspacing 单元格之间的间距，常用值0align 单元格里面内容的对齐方式bgcolor 背景色background 背景图片行，属性align ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
Caojian_0的博客
08-03 1447
【4001】通过html做一个简单的表格表单，嘿嘿。
HTML做一个注册表单
qq_63825941的博客
05-17 2196
【代码】HTML做一个注册表单。
html笔记2（表格、表单以及注册页面）
m0_58331488的博客
04-06 2436
html笔记1.表格标签（table）表格属性表格结构标签合并单元格表格总结2.列表标签无序列表（ul）有序列表（ol）自定义列表（dl）3.表单（form标签 以下三个标签也可以在form外单独使用）表单控件（表单元素）1.input标签2.select下拉列表标签（也是包含在form里滴）3.textarea 文本域（它的两个属性 不要记 没用）综合案例：注册页面 1.表格标签（table） 父标签： table 子标签： 1.tr（table row）：行 2.td：表格的一个单元格（要放在tr标签内
一个页面两个html,在一个HTML页面中有两个表单
weixin_35786759的博客
06-03 876
我想有一个页面为双方的注册和登录。 然而，我无法处理这两个表格。 这是我的密码。 我在想，是否可以给这些表格起个名字，或者用另一种方式处理它？Forms.pyfrom django.contrib.auth import get_user_modelfrom django.contrib.auth.forms import UserCreationFormclass UserCreateForm(...
html用form表单做一个简约漂亮的登录页面
Louke_lixianqi的博客
04-15 5261
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
Html用表单和列表写一个注册界面
weixin_68967484的博客
04-14 793
效果图 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单案例</title> <style type="text/css"> #box{ width: 37.5rem; margin: 0 auto; margin-top: 30px; } body{ backgro.
html中如何写一个注册,利用HTML表单标签编写一个注册页面
weixin_34567079的博客
05-31 4229
原标题：利用HTML表单标签编写一个注册页面今天我们来写一个注册页面form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:页面结构大体就是这样子的~ 表单标签:所有需要提交到服务器端的表单项必须使用包起来~form标签的属性:action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码)method:表单的提交方式(get/post)文本输入框:密码输入框:...
HTML 使用表单标签实现注册页面的实例代码
09-22
在注册页面的设计中，表格可以用来布局表单的外观，使得每个输入项都在适当的位置显示。 6. 标签：定义表格中的一行，与标签结合使用，来创建表格的具体内容单元格。 7. 标签：用于在标签内定义一个单元格，用来...
用 HTML 做一个表单模板
01-20
下面将详细介绍HTML中的常见标签和表单元素。 1. **标题标签 (hn)**：HTML提供六级标题标签，从`<h1>`到`<h6>`，分别代表一级到六级的标题，其中`<h1>`最重要，`<h6>`最次。这些标签用于组织文档结构，便于读者理解...
分享Bootstrap简单表格、表单、登录页面
08-29
Bootstrap 简单表格、表单、登录页面实践指南 Bootstrap 框架作为一个流行的前端框架，提供了许多实用的UI...通过了解 Bootstrap 的基本使用和表格、表单、登录页面的样式，可以快速创建一个美观实用的Web应用程序。
HTML 实现炫酷选项卡效果
最新发布
qq_69304031的博客
09-02 563
在前端开发中，创造出吸引人的交互效果能够极大地提升用户体验。今天，我将分享一段使用 HTML 和 CSS 实现的炫酷选项卡代码，并详细介绍其实现过程。
word文档转html(只支持段落和表格)
m0_63159822的博客
08-30 544
/ 这里简单地将单元格中的文本内容添加到HTML中。// 注意：单元格可能包含多个段落，需要遍历它们。// 辅助方法，用于获取段落中的文本内容。
HTML静态网页成品作业(HTML+CSS)——非遗徽州木雕网页(6个页面)
2301_78945238的博客
08-30 999
HTML静态网页成品作业(HTML+CSS)——非遗徽州木雕网页(6个页面)
巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南
前端基地
08-30 815
本文深入阐释 HTML 列表，涵盖无序列表、容豁级标签、有序列表、定义列表及多级列表等。丰富讲解与实际案例紧密结合，助力新手快速上手，让经验丰富者也能收获实用知识与技巧。为网页创作之路注入新活力，快来开启精彩的学习之旅。
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
2301_78945238的博客
08-26 1058
HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)
html快速入门
m0_52049533的博客
08-22 1093
/
html做一个注册页面像表格
03-22
可以使用HTML表单元素来创建一个注册页面。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <h1>注册</h1> <form action="submit.php" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <label for="gender">性别：</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label for="age">年龄：</label> <input type="number" id="age" name="age"><br><br> <input type="submit" value="提交"> </form> </body> </html> ``` 这个表单包括了用户名、密码、邮箱、性别和年龄等字段，用户可以填写并提交表单。在提交表单后，数据将被发送到一个名为"submit.php"的服务器端脚本进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值