label标签

最新推荐文章于 2023-12-12 13:30:51 发布

原创最新推荐文章于 2023-12-12 13:30:51 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了label标签的使用，包括for='id'属性关联用法，以及label标签嵌套其它标记的情况。当点击label时，radio会响应，但需注意嵌套label不能带for属性，否则点击无效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.for=‘id’属性关联用法

<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>

2.label标签嵌套其它标记

<template>
  <div class="home">
    <label role="radio" :aria-checked="value === 1" class="box">
      男<input type="radio" v-model="value" @change="click('男')" />
    </label>
    <label class="box">女<input type="radio" @change="click('女')" /></label>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      value: 1
    }
  },
  methods: {
    click(gender) {
      console.log("gender:", gender);
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
input {
  opacity: 0;
  outline: none;
  position: absolute;
  z-index: -1;
}
</style>

结果：当点击label时，radio会响应

注意：嵌套label不能带for属性，否则点击无效