{ويژه} آموزش های کاربردی و کامل کامپوننت فرم ساز آر اس فرم RsForm

[محمدسلیمانی]

سلام و خسته نباشید قبلا اموزش طرح بندی رو منتشر کرده بودم اما بخاطر سوالاتی که پرسیده میشد
یه آموزش دیگه که سعی کردم خیلی حیلی واضح باشه منتشر کنم

خوب میریم سر اصل مطلب

اول از همه همونطور که میدونید اگر از کد CSS در فرم استفاده نکنید قالب فرم از css قالب پشتیبانی میکنه
و برای اینکه قالب فرم رو سفارشی کنیم
فرم مربوطه > خواص > Javascript و css > در کادر مربوط به css این کد را کپی میکنیم

کد: (انتخاب همه)

<style type="text/css">
.formFieldset {
background:none repeat scroll 0 0 #92d5f4;
border:1px solid #000000;
margin:0 auto;
padding:10px;
width:290px;
}

.formFieldset fieldset {
border:1px solid #FFFFFF;
display:block;
font-family:verdana,sans-serif;
line-height:1.5em;
margin-bottom:0.5em;
padding:5px;
width:270px;
}

.formFieldset fieldset#header {
background:none;
}

.formFieldset fieldset#personal {
background:url("images/user1.jpg") no-repeat scroll 350px 10px transparent;
}

.formFieldset fieldset#information {
background:url("images/email.jpg") no-repeat scroll 320px 10px transparent;
}

.formFieldset fieldset#footer {
background:none;
}

.formFieldset legend {
background:url("images/leg.jpg") repeat-x scroll right center #FFFFFF;
border:3px solid #FFFFFF;
font-family:georgia,sans-serif;
font-size:1.1em;
font-weight:bold;
margin-bottom:5px;
padding:3px;
width:250px;
}
</style>

در خط سوم کد رنگ پس زمینه را میتوانید تغییر دهید
[code]
background:none repeat scroll 0 0 #92d5f4;

در خط چهارم خط دور کل فرم یا حاشیه بکگراند رو میتونید تغییر بدید.

کد: (انتخاب همه)

border:1px solid #000000;

در خط دوازده میتونید خط دور هر کدام از فیلدها رو تغییر بدید

کد: (انتخاب همه)

border:1px solid #FFFFFF;

توضیح برای ضخیم شدن خط ها میتونید شماره قبل از px رو تغییر بدید

خوب بخش دوم میرسیم که کادر بندی فرم

برای این کار

به فرم مربوطه > خواص > طرح بندی > در کادر HTML Layout (در این آموزش از طرح بندی (XHTML)دو سطر استفاده کردم)

نمیخوام پیچیدش کنم واسه همون خیلی رون پیش میرم (بی کلاسی نباشه )

اول جایی که میخوای کادر ایجاد کنید این کد رو کپی کنید

کد: (انتخاب همه)

<fieldset id="personal">

اگر میخوای کار یه عنوان داشته باشه هم این کد هم خط زیرش اظافه کن

کد: (انتخاب همه)

<legend>عنوان دلخواه </legend>

همونطور که میبینید میتونید عنوان دلخواه هم به کادر خودمون اضافه کنیم

و در نهایت انتهای جایی که میخوایم کادر به اونجا ختم بشه این کد را اضافه کنید.

کد: (انتخاب همه)

</fieldset>

خوب تا اینجا کار تمومه فقط من یه توضیح اضافه هم بدم که سردر گم نشید

مثلا من میخوام یک کادر کلی به فرمم بدم و دقیقا از همونجا یه کادر بکشم برای بخش اول فرمم
کد رو این شکلی وارد میکنم

کد: (انتخاب همه)

<fieldset id="personal">
<legend>عنوان دلخواه</legend>
<fieldset id="personal">

و یک کد

کد: (انتخاب همه)

</fieldset>

به انتهایی فرمم اضافه میکنم

و یک کد

کد: (انتخاب همه)

</fieldset>

به انتهای جایی که میخوام کارد بخش اول بسته بشه

و اگر بخوام کادر بعدی از انتهای کادر بخش اول باز بشه
کد رو این شکلی وارد میکنم

کد: (انتخاب همه)

</fieldset>
<fieldset id="personal">
<legend>نرخ و تعداد</legend>

نتیجه نهایی



نمایش آنلاین
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.