制作表单的方法整理

Bootstrap 创建表单

bootstrap的表单功能非常强大，可以制作不同形式的输入框以及多选框单选框。

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

 

 

 

输入框（Input）

type中可以添加的类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

<input type="text" class="form-control" placeholder="文本输入">

文本框Textarea

可以进行多行输入

 

复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

• 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
• 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

选择框（Select）

提供了一个可以用来做选择的列表。

<form role="form">
  <div class="form-group">
    <label for="name">选择列表</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>
</form>