HTML中的表单Form实现居中效果


Posted in HTML / CSS onMay 25, 2021

之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面分享一下我所经历过程中的错误与最终结果。(因为做这部分作业的时候还没有学 css,所以没用)

1、刚做出来的样子

HTML中的表单Form实现居中效果

<form>
			<label for="firstname">名字:</label>
			<input type="text" name="firstname" id="firstname" required="required" value="" /><br />
		
			<label for="lastname">姓氏:</label>
			<input type="text" name="lastname" id="lastname" required="required" value="" /><br />
		
			<label for="login name">登录名:</label>
			<input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)<br />
		
			<label for="password">密码:</label>
			<input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)<br />
		
			<label for="password2">再次输入密码:</label>
			<input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /><br />
		
			<label for="myEmail">电子邮箱:</label>
			<input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)
		</form>

看起来很别扭,所以要继续改进一下。。。

2、经过修改后

HTML中的表单Form实现居中效果
 

看起来好像更别扭了,但是实现了居中,到这里时,我也不知道自己用的 < center> 对不对。。。

<center>
	<form>
		`````
		`````
	</ form>
</ center>

3、使用表格布局后

HTML中的表单Form实现居中效果
 

这就是在经过了一晚上的修改后,最终呈现的结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="text/css" href="./img/favicon.png"/>
		<title></title>
	</head>
	<body>
		<center>
		<form action="Success.html" target="_blank" method="get">
			<table border="0" cellspacing="" cellpadding="">
				<tr>
					<td><label for="firstname">名字:</label></td>
					<td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
				</tr>
				<tr>
					<td><label for="lastname">姓氏:</label></td>
					<td><input type="text" name="lastname" id="lastname" required="required" value="" /></td>
				</tr>
				<tr>
					<td><label for="login name">登录名:</label></td>
					<td><input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)</td>
				</tr>
				<tr>
					<td><label for="password">密码:</label></td>
					<td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)</td>
				</tr>
				<tr>
					<td><label for="password2">再次输入密码:</label></td>
					<td><input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
				</tr>
				<tr>
					<td><label for="myEmail">电子邮箱:</label></td>
					<td><input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)</td>
				</tr>
				<tr>
					<td><label>性别:</label></td>
					<td>
						<input type="radio" name="sex" id="" value="male" />男<img src="./img/Male.gif" >
						<input type="radio" name="sex" id="" value="female" />女<img src="./img/Female.gif" >
					</td>
				</tr>
				<tr>
					<td><label>头像:</label></td>
					<td><input type="file" name="myFile" /></td>
				</tr>
				<tr>
					<td><label>爱好:</label></td>
					<td>
						<input type="checkbox" name="hobby" id="" value="运动" />运动 
						<input type="checkbox" name="hobby" id="" value="聊天" />聊天
						<input type="checkbox" name="hobby" id="" value="玩游戏" />玩游戏
					</td>
				</tr>
				<tr>
					<td><label>出生日期:</label></td>
					<td>
						<input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />年
						<select name="month">
							<option value ="0">[选择月份]</option>
							<option value ="1">1月</option>
							<option value ="2">2月</option>
							<option value ="3">3月</option>
							<option value ="4">4月</option>
							<option value ="5">5月</option>
							<option value ="6">6月</option>
							<option value ="7">7月</option>
							<option value ="8">8月</option>
							<option value ="9">9月</option>
							<option value ="10">10月</option>
							<option value ="11">11月</option>
							<option value ="12">12月</option>
						</select>
						<input type="text" size="1" name="day" placeholder="dd"/>日
					</td>
				</tr>
			</table>
			<input type="image" src="img/submit.gif" value="提交" />
			<input type="image" src="img/reset.gif" onclick="reset();return false;" value="重填" />		
		</form>
		</center>
	</body>
</html>

若觉得左边的标签左对齐不好看,也可以在 < td >标签中加入align=“right”,使文字右对齐

<td align="right"><label for="firstname">名字:</label></td>

HTML中的表单Form实现居中效果

到此这篇关于HTML中的表单Form实现居中效果的文章就介绍到这了,更多相关HTML表单Form居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
CSS filter 有什么神奇用途
HTML5来实现本地文件读取和写入的实现方法
May 25 #HTML / CSS
详解CSS不受控制的position fixed
May 25 #HTML / CSS
详解CSS伪元素的妙用单标签之美
浅谈由position属性引申的css进阶讨论
详解CSS玩转图片Base64编码
You might like
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php获取系统变量方法小结
2015/05/29 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
工商管理专业应届生求职信
2013/11/04 职场文书
文明礼仪标语
2014/06/13 职场文书
动物科学专业求职信
2014/07/27 职场文书
债务纠纷委托书
2014/08/30 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
k8s部署redis cluster集群的实现
2021/06/24 Redis
Java中的随机数Random
2022/03/17 Java/Android
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python