3-4 表单控件(输入框input)
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单控件(输入框input)

每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。

单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
运行效果如下或查看右侧结果窗口:

 

任务

我也来试试：完成下面任务

在右侧代码编辑器中写入一个单行文本框，用于输入用户名。

index.htmlstyle.css 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单控件——输入框input</title>
  6.     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <form role="form">
  10.   <div class="form-group">
  11.     <input type="email" class="form-control" placeholder="Enter email">
  12.  
  13.   </div>
  14. </form>   
  15. </body>
  16. </html>
  1. body {
  2.   padding: 100px;
  3. }
下一节