<font id="zfvhr"><i id="zfvhr"><noframes id="zfvhr">
<dl id="zfvhr"><delect id="zfvhr"><meter id="zfvhr"></meter></delect></dl>
<video id="zfvhr"><i id="zfvhr"></i></video><video id="zfvhr"><i id="zfvhr"><meter id="zfvhr"></meter></i></video>
<video id="zfvhr"></video>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl><dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<dl id="zfvhr"></dl><dl id="zfvhr"><i id="zfvhr"><meter id="zfvhr"></meter></i></dl><video id="zfvhr"></video>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl><dl id="zfvhr"></dl>
<dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<video id="zfvhr"><dl id="zfvhr"><delect id="zfvhr"></delect></dl></video>
<dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"></delect></dl>
<dl id="zfvhr"></dl><dl id="zfvhr"><delect id="zfvhr"><meter id="zfvhr"></meter></delect></dl>
<dl id="zfvhr"></dl>

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

  发布时间:2021-05-25 17:04:10   作者:Lzy9912   我要评论
之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但是一直表单无法居中,在网上找了各种例子之后,终于成功,今天就来介绍一下,感兴趣的可以了解一下

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

1、刚做出来的样子

<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、经过修改后

在这里插入图片描述
 

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

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

3、使用表格布局后

在这里插入图片描述
 

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

<!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居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • 表单元素和文字垂直居中对齐问题解决整理

    为了使表单元素和文字都垂直居中对齐,当文本框和下拉框都没问题,但是单选框和复选框就了,经过反复测试终于完整搞定与大家分享,感兴趣的各位可不要错过了哈
    2013-03-21
  • 表单元素垂直居中完美解决方案

    单选框和复选框面积很小,不容易点击,造成许多用户的困扰,用户体验不佳,所以表单元素的垂直居中让很多网页布局师为之而困扰,想实现垂直居中效果还真需要一番功夫,还好
    2013-02-16

最新评论

国产女人18毛片水真多