请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
鲸云网络 管理员
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子704
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] HTML中的表单Form实现居中效果

[复制链接]
鲸云网络 发表于 2021-7-24 09:50:18 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

1、刚做出来的样子

2021052516564277.png

  1. <form>
  2.                         <label for="firstname">名字:</label>
  3.                         <input type="text" name="firstname" id="firstname" required="required" value="" /><br />
  4.                
  5.                         <label for="lastname">姓氏:</label>
  6.                         <input type="text" name="lastname" id="lastname" required="required" value="" /><br />
  7.                
  8.                         <label for="login name">登录名:</label>
  9.                         <input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)<br />
  10.                
  11.                         <label for="password">密码:</label>
  12.                         <input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)<br />
  13.                
  14.                         <label for="password2">再次输入密码:</label>
  15.                         <input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /><br />
  16.                
  17.                         <label for="myEmail">电子邮箱:</label>
  18.                         <input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)
  19.                 </form>
复制代码
最终呈现的结果。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <link rel="icon" type="text/css" href="./img/favicon.png"/>
  6.                 <title></title>
  7.         </head>
  8.         <body>
  9.                 <center>
  10.                 <form action="Success.html" target="_blank" method="get">
  11.                         <table border="0" cellspacing="" cellpadding="">
  12.                                 <tr>
  13.                                         <td><label for="firstname">名字:</label></td>
  14.                                         <td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
  15.                                 </tr>
  16.                                 <tr>
  17.                                         <td><label for="lastname">姓氏:</label></td>
  18.                                         <td><input type="text" name="lastname" id="lastname" required="required" value="" /></td>
  19.                                 </tr>
  20.                                 <tr>
  21.                                         <td><label for="login name">登录名:</label></td>
  22.                                         <td><input type="text" name="login name" required="required" pattern="^\w{4,8}$" id="login name" value="" />(可包含a-z、0-9和下划线)</td>
  23.                                 </tr>
  24.                                 <tr>
  25.                                         <td><label for="password">密码:</label></td>
  26.                                         <td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" />(至少包含6个字符)</td>
  27.                                 </tr>
  28.                                 <tr>
  29.                                         <td><label for="password2">再次输入密码:</label></td>
  30.                                         <td><input type="password" name="password2" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
  31.                                 </tr>
  32.                                 <tr>
  33.                                         <td><label for="myEmail">电子邮箱:</label></td>
  34.                                         <td><input type="email" name="myEmail" id="myEmail" value="" />(必须包含@字符)</td>
  35.                                 </tr>
  36.                                 <tr>
  37.                                         <td><label>性别:</label></td>
  38.                                         <td>
  39.                                                 <input type="radio" name="sex" id="" value="male" />男<img src="./img/Male.gif" >
  40.                                                 <input type="radio" name="sex" id="" value="female" />女<img src="./img/Female.gif" >
  41.                                         </td>
  42.                                 </tr>
  43.                                 <tr>
  44.                                         <td><label>头像:</label></td>
  45.                                         <td><input type="file" name="myFile" /></td>
  46.                                 </tr>
  47.                                 <tr>
  48.                                         <td><label>爱好:</label></td>
  49.                                         <td>
  50.                                                 <input type="checkbox" name="hobby" id="" value="运动" />运动
  51.                                                 <input type="checkbox" name="hobby" id="" value="聊天" />聊天
  52.                                                 <input type="checkbox" name="hobby" id="" value="玩游戏" />玩游戏
  53.                                         </td>
  54.                                 </tr>
  55.                                 <tr>
  56.                                         <td><label>出生日期:</label></td>
  57.                                         <td>
  58.                                                 <input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />年
  59.                                                 <select name="month">
  60.                                                         <option value ="0">[选择月份]</option>
  61.                                                         <option value ="1">1月</option>
  62.                                                         <option value ="2">2月</option>
  63.                                                         <option value ="3">3月</option>
  64.                                                         <option value ="4">4月</option>
  65.                                                         <option value ="5">5月</option>
  66.                                                         <option value ="6">6月</option>
  67.                                                         <option value ="7">7月</option>
  68.                                                         <option value ="8">8月</option>
  69.                                                         <option value ="9">9月</option>
  70.                                                         <option value ="10">10月</option>
  71.                                                         <option value ="11">11月</option>
  72.                                                         <option value ="12">12月</option>
  73.                                                 </select>
  74.                                                 <input type="text" size="1" name="day" placeholder="dd"/>日
  75.                                         </td>
  76.                                 </tr>
  77.                         </table>
  78.                         <input type="image" src="img/submit.gif" value="提交" />
  79.                         <input type="image" src="img/reset.gif" onclick="reset();return false;" value="重填" />               
  80.                 </form>
  81.                 </center>
  82.         </body>
  83. </html>
复制代码


若觉得左边的标签左对齐不好看,也可以在 < td >标签中加入align=“right”,使文字右对齐


[size=1em] 2021052516564380.png




回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号