کامروا
چهارشنبه 22 آذر 1391, 13:43 عصر
سلام
یک فرم ثبت نام ساده طراحی کردم.
میخواستم ببینم که آیا اصولی طراحیش کردم یا نه.
لطفا کدها رو بررسی کنید و نقص های کد نویسیم رو بیان کنید.
این عکس از ظاهرش :
http://jdaneshju.com/up/images/ysesbxg7kq42k3bf0ju1.jpg
این کدهای HTML :
<html>
<head>
<title>فرم ثبت نام</title>
<meta charset="utf-8" />
</head>
<body dir="rtl">
<div id="reg-form">
<fieldset>
<legend>فرم ثبت نام </legend>
<div class="field-container"><label>نام کاربری : </label><input type="text" /><br /></div>
<div class="field-container"><label>رمز عبور : </label><input type="password" /><br /></div>
<div class="field-container"><label>تکرار رمز عبور : </label><input type="password" /><br /></div>
<div class="field-container"><label>ایمیل : </label><input type="text" /><br /></div>
<div class="field-container"><label>شهر : </label>
<select>
<option>جهرم</option>
<option>شیراز</option>
<option>تهران</option>
<option>کرمان</option>
</select>
<br /></div>
<div class="field-container">
<label>جنسیت : </label>
<form action="">
<input type="radio" name="sex" />مرد
<input type="radio" name="sex" />زن<br />
</form>
</div>
<div class="field-container">
<label>آدرس : </label>
<textarea cols="25" rows="4">
</textarea><br />
</div>
<div class="line"></div>
<div class="field-container"><input type="submit" value="ثبت نام"/></div>
<div class="field-container"><input type="submit" value="انصراف"/></div>
</fieldset>
</div>
</body>
</html>
و این هم کدهای CSS :
<style>
* { margin: 0; padding: 0; font-family: tahoma;}
#reg-form {
width: 600px;
min-height: auto;
background-image: -webkit-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
background-image: -moz-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
background-image: -o-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
margin: 10px auto;
border: 8px #ccc solid;
}
fieldset {
width: 70%;
margin: 50px 15%;
padding-top: 15px;
padding-bottom: 15px;
border: 2px groove #555;
}
.field-container {
position: relative;
width: 90%;
margin: 3% 0;
}
.field-container label {
float: right;
margin-right: 5px;
}
.field-container input[type=text],
.field-container input[type=password],
.field-container select {
position: absolute;
padding: 4px;
border: 1px solid #ccc;
outline: none;
border-radius: 7px;
width: 160px;
left: 80px;
}
.field-container textarea {
text-align: right;
border: 1px solid #ccc;
border-radius: 7px;
margin-right: 80px;
}
.field-container input[type=submit] {
float: right;
width: 100px;
height: 25px;
margin-right: 70px;
}
.field-container input[type=text]:focus {
background-color: #eea;
}
.field-container input[type=radio] {
margin-right: 70px;
}
.line {
background-color: #999;
width: 100%;
height: 2px;
}
</style>
تشکر
یک فرم ثبت نام ساده طراحی کردم.
میخواستم ببینم که آیا اصولی طراحیش کردم یا نه.
لطفا کدها رو بررسی کنید و نقص های کد نویسیم رو بیان کنید.
این عکس از ظاهرش :
http://jdaneshju.com/up/images/ysesbxg7kq42k3bf0ju1.jpg
این کدهای HTML :
<html>
<head>
<title>فرم ثبت نام</title>
<meta charset="utf-8" />
</head>
<body dir="rtl">
<div id="reg-form">
<fieldset>
<legend>فرم ثبت نام </legend>
<div class="field-container"><label>نام کاربری : </label><input type="text" /><br /></div>
<div class="field-container"><label>رمز عبور : </label><input type="password" /><br /></div>
<div class="field-container"><label>تکرار رمز عبور : </label><input type="password" /><br /></div>
<div class="field-container"><label>ایمیل : </label><input type="text" /><br /></div>
<div class="field-container"><label>شهر : </label>
<select>
<option>جهرم</option>
<option>شیراز</option>
<option>تهران</option>
<option>کرمان</option>
</select>
<br /></div>
<div class="field-container">
<label>جنسیت : </label>
<form action="">
<input type="radio" name="sex" />مرد
<input type="radio" name="sex" />زن<br />
</form>
</div>
<div class="field-container">
<label>آدرس : </label>
<textarea cols="25" rows="4">
</textarea><br />
</div>
<div class="line"></div>
<div class="field-container"><input type="submit" value="ثبت نام"/></div>
<div class="field-container"><input type="submit" value="انصراف"/></div>
</fieldset>
</div>
</body>
</html>
و این هم کدهای CSS :
<style>
* { margin: 0; padding: 0; font-family: tahoma;}
#reg-form {
width: 600px;
min-height: auto;
background-image: -webkit-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
background-image: -moz-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
background-image: -o-linear-gradient(top,#eee 0%,#fff 50%,#fff 51%,#eee 100%);
margin: 10px auto;
border: 8px #ccc solid;
}
fieldset {
width: 70%;
margin: 50px 15%;
padding-top: 15px;
padding-bottom: 15px;
border: 2px groove #555;
}
.field-container {
position: relative;
width: 90%;
margin: 3% 0;
}
.field-container label {
float: right;
margin-right: 5px;
}
.field-container input[type=text],
.field-container input[type=password],
.field-container select {
position: absolute;
padding: 4px;
border: 1px solid #ccc;
outline: none;
border-radius: 7px;
width: 160px;
left: 80px;
}
.field-container textarea {
text-align: right;
border: 1px solid #ccc;
border-radius: 7px;
margin-right: 80px;
}
.field-container input[type=submit] {
float: right;
width: 100px;
height: 25px;
margin-right: 70px;
}
.field-container input[type=text]:focus {
background-color: #eea;
}
.field-container input[type=radio] {
margin-right: 70px;
}
.line {
background-color: #999;
width: 100%;
height: 2px;
}
</style>
تشکر