旧题重现：HTML Label标签结合Input的应用

最新推荐文章于 2024-05-23 14:23:19 发布

原创最新推荐文章于 2024-05-23 14:23:19 发布 · 2.2k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#input #html #class #up

Web 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何通过正确使用HTML中的Label标签来提高表单的可用性和可访问性。包括文本输入、单选按钮、复选框及下拉菜单等多种元素的Label应用实例。

巧妙的应用Label，设置焦点

Examples of form inputs marked up with the <label> tag

Form element looks like	Coded like:
First Name:	`<label for="txtFirstName">``First Name:</label><br /> <input class="input" type="text" title="Enter your first name" maxlength="" size="" name="txtFirstName" id="txtFirstName" value="">`
Age: Under 30 Over 30	`Age:<br /> <input class="input" type="radio" title="Choose from one of the options" name="radAge" id="radAge4_0" value="Under30"><label for="radAge4_0"> Under 30</label><br> <input class="input" type="radio" title="Choose from one of the options" name="radAge" id="radAge4_1" value="Over30"><label for="radAge4_1"> Over 30</label><br>`
What colours do you like: red green blue purple	What colours do you like:<br /> <input class="input" type="checkbox" title="Select what colours you like" name="chk0" id="chk0_0" value="red"><label for="chk0_0"> red</label><br> <input class="input" type="checkbox" title="Select what colours you like" name="chk1" id="chk1_1" value="green"><label for="chk1_1"> green</label><br> <input class="input" type="checkbox" title="Select what colours you like" name="chk2" id="chk2_2" value="blue"><label for="chk2_2"> blue</label><br> <input class="input" type="checkbox" title="Select what colours you like" name="chk3" id="chk3_3" value="purple"><label for="chk3_3"> purple</label><br>
Your life story:	`<label for="txtLifeStory">``Your life story:</label><br /> <textarea title="Write your life story here" name="txtLifeStory" id="txtLifeStory" rows="5" cols="25" class="input"></textarea>`
Favourite Town:	`<label for="ddlTown">``Favourite Town:</label><br /> <select title="Please choose your favourite town" name="ddlTown" id="ddlTown"> <option value="">Please Select ... </option> <option value="Swindon">Swindon</option> <option value="London">London</option> <option value="Burkino Faso">Burkino Faso</option> </select>`

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。