Formulaire en ligne dans un formulaire horizontal dans twitter bootstrap?

200

Quelle est la meilleure façon de concevoir un formulaire qui ressemble à ceci (veuillez voir le lien ci-dessous) dans twitter bootstrap sans aucun cours maison?

Est-il possible de définir un formulaire interne en ligne à l'intérieur d'un formulaire horizontal comme dans l'exemple ci-dessous:

capture d'écran de l'objectif de l'interface utilisateur

html forms twitter-bootstrap Frntz
la source

Réponses:

317

Ne pas imbriquer les <form>balises, cela ne fonctionnera pas. Utilisez simplement les classes Bootstrap.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

Vous pouvez obtenir ce comportement de plusieurs manières, ce n'est qu'un exemple. Testez-le sur ce bootply

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Notez que j'utilise .form-inlinepour obtenir le style propper à l'intérieur d'un .controls.
Vous pouvez le tester sur ce jsfiddle

albertedevigo
la source
3
Vous pouvez également ajouter les classes de formulaire sur les divs, dans mon cas, j'ai utilisé la classe de formulaire verticale sur un div span6 et une classe de formulaire horizontale sur un div span12
Iftah
3
Cela fonctionne pour bootstrap2. Pour bootstrap 3, visitez: stackoverflow.com/questions/18429121/…
Tomislav Muic
1
Dans bootstrap 3, s'il y a un espace sous l'entrée, supprimez "form-group". Il ajoute un espace de 15 pixels au bas de chaque div avec lequel vous l'utilisez.
darkzangel
Vous n'avez pas besoin de mélanger le groupe de formulaires avec la ligne dans l'exemple Key + Value. @ rap-2-h: vous pouvez copier coller l'exemple de code et cliquer sur exécuter.
Sebastian
Cela fonctionne mais j'ai pu le simplifier dans la version actuelle de Bootstrap 3 ... Il semble essentiel de cette solution juste pour mettre des contrôles d'entrée à l'intérieur d'un div, sinon la disposition de la grille col-xx ne fonctionne pas. Il n'était pas nécessaire d'imbriquer le groupe de formulaires, le parent col-xx- # peut partager le même div et il n'y a pas besoin de la classe "row" car le formulaire parent est déjà un formulaire horizontal (100%).
Tony Wall
92

Pour l'exemple de bootstrap 3 ci-dessus, cela fonctionne mais est trop compliqué, plutôt que d'utiliser le groupe de formulaires, utilisez le formulaire en ligne pour les champs que vous souhaitez en ligne.

Par exemple:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
Ryan Knell
la source
Cela peut ne pas fonctionner pour vous en raison de la classe de contrôle de formulaire qui définit "display: block". Si vous le remplacez par "display: inline-block" cela devrait fonctionner.
Cédric Guillemette
1
Cela ne fonctionne pas. Essayez de faire ce que la question demande, ce n'est pas possible avec form-inline.
Sebastian
Le seul problème est que la sous-zone n'est pas étendue à sa pleine largeur et toute tentative d'utilisation du dimensionnement de la grille sera écrasée par rapport à la largeur de contenu minimale requise. L'autre solution est meilleure juste sans autant de divs (voir mon commentaire là-bas).
Tony Wall
3
Vous devez envelopper tous les groupes de formulaires dans la classe form-inline
ymakux
jsfiddle.net/9637fywb Cela ne semble pas agir comme souhaité - en utilisant le dernier CDN bootstrap actuel (3.3.5). Cet exemple ne prend pas non plus en compte deux étiquettes à l'intérieur de la section "en ligne". Peut-être le violon manque-t-il un emballage quelconque, mais il semble que cela devrait être inclus dans la réponse, si c'est le cas.
emragins
14

Cela utilise twitter bootstrap 3.x avec une classe css pour que les étiquettes se placent au-dessus des entrées. Voici un lien de violon , assurez-vous d'élargir le panneau de résultats assez large pour voir l'effet.

HTML:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

CSS:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
L'acide de la batterie
la source
2

Depuis le bootstrap 4, utilisez div class = "form-row" en combinaison avec div class = "form-group col-X". X est la largeur dont vous avez besoin. Vous obtiendrez de belles colonnes en ligne. Voir violon .

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>
Henri
la source
1

Je sais que c'est une vieille réponse mais voici ce que je fais habituellement:

CSS:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

Enveloppez ensuite les champs que vous souhaitez insérer dans un div et ajoutez .form-control-inline à l'entrée, par exemple:

HTML

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
Jesus Gomez
la source
1

pour faire simple, il suffit d'ajouter un class="form-inline"avant l'entrée.

exemple: 

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>
curiosité
la source