PDA

View Full Version : ایجاد فرم های ورود با div یا table



lady64
دوشنبه 08 خرداد 1391, 14:47 عصر
من طراحی کلی سایت رو با div انجام دادم . اما تعداد فرم های ورودی برای درج داده جدید در پایگاه زیاد دارم .
میخوام این رو هم با div طراحی کنم ، ولی نسبت به table خیلی زمان بیشتری برای درست کردنش میبره.
1. میخوام بدونم شما هم برای فرمهای مثلا ثبت نام از div استفاده میکنید ؟
2. تو این نمونه که گذاشتم ، نام کاربری ، رمز عبور و تلفن از سمت بالا به div قبلی نمیچسبه . چرا ؟ میشه یه نمونه بزارید



<!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>Untitled Document</title>
<style type="text/css">
.center2{padding:0; margin-top:0px; margin:auto; maposition:relative;height:300px; background-color:#FaFFFF;width:400px; float:none; border:1px #72B6D3 solid; }
.s2{ position:relative;height:40px; background-color:#FaFFFF;width:400px; float:none; border:1px #72B6D3 solid; padding-top:15px; text-align:center}
.s1{ position:relative;height:40px; background-color:#FaFFFF;width:100px; float:right; border-left:1px #72B6D3 solid; padding-top:15px; text-align:center; top:0px; border-bottom: 1px #72B6D3 solid }
.top2{padding:0;margin-top:0px; margin:auto;position:relative;height:25px; background-image:url(picture/blue.jpg);width:400px; float:none; border:1px #72B6D3 solid;}
.botom2{padding:0;margin-top:0px; margin:auto;position:relative;height:25px;backgrou nd-image:url(picture/blue.jpg);width:400px; float:none; border:1px #72B6D3 solid;}
</style>
</head>
<body>
<div class="top2"><label class="label2">رمز و نام کاربری اولیه خود را وارد کنید</label></div>
<!-- end top -->
<div class="center2">

<div class="s2">
<div class="s1"><span> نام کاربری</span></div>
<input type="text" name="textfield" id="textfield" />

</div>
<div class="s2"><div class="s1"><span>رمز عبور</span></div>
<input type="text" name="textfield" id="textfield" />
</div>
<div class="s2"><div class="s1"><span>رمز عبور</span></div>
<input type="text" name="textfield" id="textfield" />
</div>
</div>
</div>
<!-- end center -->
<div class="botom2"></div>
<p>
<!-- end botom -->
</body>
</html>

Saber Mogaddas
دوشنبه 08 خرداد 1391, 15:51 عصر
سلام
به این صورت کد هاتون رو قرار بدید ..


!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>Untitled Document</title>
<style type="text/css">
.center2{padding:0; margin-top:0px; margin:auto; maposition:relative;height:300px; background-color:#FaFFFF;width:400px; float:none; border:1px #72B6D3 solid; }
.s2{ position:relative;height:40px; background-color:#FaFFFF;width:400px; float:none; border:1px #72B6D3 solid;text-align:center}
.s1{ position:relative;height:25px; background-color:#FaFFFF;width:100px; float:right; border-left:1px #72B6D3 solid; padding-top:15px; text-align:center; top:0px; border-bottom: 1px #72B6D3 solid }
.top2{padding:0;margin-top:0px; margin:auto;position:relative;height:25px; background-image:url(picture/blue.jpg);width:400px; float:none; border:1px #72B6D3 solid;}
.botom2{padding:0;margin-top:0px; margin:auto;position:relative;height:25px;backgrou nd-image:url(picture/blue.jpg);width:400px; float:none; border:1px #72B6D3 solid;}
</style>
</head>
<body>
<div class="top2"><label class="label2">رمز و نام کاربری اولیه خود را وارد کنید</label></div>
<!-- end top -->
<div class="center2">

<div class="s2">
<div class="s1"><span> نام کاربری</span></div>
<input type="text" name="textfield" id="textfield" />

</div>
<div class="s2"><div class="s1"><span>رمز عبور</span></div>
<input type="text" name="textfield" id="textfield" />
</div>
<div class="s2"><div class="s1"><span>رمز عبور</span></div>
<input type="text" name="textfield" id="textfield" />
</div>
</div>
</div>
<!-- end center -->
<div class="botom2"></div>
<p>
<!-- end botom -->
</body>
</html>

و برای margin or padding دادن به تکست باکس یا اون رو داخل یه دیو قرار بدید و به اون دیو استایل بدید و یا به خود تکست باکس cssclass بدید و مکان تکست باکس رو با استایل اون کلاس تنظیم کنید..
موفق باشی..