使label元素与表单控件元素演示页面

展示

代码

• HTML：

  <form>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password">
    </div>
    <p>
      <input type="checkbox" id="agree">
      <label for="agree">我已阅读用户协议</label>
    </p>
  </form>
  
  <h4>output元素的for属性</h4>
  <p>
      <input type="number" id="price" value="50" placehoplder="单价"> 
      x 
      <input type="number" id="amount" value="2" placehoplder="数量"> 
      = 
      <output for="price amount">100</output>
  </p>

• JS：

  console.log(document.querySelector('label').for);
  console.log(document.querySelector('label').htmlFor);
  
  console.log(document.querySelector('output').htmlFor);