کانال تلگرام
استفاده از label در فرم های html

در این پست برای شما یک آموزش ساده آماده کردیم که با استفاده از ان می‌توانید با استفاده از تگ های label در فرم های خود وضعیت فیلد ها را با کلیک بر روی متن هایی که در label ها نوشته شده است تغییر داده و یا فیلد ها را به حالت انتخاب در آورید.
برای دیدن آموزش به ادامه مطلب بروید.آموزش را با یک مثال ساده شروع می‌کنیم تا بهتر متوجه شوید که کدی که خواهیم نوشت چگونه کار می‌کند.

 

فرم شماره 1 :

Label for textbox

Radio button 1 Radio button 2 Radio button 3

Label for checkbox

 

در فرم شماره 1 وقتی شما بر روی نوشته های کنار فیلد ها کلیک می‌کنید هیچ اتفاقی رخ نمی‌دهد ! در این آموزش به شما یاد خواهیم داد که چگونه وقتی بر روی نوشته های کنار یک فیلد کلیک شد، آن فیلد به حالت انتخاب درآید. مانند فرم شماره 2، در فرم شماره 2 وقتی بر روی نوشته کنار یک فیلد کلیک کنید آن فیلد به حالت انتخاب در می‌آید.

 

فرم شماره 2 :

 

 

روش استفاده سنتی :

 

در استفاده سنتی از برچسب <label> از ویژگی For برای مشخص کردن شناسه عنصر فرم که به برچسب آن تعلق دارد استفاده می‌شود.

 

کد زیر برای چیدمان Checkbox مثال بالاست.
توجه داشته باشید که مقدار آیدی input با مقدار For در label استفاده شده یکی است.

 

<input id=”example_checkbox” type=”checkbox” /> <label for=”example_checkbox”>Label for checkbox</label>

 

این هم از کد استفاده شده برای Radio buttons

 

<input type="radio" id="example_radio1" name="radioA" /> <label for="example_radio1">Label for radio 1</label>
<input type="radio" id="example_radio2" name="radioA" /> <label for="example_radio2">Label for radio 2</label>
<input type="radio" id="example_radio3" name="radioA" /> <label for="example_radio3">Label for radio 3</label>

 

و در آخر کد نوشت شده برای Input

 

<input type=”text” id=”example_input” /> <label for=”example_input”>Label for textbox </label>

 

 

روش استفاده فشرده :

 

روش بالا تنها روشی نیست که می‌توانید استفاده کنید. یک راه حل ساده تر هم برای اینکار وجود دارد و نیازی نیست که برای هر فیلد یک شناسه ایجاد کید.

برای استفاده از این متد، هر دو متن برای label و فیلد خود را درون تگ label بنویسید. مانند کد زیر :

 

<label><input type=”checkbox” /> Label for checkbox</label>
<label><input type=”radio” name=”radioB” /> Label for radio1</label>
<label><input type=”radio” name=”radioB” /> Label for radio2</label>
<label><input type=”radio” name=”radioB” /> Label for radio3</label>
<label>Label for textbox <input type=”text” /></label>

 

پایان آموزش. امیدوارم که این آموزش برای شما کاربردی بوده باشه و بهترین استفاده رو از آموزش کنید.

موفق باشید.

 

نوشته شده در : جمعه 22 دسامبر 2017
  • نوشته ها : 8
    برنامه نویس و توسعه دهنده وب
    باسلام و درود فراوان به شما عزیزان. ابوالفضل مهرورز هستم مدیر و نویسنده سایت اینگونه. تخصصم در زمینه برنامه نویسی و توسعه ی وب هست کمی هم در زمینه گرافیک و طراحی مهارت دارم. از سال 1394 شروع به یاد گیری برنامه نویسی و طراحی کردم.
    آخرین نوشته های Abolfazl Mehrvarz
    برای با خبر شدن از جدیدترین ارسالی های سایت در کانال تلگرام ما عضو شوید.JOIN CHANNEL
    ارسال دیدگاه
    You can use the HTML tags.

    No comment.