:: مقالات ::
لزوم استفاده از تگ Label در ایجاد یک فرم
تاریخ ارسال : 1394/12/3
بازدید : 457

انعطاف‌پذیر کردن فرم‌ها با تگ LABEL

use-the-label-element-to-make-your-html-forms-accessible

آیا شما هم جزو آن دسته از افراد هستید که هنگام ایجاد یک فرم، از تگ Label استفاده نمی‌کنید و یا تفاوتی بین استفاده کردن و استفاده نکردن از این تگ نمی‌بینید.
در این نوشته به صورت خیلی ساده و کوتاه قصد دارم لزوم استفاده از تگ Label در ایجاد یک فرم را با یک مثال ساده بیان کنم.
پس ابتدا یک textBox بدون تگ Label ایجاد می‌کنم.

Username: <input type="text" name="username" />

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

1|

2|

<label for="untextbox">Username: </label>

<input type="text" name="username" id="untextbox" />

همانطور که در کد بالا می‌بینید از دو خاصیت for و id برای ایجاد این textBox استفاده شده است که هر دو مقدار untextbox را دریافت کرده‌اند.

اما سؤال این است که درج متن با استفاده از تگ Label چه مزیتی دارد؟ باید بگویم که این کار دو ویژگی مهم دارد.
ویژگی اول: وقتی متن را از طریق تگ Label و خواص آن درج کنیم، کاملاً به کنترل شما که در اینجا یک تکست باکس است، متصل می‌شود و با انتخاب متن بین تگ Label،  تکست باکس که کنترل متناظر محسوب می‌شود، انتخاب خواهد شد و در کنترل‌هایی که ذاتاً کوچک هستند، مانند دکمه‌های انتخاب، این امر باعث سهولت انتخاب با ماوس خواهد شد.

ویژگی دوم: خاصیت دوم استفاده از Label زمانی ظاهر می‌شود که کاربر شما تمایل به استفاده از کیبورد دارد. در این هنگام شما با استفاده از خاصیت accesskey برای تگ Label می‌توانید یک کلید میانبر برای کنترل خود ایجاد کنید. برای درک بهتر، به مثال زیر دقت کنید:

1|

2|

<input type="checkbox" name="male" id="malestatus"/>

<label for="malestatus" accesskey="m"><u>M</u>ale</label>

در کد فوق شما می‌توانید هم بر روی متن Male و هم بر روی checKBox کلیک کنید. همچنین با استفاده از کلید ترکیبی Alt+m هم قادر به انتخاب چک باکس هستید و برای آگاه شدن کاربر از وجود چنین خاصیتی ترجیحاً حرف M را با نمایش به صورت آندرلاین متمایز کرده‌ایم.

و در صورتی که شما از تگ <asp:Lable>  استفاده می کنید باید به جای for  از AssociatedControlId استفاده کنید.

 

<asp:Label id="label" AssociatedControlId="txtPais" Text="Pais:" runat="server" />
<asp:TextBox id="txtPais" runat="server" CssClass="textInput" />

 

ارتباط با ما

تلفن

35245560-61 (031)

پست الکترونیک

info@shaya-co.ir

سامانه پیامک

50002060406020

ارتباطات مالی

شماره حساب ها
آدرس : اصفهان - خیابان جی - نبش خیابان شهید رجایی- ساختمان بعثت- واحد 10
کد پستی : 8156119347

فرم ارتباط با ما