零基础HTML教程(26)--表单元素标注

文章目录

  • [1. 引子](#1. 引子)
  • [2. 使用标注](#2. 使用标注)
  • [3. 元素的id与name](#3. 元素的id与name)
  • [4. 更好的写法](#4. 更好的写法)
  • [5. 小结](#5. 小结)

1. 引子

我们看一个表单:

html 复制代码
		<form>
            姓名:<input type="text"><br>
            手机号:<input type="text"><br>
            年龄:<input type="text"><br>
            <input type="button" value="注册">
        </form>

用起来没啥问题,但是还不够完美。

仔细观察,姓名、手机号、年龄其实都是表单元素的说明,如果我们给他们加上个标签,会有意想不到的好处。

例如,视障人士专用浏览器,如果知道这几个文字是表单元素的说明,那么可以把这些文字阅读出来。

好吧,其实HTML中有这样的元素,他就是------表单元素标注,也就是label标签。

2. 使用标注

有了label,我们可以改写代码如下:

html 复制代码
		<form>
            <label>姓名:</label><input type="text"><br>
            <label>手机号:</label><input type="text"><br>
            <label>年龄:</label><input type="text"><br>
            <input type="button" value="注册">
        </form>

但是还差点意思,就是标注跟表单元素没有明确的对应关系。

所以我们可以给每个元素一个唯一id属性,然后让标注的for属性指向这个id,如下:

html 复制代码
		<form>
            <label for="username">姓名:</label><input type="text" id="username"><br>
            <label for="phone">手机号:</label><input type="text" id="phone"><br>
            <label for="age">年龄:</label><input type="text" id="age"><br>
            <input type="button" value="注册">
        </form>

这样label就跟表单元素一一对应上了,此时查看网页:

注意:当鼠标单击"姓名"的时候,焦点会自动移动到第一个输入框之内,这就是标注的一个功能。

3. 元素的id与name

上面的例子中,我们给元素加了个id:<input type="text" id="username">,之前我们还讲过,元素其实也有name属性,如果我们加上name属性的话,代码如下:

html 复制代码
		<form>
            <label for="username">姓名:</label><input type="text" id="username" name="username"><br>
            <label for="phone">手机号:</label><input type="text" id="phone" name="phone"><br>
            <label for="age">年龄:</label><input type="text" id="age" name="age"><br>
            <input type="button" value="注册">
        </form>

那么id和name属性有啥区别呢,这里讲一下。

id是所有html元素的身份证,也就是唯一标志。

name往往是给表单元素起名用的,主要是将表单提交给后端时,区分表单元素提交内容。

4. 更好的写法

其实每个标注跟元素都是一组,所以如下写法可能更佳:

html 复制代码
	<form>
        <div>
            <label for="username">姓名:</label><input type="text" id="username" name="username">
        </div>
        <div>
            <label for="phone">手机号:</label><input type="text" id="phone" name="phone">
        </div>
        <div>
            <label for="age">年龄:</label><input type="text" id="age" name="age">
        </div>
        <div>
            <input type="button" value="注册">
        </div>
    </form>

5. 小结

标注这个知识点稍微冷门点,掌握更佳。

相关推荐
栈老师不回家2 分钟前
Element UI 组件库详解【Vue】
前端·vue.js·ui
前端青山10 分钟前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵15 分钟前
什么是Sass,有什么特点
前端·rust·sass
栈老师不回家24 分钟前
axios 请求跨域问题
前端·vue.js
前端拾光者35 分钟前
前端数据可视化思路及实现案例
前端·数据库·信息可视化
沉默璇年1 小时前
react中Fragment的使用场景
前端·react.js·前端框架
前端熊猫2 小时前
transform学习
前端·学习·html
GISer_Jing2 小时前
React渲染流程与更新diff算法
前端·javascript·react.js
郑祎亦2 小时前
JavaWeb开发:HTML 页面与接口对接
前端·后端·java-ee·html
Au_ust2 小时前
css:感觉稍微高级一点的布局
前端·css