Maison > Article > interface Web > Comment utiliser bootstrap pour créer un formulaire

Comment utiliser bootstrap pour créer un formulaire

不言original: 2019-01-03 15:15:0611283parcourir

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer des liens d'ancrageArticle suivant：Comment créer des liens d'ancrage

Articles Liés

Voir plus