Formular-Elemente

Formular im Content

Checkbox Label

Disabled checkbox

Option Eins Option Zwei Option Drei (Disabled)

Textfeld

Textarea

Select

Searchable Select

Number Input


                    
<!-- src/frontend/templates/modules/form.twig -->


<form name="test-form" action="01.03.forms.html" method="get">
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/checkbox.twig -->

<fieldset class="atp-checkbox color-event">
    <input type="checkbox" name="checkbox-1" id="checkbox-1" value="1" />
    <label for="checkbox-1" class="color-event" >
        
            <span>Checkbox Label</span>
        
    </label>
    
</fieldset>

            
                
                
<!-- src/frontend/templates/elements/controls/checkbox.twig -->

<fieldset class="atp-checkbox color-event">
    <input type="checkbox" name="checkbox-2" id="checkbox-2" value="1" disabled="disabled" />
    <label for="checkbox-2" class="color-event" >
        
            <span>Disabled checkbox</span>
        
    </label>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                <!-- src/frontend/templates/elements/controls/radios.twig -->
<fieldset class="atp-radio">
    
        <input type="radio" name="radio-1" id="radio-1-1" value="eins" />
        <label for="radio-1-1">
            
                <span>Option Eins</span>
            
        </label>
    
        <input type="radio" name="radio-1" id="radio-1-2" value="zwei" />
        <label for="radio-1-2">
            
                <span>Option Zwei</span>
            
        </label>
    
        <input type="radio" name="radio-1" id="radio-1-3" value="drei" disabled="disabled" />
        <label for="radio-1-3">
            
                <span>Option Drei (Disabled)</span>
            
        </label>
    
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/text.twig -->

<fieldset>
    
        <label for="text-1">Textfeld</label>
    
    <input type="text" value="" id="text-1" class="atp-input-text " placeholder="Platzhalter Text" name="text-1" />
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/textarea.twig -->
<fieldset>
    
        <label for="textarea-1">Textarea</label>
    

    <textarea id="textarea-1" class="atp-input-text " placeholder="Schreib mal wieder…" name="textarea-1"></textarea>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/select.twig -->
<fieldset>
    
        <label for="select-1">Select</label>
    
    <select name="select-1" id="select-1" class=" select2 basic-select big" data-msg-noresults="Keine Einträge gefunden">
        
            <option value="">
                
            </option>
        
            <option value="Frau">
                Frau
            </option>
        
            <option value="Herr">
                Herr
            </option>
        
    </select>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/select.twig -->
<fieldset>
    
        <label for="select-2">Searchable Select</label>
    
    <select name="select-2" id="select-2" class=" select2 select-searchable big" data-msg-noresults="Keine Einträge gefunden">
        
            <option value="">
                
            </option>
        
            <option value="de">
                Deutschland
            </option>
        
            <option value="at">
                Österreich
            </option>
        
            <option value="ch">
                Schweiz
            </option>
        
    </select>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/text.twig -->

<fieldset>
    
        <label>Number Input</label>
    
    <input type="number" value="1" class="atp-input-text  number-input" min="1" max="100000" name="quantity" />
    
</fieldset>

            
        </div>
    
    
        <div class="form-row form-actions text-right">
            
                
<!-- src/frontend/templates/elements/controls/button.twig -->

<button    class="button button button-outline border-color-event color-event bg-color-event-hover">
    
    
        <span>Abbrechen</span>
    
</button>


            
                
<!-- src/frontend/templates/elements/controls/button.twig -->

<button    class="button button button-brand bg-color-event bg-color-event-darker-hover">
    
    
        <span>Senden</span>
    
</button>


            
        </div>
    
</form>

Formular mit Fehlermeldungen

Die Fehlermeldungen werden bei Feldern mit den Klassen 'required', bzw. 'validate' beim Abschicken automatisch per JavaScript angehängt.

Checkbox Label Bitte aktivieren Sie diese Option

Option Eins Option Zwei Bitte aktivieren Sie eine Option

Textfeld Bitte geben Sie einen Text an.

Textarea Bitte geben Sie eine Nachricht an.

Select Bitte wählen Sie eine Anrede.

Searchable Select Bitte wählen Sie ein Land.

Number Input Die Zahl ist nicht richtig.


                    
<!-- src/frontend/templates/modules/form.twig -->


<form name="test-form" action="01.03.forms.html" method="get">
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/checkbox.twig -->

<fieldset class="atp-checkbox color-event has-error">
    <input type="checkbox" name="checkbox-3" id="checkbox-3" value="1" />
    <label for="checkbox-3" class="color-event has-error" >
        
            <span>Checkbox Label</span>
        
    </label>
    
        <span class="error-msg">Bitte aktivieren Sie diese Option</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                <!-- src/frontend/templates/elements/controls/radios.twig -->
<fieldset class="atp-radio color-event has-error">
    
        <input type="radio" name="radio-2" id="radio-2-1" value="eins" />
        <label for="radio-2-1">
            
                <span>Option Eins</span>
            
        </label>
    
        <input type="radio" name="radio-2" id="radio-2-2" value="zwei" />
        <label for="radio-2-2">
            
                <span>Option Zwei</span>
            
        </label>
    
    
        <span class="error-msg">Bitte aktivieren Sie eine Option</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/text.twig -->

<fieldset class="has-error">
    
        <label for="text-2">Textfeld</label>
    
    <input type="text" value="" id="text-2" class="atp-input-text  has-error" placeholder="Platzhalter Text" name="text-2" />
    
        <span class="error-msg">Bitte geben Sie einen Text an.</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/textarea.twig -->
<fieldset class="has-error">
    
        <label for="textarea-2">Textarea</label>
    

    <textarea id="textarea-2" class="atp-input-text  has-error" placeholder="Schreib mal wieder…" name="textarea-2"></textarea>
    
        <span class="error-msg">Bitte geben Sie eine Nachricht an.</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/select.twig -->
<fieldset class="has-error">
    
        <label for="select-3">Select</label>
    
    <select name="select-3" id="select-3" class=" select2 basic-select big has-error" data-msg-noresults="Keine Einträge gefunden">
        
            <option value="">
                
            </option>
        
            <option value="Frau">
                Frau
            </option>
        
            <option value="Herr">
                Herr
            </option>
        
    </select>
    
        <span class="error-msg">Bitte wählen Sie eine Anrede.</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/select.twig -->
<fieldset class="has-error">
    
        <label for="select-4">Searchable Select</label>
    
    <select name="select-4" id="select-4" class=" select2 select-searchable big has-error" data-msg-noresults="Keine Einträge gefunden">
        
            <option value="">
                
            </option>
        
            <option value="de">
                Deutschland
            </option>
        
            <option value="at">
                Österreich
            </option>
        
            <option value="ch">
                Schweiz
            </option>
        
    </select>
    
        <span class="error-msg">Bitte wählen Sie ein Land.</span>
    
</fieldset>

            
        </div>
    
        <div class="form-row">
            
            

            

            
            
            
            
                
                
<!-- src/frontend/templates/elements/controls/text.twig -->

<fieldset class="has-error">
    
        <label>Number Input</label>
    
    <input type="number" value="1" class="atp-input-text  number-input has-error" min="1" max="100000" name="quantity" />
    
        <span class="error-msg">Die Zahl ist nicht richtig.</span>
    
</fieldset>

            
        </div>
    
    
        <div class="form-row form-actions text-right">
            
                
<!-- src/frontend/templates/elements/controls/button.twig -->

<button    class="button button button-outline border-color-event color-event bg-color-event-hover">
    
    
        <span>Abbrechen</span>
    
</button>


            
                
<!-- src/frontend/templates/elements/controls/button.twig -->

<button    class="button button button-brand bg-color-event bg-color-event-darker-hover">
    
    
        <span>Senden</span>
    
</button>


            
        </div>
    
</form>