创建一个HTML的form表格表单

最新推荐文章于 2024-05-12 14:45:45 发布
最新推荐文章于 2024-05-12 14:45:45 发布
阅读量8.6k 收藏 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 应用
Kuugo_的博客
09-26 216
利用 JavaScript 或者 jQuery 等完成页面元素合法性的校验，例如当用户输入 的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图 2-1 所示，注意选取适当的输入元素类型，并对其命名；表单的 action 属性课设置为空。图中“用户注册”几个字可以不和示意图一样。编写一个用户注册界面。2、实现用户输入信息的校验。
From表单的提交与Post请求
weixin_44542115的博客
04-28 7948
在JQuery代码中常见的页面与控制器的互动的方法有Form表单提交数据和Post请求发送两种方法。 方法一：Form表单提交 在提交表单之前要先获取表单里面的内容的数据("#formEmployee[name=‘employeeID’]") 是id为formEmployee的表单下面的name值为employeeID的标签，val是获取这个选中的标签的值，你需要提交表单的哪些数据就获取到表单下面...
HTML表单创建学习
最新发布
十一、的博客
05-12 637
label 标签的主要目的是提高用户体验，因为它允许用户通过单击标签文本来选择表单元素，而不仅仅是单击表单元素本身。pattern属性的作用是指定表单元素输入的模式，即用户必须按照指定的模式输入内容才能通过验证。pattern属性使用正则表达式来描述输入的模式，如果用户输入的内容与正则表达式不匹配，浏览器会阻止表单提交并显示错误提示。minlength属性的作用是指定表单元素输入的最小长度，即用户必须输入至少指定长度的字符才能通过验证。required属性的作用是指定表单元素必须填写，不能留空。
今天的Django教训汇总：建立表单、POST数据-20210331
Season CSDN博客
03-30 271
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 886
人员档案管理$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPa...
HTML中的表格和表单
国庆的博客
09-16 4432
目录 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 标记用于定义表格中的单元格。 掌握网页中插入表格数据的标记的...
Contact-Form:一个简单的联系表格
05-08
总结来说，"Contact-Form"项目是一个基础的Web表单系统，展示了如何使用HTML创建表单，然后利用PHP处理表单数据并发送邮件。对于初学者来说，这是一个很好的起点，可以学习到网页交互的基本原理，并逐步深入到更复杂...
美观又功能齐全的HTML form表单
03-21
`<form>`标签定义了一个表单区域，它包含了一系列的输入控件，如`<input>`、`<select>`、`<textarea>`等。这些控件允许用户输入数据，然后通过`<form>`的`action`属性指定的URL提交给服务器处理。 例如，一个简单的...
网站开发之HTML基础表格Table和表单Form（三）1
08-03
在网站开发中，HTML表格（Table）和表单（Form）是构建网页内容和交互的重要元素。本篇主要介绍HTML表格的基础知识，包括如何创建表格、合并单元格以及表格的对齐方式。同时，也会简要提及HTML表单的基础概念。 ...
使用HTML表格制作简易的个人简历表
weixin_45993305的博客
12-09 4991
使用HTML表格制作简易的个人简历表 一、创建过程 创建表格标题 创建表格 创建行 创建单元格 二、原理 主要使用HTML表格的不规则表格属性以及HTML表格的基本属性 三、使用的主要代码 创建表格标题 创建表格 创建行 创建单元格 四、主要代码的基本元素代码 table属性:border：边框 cellpadding：单元格的内边距（单元格边框与内容之间的距离） cell...
简单的学生档案页面（基础的HTML表单使用）
wei257的博客
07-03 3766
本次目标: 一、基础知识 1.form（表单域）：在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下： <form action="URL地址" method="提交方法" name="表单名字"> 内容 </form> 常用属性： action：用...
表单forms的设计与使用
liuskyter
04-16 1375
什么是表单？何时使用表单？ 在web开发里表单的使用必不可少。表单用于让用户提交数据或上传文件，表单也用于让用户编辑已有数据。Django的表单Forms类的作用是把用户输入的数据转化成Python对象格式，便于后续操作（比如存储，修改）。 自定义表单 类似模型，Django表单也由各种字段组成。表单可以自定义(forms.Form)，也可以由模型Models创建(forms.ModelFo...
js习题（把location.search获取的字符串转换为对象属性的方法）
weixin_46611729的博客
09-27 757
<!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 5167
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
js构建form表单数据
p7+的博客
11-22 2144
背景 后端接口：参数为Person，Person成员变量包含Other对象 @RequestMapping("post") public Object post(Person person) { return JsonResult.success(person); } public class Person implements Serializable { private Other other; private String name; private Integer
JSP jQuery请定义一个表单，用于录入员工信息，信息包括姓名、密码、年龄、国家和详细地址，要求对用户输入的值进行验证，并将验证信息显示在文本框的后
A_KING2的博客
05-20 2417
请定义一个表单，用于录入员工信息，信息包括姓名、密码、年龄、国家和详细地址，要求对用户输入的值进行验证，并将验证信息显示在文本框的后面。验证要求如下： 姓名：不能为空，并且长度不能小于6 密码：不能为空，并且长度不能小于10 年龄：必须在18~60之间 国家：只能是中国、美国、巴勒斯坦三个国家 地址：不能大于50个字符。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8
2020-10-10JavaWeb学习记录
csdnxbh1999的博客
10-10 147
HTML图片img标签 title设置鼠标悬停时显示的信息 alt设置图片加载失败时显示的提示信息 超链接 target属性： 可取值： _blank:新窗口 _self:当前窗口（默认） _top:顶级窗口 _parent：父窗口 超链接的作用： 通过超链接可以从浏览器向服务器发送请求 浏览器向服务器发送数据（请求：request） 服务器向浏览器发送数据（响应：response） B/S结构的系统：每一个请求都会对应一个响应 列表 有序列表： <ol> <li></li&g
form generator 表单引擎生成数据表格
08-30
表单引擎是一种软件工具，用于生成数据表格。它能够帮助用户轻松地创建和定制数据表格，而无需编写任何代码。通过使用表单引擎，用户可以...总之，表单引擎是一个强大的工具，可以让数据表格的创建变得更加便捷和灵活。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值