美文网首页
第三章 表单 3-4 表单控件

第三章 表单 3-4 表单控件

作者: Murrey_Xiao | 来源:发表于2016-07-15 08:12 被阅读11次

1、输入框input
bootstrap通过对input标签的type属性进行识别,得到相应的格式,所以input标签一定要对type进行指定。另外,还需通过form-control对输入框进行规范统一,此外,可以用placeholder对框内内容进行初始化。

<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
    <input type="text" class="form-control" placeholder="Enter userName">
  </div>
</form> 

2、下拉选择框
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如:

<form role="form">      //表单格式
<div class="form-group">      //类:控件群
  <select class="form-control">    //每个控件都需要(表单-控制)类
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">  
  <select multiple class="form-control">    //多行选择multiple
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

3、文本域(textarea)
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%auto

<form role="form">
 <div class="form-group">
   <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

相关文章

  • 第三章 表单 3-4 表单控件

    1、输入框inputbootstrap通过对input标签的type属性进行识别,得到相应的格式,所以input标...

  • 九、疯狂的表单

    疯狂的表单 新增表单控件 新增表单属性 表单验证反馈 关闭验证

  • 表单相关总结

    表单?表单作用:收集用户信息。表单组成:表单域、表单控件、提示信息。 表单域常用属性 常用属性: name=...

  • HTML-表单

    一、表单介绍 二、控件的常用属性 三、表单的其他控件

  • Bootstrap - 表单2

    表单控件(输入框input) 每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解...

  • Angular框架中FormArray中嵌套FormGroup

    Angular中FormGroup是用来管理一组表单控件的,响应式表单使用FormArray来动态的管理表单控件,...

  • HTML 5_CSS 3_JavaScript讲义(二)-HTM

    (1).HTML原有的表单及表单控件 1.表单元素 action:表单提交到的地址method:指定提交表单时发送...

  • 4.HTML表单

    表单 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。表单目的是为了收...

  • HTML基础语法(下)

    表单(用户输入) 表单 标签。表单是给用户提供输入和操作的那些控件。 表单都是input标签,但是根据类型的不同,...

  • CSS表格表单高级

    第一节 表单高级属性 表单的组成:表单域: 表单控件: 提示信息: 表单字段集 语法: 说明:相当于一个方框,...

网友评论

      本文标题:第三章 表单 3-4 表单控件

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