Early intermediate practice, Master friends can drift. Requirements to achieve the results shown in the following figure, you may wish to try ~
The code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<div id= "Formwrapper" >
<form action= "" method= "Post" name= "Aplogin" id= "Aplogin" >
<fieldset>
<legend> User Login </legend>
<div>
<label for= "name" > Username </label>
<input type= "text" name= "name" id= "name" size= "@" maxlength= "/>"
<br/>
</div>
<div>
<label for= "password" > Password </label>
<input type= "password" name= "password" id= "password" size= "a" maxlength= "/>"
<br/>
</div>
<div class= "Cookiechk" >
<label>
<input type= "checkbox" Name= "Cookieyn" id= "Cookieyn" value= "1"/>
<a href= "#" title= "choose whether or not to record your information" > Remember me </a></label>
<input name= "login791" type= "Submit" class= "Buttom" value= "Login"/>
</div>
<div class= "Forgotpass" ><a href= "#" > You forgot password?</a></div>
</fieldset>
</form>
<br/>
<form action= "" method= "Post" name= "Apform" id= "Apform" >
<fieldset>
<legend> User Registration </legend>
<p><strong> your email will not be published, but you must fill in .</strong> before you sign up please read the terms of service carefully .</p>
<div>
<label for= "name" > Username </label>
<input type= "text" name= "name" id= "name" value= "" size= "" Maxlength= "/>"
* (up to 30 characters) <br/>
</div>
<div>
<label for= "Email" > E-mail </label>
<input type= "text" name= "email" id= "email" value= "" size= "" maxlength= ","/> "
*<br/>
</div>
<div>
<label for= "password" > Password </label>
<input type= "password" name= "password" id= "password" size= "a" maxlength= "/>"
* (up to 15 characters) <br/>
</div>
<div>
<label for= "Confirm_password" > Duplicate password </label>
<input type= "Password" name= "Confirm_password" id= "Confirm_password" size= "a" maxlength= "/>"
*<br/>
</div>
<div>
<label for= "Agreetoterms" > agree to Terms of service </label>
<input type= "checkbox" Name= "Agreetoterms" id= "Agreetoterms" value= "1"/>
<a href= "#" title= "Do you agree to terms of service" > First look at the terms? </a> * </div>
<div class= "Enter" >
<input name= "create791" type= "Submit" class= "Buttom" value= "submitted"/>
<input name= "Submit" type= "reset" class= "buttom" value= "reset"/>
</div>
<p><strong>* when submitting your registration information, we think you have agreed to our terms of service .<br/>
* These terms may be modified without your consent .</strong></p>
</fieldset>
</form>
</div>
</body>