Formulaire d'amorçage


Dans ce chapitre, nous apprendrons comment créer un formulaire à l'aide de Bootstrap. Bootstrap peut créer différents styles de formulaires grâce à de simples balises HTML et des classes étendues.

Mise en page du formulaire

Bootstrap fournit les types de mise en page de formulaire suivants :

  • Formulaire vertical (par défaut)

  • À l'intérieur Formulaire commun

  • Formulaire horizontal

Formulaire vertical ou de base

La structure de base du formulaire est celle de Bootstrap, les contrôles de formulaire individuels sont automatiquement recevez des styles globaux. Vous trouverez ci-dessous les étapes pour créer un formulaire de base :

  • Ajoutez role="form" à l'élément parent <form>

  • Placez les étiquettes et les contrôles dans un <div> avec la classe .form-group. Ceci est nécessaire pour obtenir un espacement optimal.

  • Ajoutez la classe .form-control à tous les éléments de texte <input>, <textarea> <title>Exemple de Bootstrap - Formulaire de base</ title>

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min .css">
    • <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 < script src="http://apps.bdimg .com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
< body>

<form role="form">
  <div class="form-group">
  <label for="name">Name</label> ;
  <input type=" text" class="form-control" id="name"
placeholder="Veuillez entrer un nom">
</div>
< div class="form-group">
                                                                                                                    >Voici un exemple de texte d'aide au niveau du bloc. </p>
  </div>
  <div class="checkbox">
  <label>
  <input type="checkbox"> >                                                                              ;
<button type="submit" class="btn btn-default">Submit</button>
</form>

</body>
< ;/html>


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
      <p class="help-block">这里是块级帮助文本的实例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Formulaire en ligne

Si vous devez créer un formulaire avec tous ses éléments en ligne, alignés à gauche et les étiquettes côte à côte, ajoutez la classe à la balise <form> . 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

  • Par défaut, les entrées, les sélections et les zones de texte dans Bootstrap ont une largeur de 100 %. Lorsque vous utilisez des formulaires en ligne, vous devez définir une largeur sur le contrôle du formulaire.

  • En utilisant la classe .sr uniquement, vous pouvez masquer l'étiquette d'un formulaire en ligne.

Forme horizontale

Les formes horizontales ne sont pas seulement différentes des autres formes par le nombre de notes, mais aussi par la présentation du formulaire. Pour créer un formulaire disposé horizontalement, procédez comme suit :

  • Ajoutez la classe .form-horizontal à l'élément parent <form>

  • Placez les étiquettes et les contrôles dans un <div> avec la classe .form-group.

  • Ajoutez la classe .control-label à l'étiquette. 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 水平表单</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="请输入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="请输入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 请记住我
            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登录</button>
      </div>
   </div>
</form>

</body>
</html>

Contrôles de formulaire pris en charge

Bootstrap prend en charge les contrôles de formulaire les plus courants, principalement entrée, zone de texte, case à cocher, radio et sélection.

Zone de saisie (Saisie)

Le champ de texte de formulaire le plus courant est la zone de saisie. Les utilisateurs peuvent y saisir les données de formulaire les plus nécessaires. Bootstrap prend en charge tous les types d'entrée HTML5 natifs, notamment : texte, mot de passe, datetime, datetime-local, date, mois, heure, semaine, numéro, e-mail, URL, recherche, tel et couleur . La déclaration type appropriée est requise pour que l'input soit entièrement stylisée. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 输入框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

</body>
</html>

Zone de texte (Textarea)

Lorsque vous devez saisir plusieurs lignes, vous pouvez utiliser la zone de texte de la zone de texte. L'attribut lignes peut être modifié si nécessaire (moins de lignes = cases plus petites, plus de lignes = cases plus grandes). 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 文本框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

</body>
</html>

Box à cocher et radio

Les cases à cocher et les boutons radio sont utilisés pour permettre à l'utilisateur de choisir parmi une gamme d'options prédéfinies.

  • Lors de la création d'un formulaire, utilisez checkbox si vous souhaitez que l'utilisateur sélectionne plusieurs options dans une liste. Veuillez utiliser radio ou

    .radio- pour une gamme de cases à cocher et de boutons radio en ligne<. 🎜> classe, les contrôle pour qu'ils soient affichés sur la même ligne. L'exemple suivant montre les deux types (par défaut et en ligne) :

  • Instance

    <!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 复选框和单选按钮</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">选项 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 选择它将会取消选择选项 1
   </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2
   </label>
</div>

</body>
</html>
    <🎜. >Exécuter l'instance»

    • Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Sélectionner

Utilisez une zone de sélection lorsque vous souhaitez que l'utilisateur choisisse parmi plusieurs options, mais qu'une seule option peut être sélectionnée par défaut.

  • Utilisez <select> pour afficher les options de la liste, généralement celles familières aux utilisateurs, telles que les états ou les nombres.

  • Utilisez multiple="multiple" pour permettre à l'utilisateur de sélectionner plusieurs options.

L'exemple suivant illustre les deux types (sélectionnés et multiples) :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 选择框</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton «Exécuter l'exemple» pour afficher l'exemple en ligne

Contrôle statique

Lorsque vous avez besoin d'étiquettes de formulaire dans un formulaire horizontal Lors du placement texte brut après le <p>, utilisez la classe .form-control-static. 

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 静态控件</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div>
</form>

</body>
</html>

État de contrôle du formulaire

En plus de l'état :focus (c'est-à-dire que l'utilisateur clique sur l'entrée ou utilise la touche de tabulation pour se concentrer sur l'entrée), Bootstrap définit également une zone de saisie désactivée. Le style est spécifié et la classe de validation du formulaire est fournie.

Focus de la zone de saisie

Lorsque l'entrée de la zone de saisie reçoit :focus, le contour de la zone de saisie sera supprimé et box-shadow<🎜 sera appliqué. >.

Saisie de la zone de saisie désactivée

Si vous souhaitez désactiver la saisie d'une zone de saisie, ajoutez simplement l'attribut

disabled, qui désactivera non seulement la zone de saisie ; de la zone de saisie et du style du pointeur de la souris lorsqu'il survole l'élément.

Ensemble de champs désactivé

Ajoutez l'attribut désactivé à <fieldset> pour désactiver tous les contrôles dans <fieldset>.

Statut de validation

Bootstrap contient des styles de validation pour les messages d'erreur, d'avertissement et de réussite. Le statut de validation peut être utilisé en ajoutant simplement la classe appropriée (

.has-warning, .has-error ou .has-success) à l'élément parent.

L'exemple suivant montre tous les états de contrôle :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用输入（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用选择菜单（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         输入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         输入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         输入错误
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

</body>
</html>

Instance en cours d'exécution» Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Taille du contrôle du formulaire

Vous pouvez utiliser la classe

.input-lg et .col - lg-* pour définir la hauteur et la largeur du formulaire. L'exemple suivant le démontre :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单控件大小</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" Afficher exemples en ligne

Texte d'aide du formulaire

Les contrôles de formulaire Bootstrap peuvent avoir un texte d'aide au niveau du bloc dans la zone de saisie. Pour ajouter un bloc de contenu qui occupe toute la largeur, utilisez .help-block après <input>. L'exemple suivant le démontre :


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 表单帮助文本</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <span>帮助文本实例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一个较长的帮助文本块，超过一行，
   需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" Afficher exemples en ligne


←
→