How to use bootstrap to create a form-HTML Tutorial-php.cn

How to use bootstrap to create a form

不言

Release： 2019-01-03 15:15:06

Original

11294 people have browsed it

Bootstrap can easily create commonly seen form types, and coding is very simple, so in this article we will take a look at how to use bootstrap to create forms.

How to use bootstrap to create a form

How to make a form

First use the

tag to set up the form, and then set the form for each Set the element class="form-group" (use tags such as "

" to set the range you want to set class="form-group"). Finally, complete it by setting class = "form-control" in the tag.

Let’s look at a specific example of bootstrap creating a form

The code is as follows

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>sample</title>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.2.1-dist/css/bootstrap.min.css" />
  </head>
  <body style="padding: 50px;">
    <form>
      <div class="form-group">
        <label for="email">电子邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="电子邮箱">
      </div>
      <div class="form-group">
        <label for="pass">密码</label>
        <input type="password" class="form-control" id="pass" placeholder="密码">
      </div>
      <div>
      	<label for="file">文件上传:</label>

      	<input type="file" id="file">
      	<p class="help-block">显示文件帮助。</p>
      </div>
      <div class="check">
        <label>
          <input type="checkbox">确认
        </label>
      </div>
      <button type="submit" class="btu btn-default">发送</button>
    </form>
  </body>
</html>

Copy after login

The running effect is as follows:

How to use bootstrap to create a form

In addition, it is possible to create inline forms. We only need to add class = "form-inline" to the

tag. I won’t go into details here. Interested friends can try it themselves.

Summary, the above is the entire content of this article. For more exciting content, you can pay attention to other related tutorial columns on the PHP Chinese website! ! !

The above is the detailed content of How to use bootstrap to create a form. For more information, please follow other related articles on the PHP Chinese website!