5.3 Formulare

<form id="myForm">
    <div class="row">
        <div class="small-12 large-12 columns">
            <label for="input1" title="Pflichtfeld: Vollständigen Namen eintragen">Vollständiger Name
                <small>(Pflichtfeld)</small>
            </label>
            <input id="input1" type="text" title="Pflichtfeld: Vollständigen Namen eintragen"
                required pattern="[a-zA-Z]+" placeholder="Vollständiger Name"/>
        </div>
    </div>
    <div class="row">
        <div class="small-12 large-4 columns">
            <label for="input2" title="Pflichtfeld, erlaubt sind Zahlen: Telefonnummer eintragen">Telefon
                <small>(Pflichtfeld, erlaubt sind Zahlen)</small>
            </label>
            <input id="input2" type="text" title="Pflichtfeld, erlaubt sind Zahlen: Telefonnummer eintragen"
                    required pattern="[0-9]+" placeholder="Telefonnummer"/>
        </div>
        <div class="large-4 small-12 columns">
            <label for="input3" title="E-Mail-Adresse eintragen">E-Mail-Adresse</label>
            <input id="input3" type="text" title="E-Mail-Adresse eintragen" pattern="email"
                   placeholder="E-Mail-Adresse" class="input-group-field"/>
        </div>
        <div class="large-4 small-12 columns">
            <label for="input4" title="E-Mail-adresse ohne Domain Endung eintragen">E-Mail-Adresse Alternativ</label>
            <div class="input-group">
                <input id="input4" type="text" title="E-Mail-adresse ohne Domain Endung eintragen"
                       pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+" placeholder="E-Mail-Adresse" class="input-group-field"/>
                <span class="input-group-label bb-input-group-label">.de</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="large-12 small-12 columns">
            <label for="select1" title="Auswahlfeld Städte">Auswahlfeld Städte</label>
            <select id="select1" title="Dropdown Menü">
                <option title="Cottbus" value="Cottbus">Cottbus</option>
                <option title="Guben" value="Guben">Guben</option>
                <option title="Beelitz" value="Beelitz">Beelitz</option>
                <option title="Angermünde" value="Angermünde">Angermünde</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 small-12 columns radio-group">
            <label title="Pflichtfeld: Bitte wählen Sie eine Option aus">Bitte wählen Sie eine Option aus
                <small>(Pflichtfeld)</small>
            </label>
            <input type="radio" alt="Radio Button Ja" title="Option Ja" name="radiogroup1" id="yes-btn" value="yes">
            <label title="Option Ja" for="yes-btn">Ja</label>
            <input type="radio" alt="Radio Button Nein" title="Option Nein" name="radiogroup1" id="no-btn" value="no">
            <label title="Option Nein" for="no-btn">Nein</label>

        </div>
        <div class="medium-6 small-12 columns ">
            <label title="Heimatland auswählen">Ihr Heimatland</label>
            <input title="Heimatland: Brandenburg" type="checkbox" alt="Checkbox Mit Getränke" id="checkbox1">
            <label title="Heimatland: Brandenburg" for="checkbox1">Brandenburg</label>
            <input title="Heimatland: Nicht Brandenburg" type="checkbox" alt="Checkbox  MitPommes" id="checkbox2">
            <label title="Heimatland: Nicht Brandenburg" for="checkbox2">Nicht Brandenburg</label>
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <label title="Bemerkungen eintragen" for="input5">Bemerkungen</label>
            <textarea id="input5" title="Bemerkungen eintragen" alt="Textfeld"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="small-12 large-12 columns">
            <label for="input11" title="Unsichtbares Label" class="hide">Unsichtbares Label</label>
            <input id="input11" title="Eingabefeld Unsichtbares Label" type="text"
                   placeholder="Eingabefeld mit unsichtbarem Label"/>
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <button title="Senden Button"class="button bb-submit-button" type="submit"
                  alt="Senden Button" value="Submit">Senden</button>
        </div>
    </div>
</form>