使HTML中的表单Form居中

之前碰到一个作业，给了一张图片，让按照图片样式做一个表单，但在所有功能都实现后，发现无法让表单居中，一直缩在左上角，看起来很难看。在经过了各种修改后，终于成功将表单居中，下面分享一下我所经历过程中的错误与最终结果。（因为做这部分作业的时候还没有学 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实现居中效果相关推荐

jsp中的表单form action指向servlet类
1.文件 2.页面联系 addStudent.jsp是学生信息添加页面,当信息填写完毕点击提交按钮时,AddStudentServlet处理用户请求,处理完毕后跳转到message1.jsp页面. A ...
html表单对于网页目地,html - 表单form
一.表单功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
form表单、控制器中接收表单提交数据的4种方式
Form表单这篇文章主要讲的是form表单的提交之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
关于表单form元素中onsubmit事件处理机制的认识
博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件 ...
html css移动form表单位置,表单form的研究
起因最近经常在群里看到诸如以下这些问题: 怎么按键盘的Enter键提交表单呢? 移动端怎么聚焦时让键盘变成数字键呢? 移动端如何绑定键盘右下角[提交按钮]事件? 移动端键盘右下角[提交]如果换成[搜 ...
在django中实现表单
http://forreal.blog.51cto.com/3205122/586035 最近用Django 写了一个网站,现在来分享一下对Django form 的一些心得. 一,创建一个表单创建 ...
django一个html先后两个form,Django教程（三）- Django表单Form
目录: 1.Form 基本使用 django中的Form组件有以下几个功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 2.Form中 ...
[RFC1867] HTML中基于表单的文件上传
网络工作组:E. Nebel 征求意见:1867 L. Masinter 类别:试验施乐公司十一月 1995 HTML中基于表单的文件上传这个备忘录的状态这个备忘录为互联网社区定义了一个试验协 ...

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