Comment utiliser bootstrap pour créer un formulaire-tutoriel HTML-php.cn

Comment utiliser bootstrap pour créer un formulaire

不言

Libérer： 2019-01-03 15:15:06

original

11306 Les gens l'ont consulté

Bootstrap peut facilement créer des types de formulaires courants, et le codage est très simple, donc dans cet article, nous verrons comment utiliser bootstrap pour créer des formulaires.

Comment utiliser bootstrap pour créer un formulaire

Comment créer un formulaire

Définissez d'abord le formulaire à l'aide de la balise

le formulaire pour chaque élément du formulaire Définissez l'élément class="form-group" (utilisez des balises telles que "

" pour définir la plage que vous souhaitez définir class="form-group"). Enfin, complétez-le en définissant class = "form-control" dans la balise

Regardons un exemple spécifique de bootstrap créant un formulaire

Le code est le suivant

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

Copier après la connexion

L'effet d'exécution est le suivant :

Comment utiliser bootstrap pour créer un formulaire

De plus, il est possible de créer des formulaires en ligne. Il suffit d'ajouter class = "form-inline" à la balise

. Les amis intéressés peuvent l'essayer eux-mêmes.

En résumé, ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus passionnant, vous pouvez prêter attention à d'autres colonnes de didacticiels connexes sur le site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!