美文网首页优美编程
label和表单元素二三事

label和表单元素二三事

作者: 小遁哥 | 来源:发表于2020-02-26 10:39 被阅读0次

    组件化开发会让问题变得难以发现,切换子路由、弹出模态框等等

    一 点击文字也能获得焦点

    写法一

    <label for="male"> 姓名: <input type="text" id="male" /> </label>
    

    写发二

    <label> 姓名: <input type="text" /> </label>
    

    写法三

    <label for="address"> 姓名: </label>
    <input type="text" id="address" />
    

    二 checkbox 加:checked 实现切换逻辑

    HTML

        <input type="checkbox" id="toggle-id" />
        <label for="toggle-id">
          <div class="show-text">显示</div>
          <div class="hide-text">隐藏</div>
        </label>
        <div class="content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsa
          delectus labore vitae ullam nulla saepe, totam nihil odit sed eius facere
          incidunt quo possimus, pariatur porro repudiandae? Animi, qui.
        </div>
    
    

    CSS

      #toggle-id {
        display: none;
        &:checked + label ~ .content {
          display: block;
        }
        &:checked + label > .hide-text {
          display: block;
        }
        &:checked + label > .show-text {
          display: none;
        }
        + label > .show-text {
          display: block;
        }
        + label > .hide-text {
          display: none;
        }
        + label ~ .content {
          display: none;
        }
    }
    

    初始效果:



    切换效果:


    三 for 加 id 重复造成的困惑

    input

        <label for="male"> 姓名1: <input type="text" id="male" /> </label
        ><br /><br />
        <label for="male"> 姓名2: <input type="text" id="male" /> </label>
    
    

    点击姓名二也是第一个input获得焦点

    radio

        <label for="Fruit"
          ><input id="Fruit" name="Fruit" type="radio" value="" />苹果1
        </label>
        <br /><br />
        <label for="Fruit"
          ><input id="Fruit" name="Fruit" type="radio" value="" />苹果2
        </label>
    
    

    点击苹果二也是苹果一被选中

    4 antd的Checkbx.Group

    点击lable包裹的区域会选中全部

          <label>
            测试
            <Checkbox.Group className="Group">
              <Checkbox>男</Checkbox>
              <Checkbox>女</Checkbox>
            </Checkbox.Group>
          </label>
    
    

    初步猜测和React事件分发机制有关系,待后续验证。

    念念不忘,必有回响!

    相关文章

      网友评论

        本文标题:label和表单元素二三事

        本文链接:https://www.haomeiwen.com/subject/dentchtx.html