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

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

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


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

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


<label for="untextbox">Username: </label>
<input type="text" name="username" id="untextbox" />

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

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

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


<input type="checkbox" name="male" id="malestatus"/>
<label for="malestatus" accesskey="m"><u>M</u>ale</label>

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

 

[demo link=”http://bit.ly/wp_utletmyhfa”]انعطاف‌پذیر کردن فرم‌ها با تگ Label[/demo]

 

٪ نظرات