Thema: Formularelemente einsetzen


Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Text Input


<div class='form-group'>
    <label>Text Input</label>
    <input class='form-control'>
    <p class='help-block'>Beispiel für einen Hilfetext auf Blockebene.</p>
</div>

1. Ausgabe für Text Input

Text Input

Beispiel für einen Hilfetext auf Blockebene.


2. Code für Text Input mit Placeholder


<div class='form-group'>
    <label>Text Input mit Placeholder</label>
    <input class='form-control' placeholder='Enter text'>
</div>

2. Ausgabe für Text Input mit Placeholder

Text Input mit Placeholder

3. Code für Static Control


<div class='form-group'>
    <label>Static Control</label>
    <p class='form-control-static'>email@example.com</p>
</div>

3. Ausgabe für Static Control

Static Control

email@example.com


4. Code für File input


<div class='form-group'>
    <label>File input</label>
    <input type='file'>
</div>

4. Ausgabe für File input

File input

5. Code für Text area


<div class='form-group'>
    <label>Text area</label>
    <textarea class='form-control' rows='3'></textarea>
</div>

5. Ausgabe für Text area

Text area

6. Code für Checkboxes


<div class='form-group'>
    <label>Checkboxes</label>
    <div class='checkbox'>
        <label>
            <input type='checkbox' value=''>Checkbox 1
        </label>
    </div>
    <div class='checkbox'>
        <label>
            <input type='checkbox' value=''>Checkbox 2
        </label>
    </div>
    <div class='checkbox'>
        <label>
            <input type='checkbox' value=''>Checkbox 3
        </label>
    </div>
</div>

6. Ausgabe für Checkboxes

Checkboxes

7. Code für Inline Checkboxes


<div class='form-group'>
    <label>Inline Checkboxes</label>
    <label class='checkbox-inline'>
        <input type='checkbox'>1
    </label>
    <label class='checkbox-inline'>
        <input type='checkbox'>2
    </label>
    <label class='checkbox-inline'>
        <input type='checkbox'>3
    </label>
</div>

7. Ausgabe für Inline Checkboxes

Inline Checkboxes

8. Code für Radio Buttons


<div class='form-group'>
    <label>Radio Buttons</label>
    <div class='radio'>
        <label>
            <input type='radio' name='optionsRadios' id='optionsRadios1' value='option1' checked>Radio 1
        </label>
    </div>
    <div class='radio'>
        <label>
            <input type='radio' name='optionsRadios' id='optionsRadios2' value='option2'>Radio 2
        </label>
    </div>
    <div class='radio'>
        <label>
            <input type='radio' name='optionsRadios' id='optionsRadios3' value='option3'>Radio 3
        </label>
    </div>
</div>

8. Ausgabe für Radio Buttons

Radio Buttons

9. Code für Inline Radio Buttons


 <div class='form-group'>
    <label>Inline Radio Buttons</label>
    <label class='radio-inline'>
        <input type='radio' name='optionsRadiosInline' id='optionsRadiosInline1' value='option1' checked>1
    </label>
    <label class='radio-inline'>
        <input type='radio' name='optionsRadiosInline' id='optionsRadiosInline2' value='option2'>2
    </label>
    <label class='radio-inline'>
        <input type='radio' name='optionsRadiosInline' id='optionsRadiosInline3' value='option3'>3
    </label>
</div>

9. Ausgabe für Inline Radio Buttons

Inline Radio Buttons

10. Code für Selects


<div class='form-group'>
    <label>Selects</label>
    <select class='form-control'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

10. Ausgabe für Selects

Selects

11. Code für Multiple Selects


<div class='form-group'>
    <label>Multiple Selects</label>
    <select multiple class='form-control'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

11. Ausgabe für Multiple Selects

Multiple Selects

12. Code für Buttons


<button type='submit' class='btn btn-default'>Submit Button</button>
<button type='reset' class='btn btn-default'>Reset Button</button>

12. Ausgabe für Buttons

Buttons

13. Code für Input Groups


<form role='form'>
   <div class='form-group input-group'>
       <span class='input-group-addon'>@</span>
       <input type='text' class='form-control' placeholder='Username'>
   </div>
   <div class='form-group input-group'>
       <input type='text' class='form-control'>
       <span class='input-group-addon'>.00</span>
   </div>
   <div class='form-group input-group'>
       <span class='input-group-addon'><i class='fa fa-eur'></i>
       </span>
       <input type='text' class='form-control' placeholder='Font Awesome Icon'>
   </div>
   <div class='form-group input-group'>
       <span class='input-group-addon'>$</span>
       <input type='text' class='form-control'>
       <span class='input-group-addon'>.00</span>
   </div>
   <div class='form-group input-group'>
       <input type='text' class='form-control'>
       <span class='input-group-btn'>
           <button class='btn btn-default' type='button'><i class='fa fa-search'></i>
           </button>
       </span>
   </div>
</form>

13. Ausgabe für Input Groups

Input Groups
@
.00
$ .00

14. Code für Form Validation States


<form role='form'>
	<div class='form-group has-success'>
	    <label class='control-label' for='inputSuccess'>Input with success</label>
	    <input type='text' class='form-control' id='inputSuccess'>
	</div>
	<div class='form-group has-warning'>
	    <label class='control-label' for='inputWarning'>Input with warning</label>
	    <input type='text' class='form-control' id='inputWarning'>
	</div>
	<div class='form-group has-error'>
	    <label class='control-label' for='inputError'>Input with error</label>
	    <input type='text' class='form-control' id='inputError'>
	</div>
 </form>

14. Ausgabe für Form Validation States

Form Validation States

15. Code für Disabled Form States


<form role='form'>
   <fieldset disabled>
       <div class='form-group'>
           <label for='disabledSelect'>Disabled input</label>
           <input class='form-control' id='disabledInput' type='text' placeholder='Disabled input' disabled>
       </div>
       <div class='form-group'>
           <label for='disabledSelect'>Disabled select menu</label>
           <select id='disabledSelect' class='form-control'>
               <option>Disabled select</option>
           </select>
       </div>
       <div class='checkbox'>
           <label>
               <input type='checkbox'>Disabled Checkbox
           </label>
       </div>
       <button type='submit' class='btn btn-primary'>Disabled Button</button>
   </fieldset>
</form>

15. Ausgabe für Disabled Form States

Disabled Form States