写的一个注册界面如下:
<form action="registPro" method="post" id="regist"> <div> <input type="text" id="name" name="user.username" placeholder="用户名"> </div> <span id="msg01" class="msg"></span> <div> <input type="password" id="pass" name="user.pass" placeholder="设置密码"> </div> <span id="msg02" class="msg"></span> <div> <input type="submit" id="submit" value="注 册" class="button"/> </div>
<style type="text/css"> input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{text-align:center;line-height:60px;} .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>
.msg{color:red; font-size:1pt; text-align:center; display:block;}
.msg{color:red; font-size:1pt; text-align:center; display:block;}
.msg{color:red; font-size:1pt; text-align:center; display:block;}
.msg{color:red; font-size:1pt;display:block;width:280px;margin:0 auto;}
<div class="cen"><form action="registPro" method="post" id="regist"> <div> <input type="text" id="name" name="user.username" placeholder="用户名"> </div> <span id="msg01" class="msg">ssssss</span> <div> <input type="password" id="pass" name="user.pass" placeholder="设置密码"> </div> <span id="msg02" class="msg">ssss</span> <div class="tc"> <input type="submit" id="submit" value="注 册" class="button"/> </div> </form></div> <style type="text/css"> .tc{text-align:center;} .cen{text-align:center;margin:0 auto;width:300px;} .cen form{text-align:left;} input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{line-height:30px;} .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>
把文本框和提示框在一个父级div中,在这个父级div中设置css样式text-aline:left
如果是自己练手可以这样写,公司项目的话,可以用验证框架,很方便
参照Jquery validate
<style type="text/css">*{margin:0px;padding:0px;} form{width:282px;margin:auto;} input{width:280px;height:30px} .msg{color:red; font-size:15px;} div{line-height:60px;} .button{margin-left:16px;background-color:OrangeRed;width:250px;height:30px;border:0;}</style>