零基础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. 小结

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

相关推荐
rzl0213 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang14 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼17 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿19 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再21 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55525 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录30 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000031 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl32 分钟前
深度剖析Kafka读写机制
前端
FogLetter33 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css