SchnitzelRally

Input elements are used in forms, where input from the user is wanted.
Input fields can vary in their type: Text inputs, Radio Buttons, Input range, Input Submit…

<div class="input">
    <label for="input" class="input__label"> Input Label</label>
    <input name="input" type="text" class="input__type-text">
</div>

An input text field is used to show the user where to enter some text.

<div class="input">
    <label for="input" class="input__label"> Range Label</label>
    <input name="input" type="range" class="input__type-range" min="0" max="10">
</div>

The input range is used to determine a specific value of a range. e.g. define the radius in which your SchnitzelRally route takes place.

<div class="input">
    <p>Select your answer</p>
    <div class="input-group input-group__radiobutton">
        <input name="input" type="radio" class="input__type-radio" value="Option 1">
        <label for="input" class="input__label"> Radio1 Label</label>
    </div>
    <div class="input-group input-group__radiobutton">
        <input name="input" type="radio" class="input__type-radio" value="Option 2">
        <label for="input" class="input__label"> Radio2 Label</label>
    </div>
    <div class="input-group input-group__radiobutton">
        <input name="input" type="radio" class="input__type-radio" value="Option 1">
        <label for="input" class="input__label"> Radio3 Label</label>
    </div>
</div>

Radio buttons are used when more options are given and the user has to choose one.

<input type="submit" class="btn" value="Submit">

The submit input is used as action button to trigger that the form gets send to the backend.