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的新特性
Sep 05 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 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 session机制
2011/07/17 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
高一地理教学反思
2014/01/18 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
教师四风问题整改措施
2014/09/25 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2014年教研工作总结
2014/12/06 职场文书
新员工考核评语
2014/12/31 职场文书
重阳节简报
2015/07/20 职场文书
高中信息技术教学反思
2016/02/16 职场文书
win10清理dns缓存
2022/04/19 数码科技