Bootstrap中的内联表单

 

内联表单

为 

<form>
 元素添加 
.form-inline
 类可使其内容左对齐并且表现为 
inline-block
 级别的控件。 只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

可能需要手动设置宽度

在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 

width: 100%;
 宽度。在内联表单,我们将这些元素的宽度设置为 
width: auto;
,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

一定要添加 
label
 标签

如果你没有为每个输入控件设置 

label
 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为
label
 设置 
.sr-only
 类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如 
aria-label
aria-labelledby
 或 
title
 属性。如果这些都不存在,屏幕阅读器可能会采取使用 
placeholder
 属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。

Name 
 
Email 
 
复制
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
Email address
 
Password
 
 Remember me
 
复制
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
Amount (in dollars)
$
.00
 
复制
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值