label的for属性

Web知识补充。

背景

最近跟着老大学到了一个新技能,label标签的for属性,对于前端菜鸟来说,看到使用label for后,点击文本就可以选中单选框radio,还是很激动的,记录下label for的使用。

正文

w3school里面有相关的解释:label 标签的for属性,这里通过一两个例子来感受一下。

代码如下:

<form>
  <h5>What's your main focus for today?</h5>
  <input type="radio" name="things" id="song">
  <label for="song">Sing a song</label>
  <br>
  <input type="radio" name="things" id="coding">
  <label for="coding">Coding</label>
  <br>
  <input type="radio" name="things" id="shopping">
  <label for="shopping">go shopping</label>
</form>

对应的页面效果如下:

只要点击对应的文本,即可选中选项。这样看,好像没什么特别的,我们来点不一样的。

写一个boolean类型的例子,比如用来判断某句话是不是对的。

先看最终实现的页面效果:

对应的html代码如下:

<form>
  <h4>请判断以下语句是否正确?</h4>
  <div class="d-flex">
    <div class="form-boolean">
      <input type="radio" name="statement" id="statement-yes" class="input-yes" value="1">
      <input type="radio" name="statement" id="statement-no" class="input-no" value="0">
      <label for="statement-no" class="form-checkbox label-yes">
        <span class="radio-value">Y</span>
      </label>

      <label for="statement-yes" class="form-checkbox label-no">
        <span class="radio-value">N</span>
      </label>

      <label for="statement-yes" class="form-checkbox label-empty">
        <span class="radio-value"></span>
      </label>
    </div>
    <div>太阳每天都从东边升起来</div>
  </div>
</form>

对应的CSS部分【重头戏其实在CSS这里】:

.d-flex {
  display: flex;
}

.form-checkbox {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
  border-radius: 10%;
  display: inline-block;
  cursor: pointer;
  padding: 0.4em;
  margin-top: -0.2em;
  text-align: center;
  line-height: 1.0;
  width: 1em;
  height: 1em;

  .radio-value {
    display: block;
  }
}

.form-boolean {
  input {
    display: none;
  }

  input:checked ~ .label-empty {
    display: none;
  }

  .label-yes, .label-no {
    display: none;
  }

  .input-yes:checked ~ .label-yes {
    display: block;
  }

  .input-no:checked ~ .label-no {
    display: block;
  }
}

我们下面从零开始,一步步来。

因为是boolean型,在未选择之前,应该有三种状态:

没选,一个空的框,含Y的一个框,含N的一个框。我们先画出三个框来:

<form>
  <h4>请判断以下语句是否正确?</h4>
  <div class="d-flex">
    <div class="form-boolean">
      <label class="form-checkbox label-yes">
        <span class="radio-value">Y</span>
      </label>

      <label class="form-checkbox label-no">
        <span class="radio-value">N</span>
      </label>

      <label class="form-checkbox label-empty">
        <span class="radio-value"></span>
      </label>
    </div>
    <div>太阳每天都从东边升起来</div>
  </div>
</form>

设置下form-checkbox, radio-value 的CSS,让框好看点:

.d-flex {
  display: flex;
}

.form-checkbox {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
  border-radius: 10%;
  display: inline-block;
  cursor: pointer;
  padding: 0.4em;
  margin-top: -0.2em;
  text-align: center;
  line-height: 1.0;
  width: 1em;
  height: 1em;

  .radio-value {
    display: block;
  }
}

页面的效果:

这时,你去点击,会发现什么都没有发生,我们需要借助CSS的:checked来做点变化。

【插播下:checked的相关知识。

mozilla上对于:checked的解释是:

页面上任何处于选中状态的radio, checkbox 或select元素中的option HTML元素。

比如input[type="radio"]:checked 表示页面上的所有选中的radio按钮,input[type="checkbox"]:checked表示页面上的所有选中的checkbox按钮 ,option:checked表示页面上的所有选中的select的选项。】

现在页面上没有input,我们加上input,同时添加上label的for属性。

<form>
  <h4>请判断以下语句是否正确?</h4>
  <div class="d-flex">
    <div class="form-boolean">
      <input type="radio" name="statement" id="statement-yes" class="input-yes" value="1">
      <input type="radio" name="statement" id="statement-no" class="input-no" value="0">
      <label for="statement-no" class="form-checkbox label-yes">
        <span class="radio-value">Y</span>
      </label>

      <label for="statement-yes" class="form-checkbox label-no">
        <span class="radio-value">N</span>
      </label>

      <label for="statement-yes" class="form-checkbox label-empty">
        <span class="radio-value"></span>
      </label>
    </div>
    <div>太阳每天都从东边升起来</div>
  </div>
 </form>

这时,通过label for,我们点击N或者空框时,第一个radio会被选中,点击Y时,第二个radio会被选中。这里给空框也指定了一个for,默认是选择yes。【后面CSS部分,我们就会知道这里空框的for值的选择,决定了第一次点击的时候,出现的是Y还是N,这里我们选了Y。】

离目标已经很近了!

我们先设置下两个radio不可见,同时,初始状态时,只有空框。

CSS中添加如下代码:

.form-boolean {
  input {
    display: none;
  }

  .label-no, .label-yes {
    display: none;
  }
}

这里用form-boolean包了一层,这样,设置的CSS,是针对form-boolean 选择器中的input。

此时的页面效果:

但是你会发现,点击空框,没有任何反应,因为我们隐藏了Y和N。那么要怎么把Y和N唤出来?

前面我们已经设置了点击空框时,第一个input radio其实是被选中的,所有我们可以使用:checked唤出Y,同时Y出现的时候,空框隐藏。CSS添加如下代码:

.form-boolean {
 ........

  input:checked ~ .label-empty {
    display: none;
  }

  .input-yes:checked ~ .label-yes {
    display: block;
  }
}

这时的页面效果:

如果~不清楚,可以参考这篇CSS中’>’,’+’,’~’符号的区别.

还剩最后一步,点击Y时,更换成N。依然还是使用:checked,.form-boolean里面添加如下代码:

.form-boolean {
   .......
  .input-no:checked ~ .label-no {
    display: block;
  }
}

此时的页面效果:

最后.form-boolean 部分完整的CSS:

.form-boolean {
  input {
    display: none;
  }

  .label-no, .label-yes {
    display: none;
  }

  input:checked ~ .label-empty {
    display: none;
  }

  .input-yes:checked ~ .label-yes {
    display: block;
  }

  .input-no:checked ~ .label-no {
    display: block;
  }
}

OK!

参考

:checked

label 标签的for属性