表单对齐，送给新手~

最新推荐文章于 2024-04-30 22:06:17 发布
最新推荐文章于 2024-04-30 22:06:17 发布
阅读量1.1w 收藏 4
点赞数 1
分类专栏： 表单对齐 文章标签： class xhtml action email div float



这是一个右端的输入框对齐，文字向右对齐的登录表单，在DIV+CSS中控制它们还费了一点时间来折腾，下面整理出来让大家了解，其中CSS要注意的几个地方就是文中红字的地方。

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
input.required{border:#999 1px solid; height:16px; width:120px;}
label{ text-align:right; float:left; width:60px;}
.sub{margin-left:50px;}
.int{margin:5px auto;}


下面是具体的编码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单对齐</title>
<style type="text/css">
body {font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
input.required{border:#999 1px solid; height:16px; width:120px;}
label{text-align:right; width:60px; float:left;}
.sub{margin-left:50px;}
.int{margin:5px auto;}
</style>
</head>

<body>

<form method="post" action="#">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮　箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="pefsoninfo">个人资料：</label>
<input type="text" id="pefsoninfo" class="required" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" />
<input type="reset"  value="重置" id="res" />
</div>
</form>

</body>
</html>



下面再把一个复杂点的加进来：




基本的xhtml：

  1. <h3>已注册用户登录</h3><span id="more-25"></span>
  2.    <form action="" method="post" id="Login">
  3.    <fieldset>
  4.    <legend>用户登录</legend>
  5.    <div>
  6.    <label for="Name">用户名</label>
  7.    <input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
  8.    </div>
  9.    <div>
  10.    <label for="password">密码</label>
  11.    <input type="password" name="password" id="password" size="18" maxlength="15" /><br />
  12.    </div>
  13.    <div class="cookiechk">
  14.    <label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
  15.    <input name="login791" type="submit" class="buttom" value="登录" />
  16.    </div>
  17.    <div class="forgotpass"><a href="#">您忘记密码?</a></div>
  18.    </fieldset>
  19.    </form>

看了代码，发现标单描述文字都在< label >< /label >中，只要让< label >< /label >标签浮动左对齐，fieldset包含的< div >清除浮动，就可以实现我们常见的那类布局。

下面是基本的CSS：

  1. fieldset label {
  2.    float:left;
  3.    width:120px;
  4.    text-align:right;
  5.    padding:4px;
  6.    margin:1px;
  7. }
  8. fieldset div {
  9.    clear:left;
  10.    margin-bottom:2px;
  11. }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;
}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
h3 {
font-size:14px;
font-weight:bold;
}
pre,p {
color:#1E7ACE;
margin:4px;
}
input, select,textarea {
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:450px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px solid #A4CDF2;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #A4CDF2;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #A4CDF2;
background:#fff;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="formwrapper">
<h3>已注册用户登录</h3>
<form action="" method="post" id="Login">
<fieldset>
<legend>用户登录</legend>
<div>
<label for="Name">用户名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" />
<br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="选择是否记录您的信息">记住我</a></label>
<input name="login" type="submit" class="buttom" value="登录" />
</div>
<div class="forgotpass"><a href="#">您忘记密码?</a></div>
</fieldset>
</form><br />
<h3>未注册创建帐户</h3>
<form action="" method="post" id="apForm">
<fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p>
<div>
<label for="Name">用户名</label>
<input type="text" name="cr_Name" id="cr_Name" value="" size="20" maxlength="30" />
*(最多30个字符)<br />
</div>
<div>
<label for="Email">电子邮箱</label>
<input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br />
</div>
<div>
<label for="password">密码</label>
<input type="password" name="cr_password" id="cr_password" size="18" maxlength="15" />
*(最多15个字符)<br />
</div>
<div>
<label for="confirm_password">重复密码</label>
<input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />
*<br />
</div>
<div>
<label for="AgreeToTerms">同意服务条款</label>
<input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
<a href="#" title="您是否同意服务条款">先看看条款？</a> * </div>
<div class="enter">
<input name="create791" type="submit" class="buttom" value="提交" />
<input name="Submit" type="reset" class="buttom" value="重置" />
</div>
<p><strong>* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.<br />
* 这些条款可能在未经您同意的时候进行修改.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>
咸菜一根
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
form-wrapper-js:表单的JS抽象
04-24
表单包装器js 一个轻量级的库，它以便捷的方式创建表单系统，而没有依赖关系和魔术代码。 状态：测试版 当前版本为Beta，大多数功能都稳定，但可能仍然存在错误，并且api可能会有所变化。 对于0.x，移至0.x分支。 :artist_palette: 操场 Vue- //codesandbox.io/s/5x96q83yvp module 2Fsrc/App.vue :optical_disk: 安装 npm install --save form-wrapper-js@next # for 1.x // or npm install --save form-wrapper-js # for 0.x 或者 yarn add form-wrapper-js@next # for 1.x // or yarn add form-wrapper-js # for 0.x :open_book: 文献资料 请。 :rocket: 基本用法 这是VUE的快速
2021-08-03
hahah1234111111的博客
08-03 113
推拉动画的登录注册页面 <template> <div class="body"> <div class="form-wrapper"> <transition name="form-wrapper"> <div class="formbox" v-if="show" key="login"> <div class="header">登录</div>
表单元素和文字垂直居中对齐问题解决整理
09-25
为了使表单元素和文字都垂直居中对齐，当文本框和下拉框都没问题，但是单选框和复选框就了，经过反复测试终于完整搞定与大家分享，感兴趣的各位可不要错过了哈
动态表单以及多表单校验(一)
潇湘子的博客
05-23 1405
需求：在弹出的Dialog中，点击新增按钮，生成一个或多个表单，可以取消，保存和关闭(取消，保存，关闭都需要重置表单value) 分析：既然是多表单，那么肯定是放到数组中用来保存，然后点击新增按钮，会push一个数组对象进去 实现： 1.定义表单组件: FormComponent.vue <section class="form-wrapper"> <el-form :model="dynamicForm" label-width="100px" :rules="rules
html5 css3日历样式,css3制作日历风格登陆表单
weixin_28921115的博客
06-27 320
好久没有发布案例了，今天发布一个@白牙同学制作的登录表单，这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签，配合CSS3的伪类来制作。详细制作请查看Demo制作过程。HTML 结构Log in这样的结构，对大家来说都很简单，基中“div.form-wrapper”主要用来实现表单纸张层叠效果。其中最为关键的是链条效果，这里使用了一个div加上5个span实现：CS...
表单对齐方式
m0_72959610的博客
08-29 2905
表单对齐方式
html表单互动,互动Form表单
weixin_30705125的博客
06-20 159
csshtml, body{width: 100%;height: 100%;margin: 0;padding: 0;font-family: 'Open Sans', sans-serif;background-color: #3498db;}h1, h2, h3, h4, h5 ,h6{font-weight: 200;}a{text-decoration: none;}p, li, a{f...
表单对齐操作
qq_57220516的博客
02-28 5234
表单对齐，制作注册界面
行内标签与块级标签、form标签、wrapper网页布局--html基本知识（学习笔记）
热门推荐
qq_26780317的博客
05-14 1万+
最近，又回顾学习了html的一些基本知识，在此mark一下：一、块级标签、行内标签与自闭合标签 ①块级标签：占据一整行，高度、行高、内边距和外边距都可以改变，宽度和游览器的宽度一样，和内容无关，可以容纳块级标签和其他行内标签； ②行内标签：只占内容宽度大小、高度、行高，内边距和外边距是可以部分可以改变的。 行内元素一般是内容的容器，而块级元素一般是其他容器...
实现表单对齐排列布局
月来better
12-23 2895
项目中几乎都设计到表单这一功能，表单布局也是必不可少的一个话题，下面要实现的就是表单对齐排列布局 第一种实现方式： <div id="form"> <div> <label>姓名：</label> <input type="text" value="" /> </div> <div> <label>出生地：</label> <input type="text" value
marionette-form-wrapper:木偶验证表单包装器
05-02
FormWrapper组件 FormWrapper背后的FormWrapper是有一个黑匣子可以为我们验证视图。 FormWrapper工作方式是将一个视图（ ItemView ， CollectionView或CompositeView ）作为输入，并返回另一个视图，然后可以在其上调用render或show 。 依存关系 先决条件 如果您传递了ItemView ： 需要绑定一个模型 模型需要使用Backbone.Validation指定验证规则 您要验证的每个字段都需要具有与模型中的属性名称匹配的名称属性 例子 模板： <input type="text" name="firstName" /> <input type="text" name="lastName" /> 模型： var Model = Backbone.Model.extend({ validation: {
表单元素与提示文字无法对齐的问题
09-28
在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
表单checkbox和radio文字对齐的代码
09-28
表单元素input、文字完美垂直居中对齐方法.
表单元素对齐
05-27
NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/565790
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）
09-25
在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。
常见的 HTML 标准
csdn_ad986ad的博客
04-30 756
HTML（Hypertext Markup Language）有多个版本和标准。
数据更新至2020年历年电力生产和消费弹性系数.xls
最新发布
05-05
数据来源：中国电力统计NJ-2021版
数据更新至2020年电力建设本年投资完成情况(设备工器具购置).xls
05-05
数据来源：中国电力统计NJ-2021版
词根单词 2.2.4 修改版.apk
05-04
词根单词 2.2.4 修改版.apk
表单标题和表单对齐的HTML代码
05-16
以下是一个表单标题和表单对齐的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>表单标题和表单对齐的HTML代码示例</title> </head> <body> <h2>用户登录</h2> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> </body> </html> ``` 上述代码中，`<h2>` 标签用于显示表单标题，`<form>` 标签用于创建表单，`<label>` 标签用于描述每个表单输入项，`<input>` 标签用于创建输入项，`<br>` 标签用于创建换行符。在每个 `<label>` 标签后面都有一个 `<input>` 标签，这样可以让每个输入项和对应的标签对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值