`

H5 label 绑定表单元素增强 input 的响应区

阅读更多

 

<html>
<body>
<p>label 绑定表单元素增强input响应区:</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>

 

 

效果图:

 

<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

 

领悟:不要小看这段代码,这段代码会提高用户体验度,尤其是手机用户。手机屏幕本身就小,如何让用户这么小的屏幕下,更方便地填写表单信息。因为<label>标签能增强input的响应区,也就是点击<lable> 标签后,能触发其对应的input标签。我发现很多网站都没有。

 

 

 

  • 大小: 2.1 KB
1
1
分享到:
评论

相关推荐

    H5自适应登录和注册表单

    一个优秀的H5表单设计应考虑无障碍性,比如使用`&lt;label&gt;`元素绑定输入框,提供`&lt;legend&gt;`来解释表单组的目的,以及使用`aria-*`属性增强屏幕阅读器的可访问性。 总结起来,"H5自适应登录和注册表单"是一个集成了...

    H5中点击checkbox动态显示table

    数据绑定与响应式设计 为了使功能更强大,可以结合使用AJAX获取后端数据,并使用模板引擎(如Handlebars或Mustache)生成表格内容。这样,当用户选择不同的checkbox时,可以根据服务器返回的数据动态生成表格。 ``...

    自定义HTML表单:使用CSS和Bootstrap 4的自定义HTML表单

    3. `&lt;label&gt;`:与输入字段关联,为用户提供更清晰的提示信息,可以通过 `for` 属性与 `&lt;input&gt;` 的 `id` 进行绑定。 4. `&lt;button&gt;`:创建按钮,可设置 `type` 属性,如提交按钮(type="submit")和重置按钮(type=...

    html5简单的选择题提交答案代码.zip

    1. **表单元素增强**:HTML5对传统的表单元素进行了增强,比如`&lt;input&gt;`标签新增了多种类型(如`type="email"`、`type="date"`等),用于提供更好的输入验证和用户体验。在选择题中,`&lt;select&gt;`标签通常用于创建下拉...

    html面试题.docx

    19. H5 如何清除 Input 输入框多次输入的历史记录 HTML5 提供了 `autocomplete` 属性,设置为 "off" 可以关闭输入框的自动填充功能,避免显示历史记录。 20. 前端需要注意哪些 SEO 前端 SEO 除了上述提及的合理使用...

    全选、反选及漂亮的模态提示框功能

    在网页开发中,"全选"、"反选"和"模态提示框"是常见的用户交互功能,尤其在数据表格或表单处理中。下面将详细介绍这些功能及其实现方式。 全选与反选功能: 全选功能允许用户一键选择所有可选项目,反选则用于取消...

    又拍云 Node.js 实现文件上传、删除功能.docx

    &lt;h5 class="card-title"&gt;UPYun Upload/Delete&lt;/h5&gt; &lt;label for="file"&gt;Upload&lt;/label&gt; &lt;input type="file" id="file" class="form-control-file" @change="onChange"&gt; (item, index) in files"&gt; {{ ...

    原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    &lt;dt&gt;&lt;label for="js_chk_0"&gt;&lt;input type="checkbox" id="js_chk_0" name="chk_can" value="" /&gt;全选/全不选&lt;/label&gt; &lt;dd&gt;&lt;span&gt;2010-12-12&lt;/span&gt;&lt;input type="checkbox" name="jsitems" value="" /&gt;原生JS实现的...

    Blazor的简单Bootstrap模式对话框

    &lt;h5 class="modal-title" id="exampleModalLabel"&gt;模态标题&lt;/h5&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt; &lt;span aria-hidden="true"&gt;&times; 在这里放置模态内容 ...

Global site tag (gtag.js) - Google Analytics