作者: chenjieyi | 来源:发表于2019-04-22 17:00 被阅读0次

日常用法
<fieldset disabled>
常用于控制表单的不可编辑,fieldset元素设置disabled,其内的表单元素都会被设置为disabled状态,并且拦截表单的键盘事件,如回车提交表单。通常还结合css的:disabled设置表单disabled状态的样式
使用场景:当表单为编辑,查看的共用组件,那么仅仅只是查看表单详情时,可在fieldset元素添加属性disabled。

      <Form>
        <fieldset disabled>
          <FormItem label="用户名" {...formItemLayout}>
            <Input placeholder="请输入用户名" />
          </FormItem>
          <FormItem label="邮箱" {...formItemLayout}>
            <Input type="email" placeholder="请输入正确的邮箱格式,如:xxx@qq.com" />
          </FormItem>
          <FormItem label="网址" {...formItemLayout}>
            <Input placeholder="请输入真实的网址" />
          </FormItem>
        </fieldset>
      </Form>

  // 样式
    input {
      &:disabled {
        background: #eee;
        cursor: not-allowed;
      }
    }
效果图

相关文章

  • 日常用法 常用于控制表单的不可编辑,fieldset元素设置disabled,其内的表单元素都会被设置为disab...

  • fieldset 标签

    fieldset标签:

  • 模拟fieldset

    使用div来模拟,fieldset浏览器做了特殊处理。 标题 内容 它的css:.fieldset{posit...

  • fieldset中的标签以及输入框一致问题

    fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在form表单中,我们...

  • 网页标签的学习

    1.

    标签 定义和用法: fieldset 元素可将表单内的相关元素分组。标签将表单...

  • 3-8. 表单练习

    fieldset标签:可以给表单添加一个边框 legend标签:可以给边框指定一个标题 fieldset写在for...

  • 表单

    fieldset legend action placeholder radio checked multiple...

  • html 带标题的边框

    效果为 注意:fieldset 标签必须包裹legend标签

  • fieldset 和legend

    fieldset {background: rgba(255, 255, 255, 0.3);border-col...

  • form表单

    form属性 通用属性 重置表单元素样式 input select textarea datalist fieldset

网友评论

      本文标题:

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