三行css使表单对齐

<form>
		<label>员工号:</label>
		<input type="text" name="wid" class="wid" /><span class="wierror"></span><br/>
		<label>用户名:</label>
		<input type="text" name="wname" class="wname" /><span class="wnerror"></span><br/>
		<label>密码:</label>
		<input type="password" name="wpassword" class="wpassword" /><span class="wperror"></span><br/>
		<input type="submit" id="submit" value="登陆"/>
	</form>
label {
    display:inline-block;
    width: 65px;
    text-align: right;
}

结果

时间: 2024-10-27 07:40:56

三行css使表单对齐的相关文章

(10)用css建立表单

1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票.网站留言板等. 表单用于向服务器传输数据. 表单中的元素很多,包括常用的输入框.文本框.单选项.复选框.下拉菜单.和按钮等.  html部分: Form:定义表单的范围. Input:定义表单中的各个具体表单元素. name:名称,设定此一栏的名称,程式中常会用到. size:数值,设定此一栏位显

纯CSS实现表单验证

ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css selectors level 4中的表单相关的伪类选择器. 案例欣赏 代码我同样放到了codepen,大家可以在线研究,或下载收藏. 知识解析 关键在于使用css selectors levle4里的一些伪类实现表单验证,这些伪类有: :required和:optional :in-range和out-o

利用CSS进行表单样式定义

我们在表单使用过程中,常常需要控制表单样式,如表单控件长度,显示样式,提醒背景色,甚至整个表单的字体和统一样式等. 这些其实都可以通过CSS来实现,使我们的表单看起来更漂亮,1.利用DIV控制输入控件长度:    如上图,表单姓名和出生日期字段看起来长短不一,并且太长,不美观,我们可以通过DIV的CSS样式进行调整. 上面的样式,我们可以通过在字段上加入DIV标签,并且设置DIV的样式,如长度150px,显示方式为同一行显示display: inline; 这样就实现了控件统一长度的效果: 2.

CSS之表单元素

表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站</h3> 3                         <form> 4                                 所有的表单内容,都要写在form标签里面 5                         </form> 6          

CSS实现表单

效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com

简单的表单对齐

先来看看最终的效果: 这里主要关注如何将"用户名""请设置密码"以及他们紧跟的input元素设置为图中的对齐样式. 先来看看html代码: 1 <div class="item"> 2 <label><span>*</span>用户名:</label><input type="text" name="nick" id="nick&q

css修改 表单placeholder的样式

1.表单中经常出现提示性文字,placeholder是最常用的一种方式,下面就来讲解一下如何设置placeholder的样式 ::-webkit-input-placeholder{  color:red;padding:5px; } :-moz-placeholder{  color:red;padding:5px;   } ::-moz-placeholder{  color:red;padding:5px;   } :-ms-input-placeholder{ color:red;pad

使用js使表单自动提交

1 function sub(){ 2 document.yeepay.submit(); 3 } 4 setTimeout(sub,1000);//以毫秒为单位的.1000代表一秒钟.根据你需要修改这个时间. 5 //-->

HTML&amp;CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me