Home >Web Front-end >JS Tutorial >Detailed explanation of the three formats for creating forms with Bootstrap (1)_javascript skills

Detailed explanation of the three formats for creating forms with Bootstrap (1)_javascript skills

WBOYOriginal: 2016-05-16 15:22:031405browse

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap can create different styles of forms through some simple HTML tags and extended classes.

Bootstrap form types are divided into three formats: vertical or basic form, inline form, and horizontal form.

Vertical or basic form (display:block;)

The basic form structure comes with Bootstrap, and individual form controls automatically receive some global styles. Listed below are the steps to create a basic form:

Add role="form" to the parent ff9c23ada1bcecdd1a0fb5d5a0f18437 element.

Place labels and controls in a dc6dce4a544fdca2df29d5ac0ea9906b with class .form-group. This is necessary to obtain optimal spacing.

Add class .form-control to all text elements d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 and 221f08282418e2996498697df914ce4e.

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一，关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

The effect is as follows:

If we remove the form-control of select and add form-control to input type = "file", let's see what the effect is.

Can you see the difference from the effect above? This way you probably understand the role of form-control, which is to set the peripheral border effect, including width, height, and get
The style of the form when focused.

Inline form (all on the same line, display is inline-block)

If you need to create a form with all its elements inline, left-aligned, and labels side by side, add class .form-inline to the ff9c23ada1bcecdd1a0fb5d5a0f18437 tag.

Because the contents of the head part are the same, we only list the contents of the body part.

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

Display effect:

By default, inputs, selects, and textareas in Bootstrap have 100% width. When using a horizontal form, you need to set a width on the form control.

Use class .sr-only to hide inline form tags.

Note: sr-only is displayed to screen readers, not ordinary readers.

When the form class of other elements is form-inline, the display is inLine-block; but input tyoe = "file" is still display:block. It can be seen that there is a problem with its layout. At this time, it can be set separately Its display is inline-block;

Horizontal form (form elements such as label and input are on the same line)

Horizontal forms differ from other forms not only in the number of tags, but also in the form presentation. To create a horizontal layout form, please follow these steps:

1. Add class .form-horizontal to the parent ff9c23ada1bcecdd1a0fb5d5a0f18437 element.
2. Place the labels and controls in a dc6dce4a544fdca2df29d5ac0ea9906b with class .form-group.
3. Add class .control-label to the label.
4. Set the width of label and its brother div (because the default width of input, etc. is 100%).

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

Effect:

The above content introduces you to the relevant content of creating forms with Bootstrap. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Tutorial to learn how to use grunt to package JavaScript and CSS programsNext article：Tutorial to learn how to use grunt to package JavaScript and CSS programs

See more

Detailed explanation of the three formats for creating forms with Bootstrap (1)_javascript skills

Related articles