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:

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