جلسه ی پانزدهم: تگ Form (پیشرفته)

تگ فرم پیشرفته در HTMLدر آموزش قبلی تگ های input، textarea و button را آموزش دادیم که به وسیله ی آن ها می توان یک فرم کامل را طراحی نمود در این بخش می خواهیم تگ های select، option، optgroup، fieldset و label ر آموزش دهیم که به کمک این تگ ها می توان یک Form حرفه ای ساخت پس به این آموزش دقت کفافی را داشته باشید.

 

تگ Lable

از تگ Lable به عنوان یک یک برچسب برای ایجاد فرم استفاده می شود. این تگ از نوع تگ های جفتی می باشد، این تگ به وسیله ی for و id به تگ های دیگر متصل می شود به گونه ای که for را در داخل تگ lable و id را در داخل تگ تگ مورد نظر خود فراخوانی می کنیم و به هر دو یک مقدار واحد می دهیم.

چرا از تگ Lable استفاده می کنیم؟

شاید فکر کنید که چون بدون این تگ می توان یک فرم ایجاد کرد نباید از آن استفاده کرد اما به دو دلیل نیاز است که از این تگ در فرم های خود استفاده کنید.

دلیل اول: با استفاده از تگ Lable نوشته ای که برای قسمتی از فرم خود قرار می دهیم به قسمت مورد نظر خود وصل می کنیم و به از این طریق اگر افرادی که با ماوس کار می کنند بر روی نوشته هم کلیک کنند قسمت مورد نظر متصل به lable نیز فعال خواهد شد به مثال زیر توجه کنید:

<label for="rabet">یادداشت:</label>

<input type="text" name="lable" id="rabet"/>

خروجی کد بالا:

تگ Lable

دلیل دوم: اما انعطاف پذیری در استفاده از تگ Lable را زمانی درک می کنیم که کارابران ما علاقه به استفاده از کیبورد به جای ماوس داشته باشند در این صورت می توانیم یک کلید میانبر برای دسترسی به تگ مورد نظر خود ایجاد نماییم. به مثال زیر توجه نمایید:

کد HTML:


<form action="#">

<label for="rabet1"><u>M</u>ale:</label>

<input type="radio" name="sex" value="male" id="rabet1" accesskey="m">

<label for="rabet2">Fem<u>a</u>le:</label>

<input type="radio" name="sex" value="female" id="rabet2" accesskey="a">

</form>


خروجی کد بالا:

تگ Lable

همانطور که می بینید برای مشخص کردن کلمه ی کلیدی ابتدا درون تگ خود از ویژگی accesskey استفاده می کنیم و حرف کلیدی را در آن قرار می دهیم سپس برای اینکه کاربر از وجود این حرف آگاه شود حرف مورد نظر خود را درون تگ <u></u> قرار می دهیم.

 

تگ fieldset و legend

از تگ fieldset برای گروه بندی عناصر در ایجاد یک فرم استفاده می کنیم که این تگ به کمک تگ legend نام گذاری می شود که هر دوی این تگ ها از نوع تگ های دوتایی می باشند. به نمونه کد زیر توجه کنید:

کد HTML:


<form action="#">


<fieldset>


<legend>بخش اول:</legend>


<label for="rabet1">نام:</label>

<input type="text" name="firstname" value="" id="rabet1">

<label for="rabet2">نام خانوادگی:</label>

<input type="text" name="lastname" value="" id="rabet2">

<label for="rabet3">توضیحات:</label>

<textarea name="description" rows="8" cols="80" id="rabet3"></textarea>

</fieldset>


</form>


کد CSS:

body {

background-color: #eeeeee

}

form fieldset lable {

margin: 10px

}

form fieldset input {

margin: 10px

}

form fieldset textarea {

margin: 10px

}

خروجی کد بالا:

تگ fieldset , تگ Legend

 

تگ select و option

شاید شما هم فرم هایی ا پر کرده باشید که در آن ها لیست کشویی وجود داشته باشد برای ساخت یک لیست کشویی از تگ select استفاده می کنیم و برای تشکیل اعضای لیست کشویی از تگ option استفاده می کنیم. برای فهم بیشتر به مثال زیر توجه کنید.

کد HTML:


<form action="#">

<select class="list" name="Country">

<option value="Iran">Iran</option>

<option value="Iraq">Iraq</option>

<option value="Germany">Germany</option>

<option value="Russia">Russia</option>

<option value="Sowden">Sowden</option>

</select>

</form>


&nbsp;

کد CSS:

body {

background-color: #eeeeee

}

.list {

padding: 3px

}

خروجی کد بالا:

تگ select , تگ option

 

تگ optgroup

در صورتی که ما یک لیست بلند داشه باشیم برای کنترل گزینه های لیست از این تگ استفاده می کنیم و آن ها را به دسته های کوچکتر برای راحتی کاربرد تبدیل می کنیم. برای فهم بیشتر به نمونه کد زیر توجه کنید:

کد HTML:


<form action="#">

<select class="list" name="Country" >

<optgroup label="Irans city" multiple>

<option value="Qom">Qom</option>

<option value="Tehran">Tehran</option>

<option value="Yazd">Yazd</option>

</optgroup>

<optgroup label="Iraqs city">

<option value="Baghdad">Baghdad</option>

<option value="Basra">Basra</option>

<option value="Arbil">Arbil</option>

</optgroup>

</select>

</form>


کد CSS:

body {

background-color: #eeeeee

}

.list {

padding: 3px

}

&nbsp;

خروجی کد بالا:

تگ select , تگ optoin

نکته : لیست بالا در حالت باز شده می باشد.

 

مبحث تکمیلی:

در HTML5 ویژگی هایی به تگ فرم اضافه شده اند که کار با این تگ را زیباتر نموده اند این ویژگی ها عبارتنداز:

  1. autocomplete
  2. novalidate

ویژگی autocomplete

از ویژگی autocomplete برای تکمیل کلمات به صورت پیش فرض استفاده می شود به این گونه که با گذاشتن یک حرف لیستی از کلمات به کاربر پیشنهاد می شود که با اشاره گر موس یا کلید های اشاره گر می توان آن ها را انتخاب کرد.

از این ویژگی برای راحتی کار توسط کاربران استفاده می شود تا سرعت کار در استفاده از اینترنت بیشتر شود. این ویژگی مقدار های ON و OFF را می گیرد که با حالت ON روشن و با حالت OFF خاموش می شود. به نمونه کد زیر توجه کنید:


<form action="#" autocomplete="on">...</form>


ویژگی novalidate

از ویژگی novalidate برای اعتبار سنجی فرم مورد نظر استفاده می شود به این گونه که اگر این ویژگی را درون فرم قرار دهیم فرم بدون اعتبار سنجی به سرور ارسال می شود. به نمونه کد زیر توجه کنید:

[htmi]

<form action=”#” novalidate>…</form>

[/html]

خلاصه مطلب:

  1. از تگ Lable به عنوان یک یک برچسب برای ایجاد فرم استفاده می شود.
  2. تگ Lable به وسیله ی for و id به تگ های دیگر متصل می شود.
  3. با استفاده از تگ Lable نوشته ای که برای قسمتی از فرم خود قرار می دهیم به قسمت مورد نظر خود وصل می کنیم.
  4. با استفاده از تگ Lable می توانیم یک کلید میانبر برای تگ خود ایجاد نماییم.
  5. برای مشخص کردن کلمه ی کلیدی درون تگ خود از ویژگی accesskey استفاده می کنیم.
  6. برای اینکه کاربر از وجود این حرف کلیدی آگاه شود حرف مورد نظر خود را درون تگ <u></u> قرار می دهیم.
  7. از تگ fieldset برای گروه بندی عناصر در ایجاد یک فرم استفاده می کنیم که این تگ به کمک تگ legend نام گذاری می شود.
  8. برای ساخت یک لیست کشویی از تگ select استفاده می کنیم و برای تشکیل اعضای لیست کشویی از تگ option استفاده می کنیم.
  9. از ویژگی autocomplete برای تکمیل کلمات به صورت پیش فرض استفاده می شود.
  10. از ویژگی novalidate برای اعتبار سنجی فرم مورد نظر استفاده می شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها