logo   Bootstrap - Forms




Forms kan opbygges på tre måder med Bootstrap.

Horisontal
Tekst og felt placeret ved siden af hinanden
Vertikal
Tekst og felt placeret over / under hinanden
Inline
Flere tekst- / felt-par placeret vandret efter hinanden.




Horisontal


form <form action="" method="" class="horizontal">
   her indsættes de relevante formgrupper
</form>
text <div class="form-group">
   <label for="text01" class="col-sm-2 control-label">Tekst 01</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="text01">
   </div>
</div>
email <div class="form-group">
   <label for="email" class="col-sm-2 control-label">Email adresse</label>
   <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
   </div>
</div>
password <div class="form-group">
   <label for="password" class="col-sm-2 control-label">Password</label>
   <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
   </div>
</div>
<p class="help-block">Min x bogstaver og tal<p>
file upload <div class="form-group">
   <label for="file-upload" class="col-sm-2 control-label">File upload</label>
   <div class="col-sm-10">
      <input type="file-upload" id="file-upload">
   </div>
</div>
submit <div class="form-group">
   <class="col-sm-10 col-sm-push-2">
      <input type="submit" class="btn btn-default" value="submit">
   </div>
</div>




Vertikal


form <form action="" method="">
   her indsættes de relevante formgrupper
</form>
text <div class="form-group">
   <label for="text01">Tekst 01</label>
   <input type="text" class="form-control" id="text01">
</div>
checkbox <div class="form-group">
   <label for=""><input type="checkbox">tekst</label>
</div>
email <div class="form-group">
   <label for="email">Email adresse</label>
   <input type="email" class="form-control" id="email">
</div>
password <div class="form-group">
   <label for="password">Password</label>
   <input type="password" class="form-control" id="password">
</div>
<p class="help-block">Min x bogstaver og tal<p>
file upload <div class="form-group">
   <label for="file-upload">File upload</label>
   <input type="file-upload" id="file-upload">
</div>
submit <div class="form-group">
   <input type="submit" class="btn btn-default" value="submit">
</div>




Inline


En vertikal form vendes til inline alene ved at indsætte 'class="form-inline"' i form-taggen.


form <form action="" method="" class="form-inline">
   her indsættes de relevante formgrupper
</form>




Andre selektorer


Blandt andre selektorer, der kan anvendes i forms er:


.has-xxx

Med .has-selektorerne kan farven på indtastningsfeltet styres. F.eks:

'form-group' kan tildeles farver med '.has-xxx' selektorer. F.eks:

<div class="form-group has-warning">


.control-label

'control-label' får label til at følge '.has-xxx' farvemæssigt.

   <label for="password" class="control-label">Password</label>


col-xxx

Inddatafeltet vises i forms default som resten af skærmbredden / hele skærmbredden. Feltets bredde kan begrænses således:

<div class="form-group">
   <label for="text01 col-sm-2 control-label">Tekst 01</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="text01">
   </div>
</div>




















x
x