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 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
Discuz! Passport 通行证整合
2008/03/27 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
python常见数制转换实例分析
2015/05/09 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python tkinter常用操作代码实例
2020/01/03 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
旅游节目策划方案
2014/05/26 职场文书
英语感谢信范文
2015/01/20 职场文书
心术观后感
2015/06/11 职场文书
运动会广播稿200字
2015/08/19 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS