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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
js 动态选中下拉框
2009/11/26 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
跟老齐学Python之for循环语句
2014/10/02 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
2014年建筑工作总结
2014/11/26 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS