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

آموزش طراحی سایت ابوالفضل کلهری 6 نظر 22 آگوست 2018 198 بازدید

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

 

تگ 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 برای اعتبار سنجی فرم مورد نظر استفاده می شود.

احساس خود را درباره این مقاله بگویید 0 نظر

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

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

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

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

  1. امید

    بسم الله الرحمن الرحیم
    با عرض سلام و تبریک برای توانایی های شما و تشکر بابت زحماتی که می کشید.
    سوال من این است که چگونه می توانم یک فرم در تگ select ایجاد کنم و لیست آکاردئونی چند سطحی در این فرم ایجاد کنم که به لیست mysql با php ارتباط داشته باشد .

    • با سلام و تشکر از شما.
      از اونجایی که هنوز آموزش برنامه نویسی و کار با دیتابیس در سایت قرار داده نشده است و موضوعی که مطرح کردید به دلیل حجیم بودن به زودی در قالب یک مقاله در سایت منتشر می شود. اما برای حل مشکل شما دو لینک را جهت مطالعه قرار می دهم اگر در مورد php و mysql دانش کافی داشته باشید مشکل شما حل می شود.
      https://go2k.ir/v
      https://go2k.ir/w

      توصیه من به شما استفاده از وردپرس و فرم ساز های قدرتمندی همچون گرویتی فرم می باشد.

      • امید

        بسم الله الرحمن الرحیم
        تشکر محمد جان عزیزم
        من لیست چند سطحی را با php قبلا ساخته ام ولی همین لیست را چگونه در تگ select در html قرار بدهم؟

        • با سلام.
          ببخشید که درست متوجه سوالتون نشدم. معمولا اول فرم طراحی میشه بعد قسمت اتصال به php و mysql انجام میشه. الان شما می خواهید یک Select وجود داشته باشد که با انتخاب هر کدام از گزینه ها فیلد های خاصی نمایش داده شود در واقع شما می خواهید فرم های تو در تو ایجاد کنید درسته؟
          اگر درست است لینک زیر را نگاه کنید.
          https://go2k.ir/x
          در مثال بالا کافیست other را انتخاب کنید تا فرم نمایش داده شود.

          • امید

            بسم الله الرحمن الرحیم
            تشکر مجدد برای وقتی که گذاشتید و پاسخ دادید .
            به گروه بندی در این سایت نگاه کنید.
            https://www.sheypoor.com/listing/new
            من می خواهم به این صورت باشد.
            تشکر می کنم اگر راهنمایی بفرمایید.

          • با سلام
            والا این چیزی که من دیدم کار هر کسی نیست برنامه نویس front end قوی ای می خواد و سایت شیپور در قالب یک مولتی اپ چند زبانه نوشته شده. ببینید شاید ظاهر این فرم مثل تگ select باشه اما اصلا از تگ select استفاده نشده. من زبان تخصصی ای که کار می کنم php هست و در js در حد نیاز خودم کار کردم و تا امروز در این سبک نکردم و متاسفانه نمی توانم کمکی کنم. نویسنده این پست، front end کار ما بخاطر یک سری مسائل شخصی فعلا در دسترس نیست ببخشید.

ارسال دیدگاه

  • ایمیل شما هیچگاه توسط کمیابی ها فاش نمی شود.
  • لطفا از پرسش تکراری خودداری کنید.
  • برای پشتیبانی محصولات و دریافت بهترین نتیجه از بخش تیکت استفاده کنید.
  • میانگین زمان پاسخ دهی به دیدگاه ها، حدود 1 ساعت می باشد.
  • ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.