Home >Web Front-end >HTML Tutorial >How to use bootstrap to create a form

How to use bootstrap to create a form

不言Original: 2019-01-03 15:15:0611351browse

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 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>

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!

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：How to make anchor linksNext article：How to make anchor links

See more

How to use bootstrap to create a form

Related articles