Form element with every HTML5 element

html5-form-elements.html

@extends('layouts.main')

@section('content')
    <form action="/">

        <fieldset>
            <legend>A Sample Form Legend</legend>

            <div class="form__row">
                <label for="name">Name: </label>
                <input type="text" value="Name" name="Name"/>
            </div>

            <div class="form__row">
                <label for="email">Email: </label>
                <input type="email" value="Email" name="Email"/>
            </div>

            <div class="form__row">
                <label>Button: </label>
                <input type="button" value="Button" name="button"/>
            </div>

            <div class="form__row">
                <label>Single Checkbox:
                    <input type="checkbox" value="checkbox1" name="button"/>
                </label>
            </div>

            <div class="form__row">
                <fieldset>
                    <legend>Group of Checkboxes:</legend>
                    <label>Checkbox 1:
                        <input type="checkbox" value="checkbox1" name="checkgroup[]"/></label>
                    <label>Checkbox 2:
                        <input type="checkbox" value="checkbox2" name="checkgroup[]"/></label>
                    <label>Checkbox 3:
                        <input type="checkbox" value="checkbox3" name="checkgroup[]"/></label>
                    <label>Checkbox 4:
                        <input type="checkbox" value="checkbox4" name="checkgroup[]"/></label>
                </fieldset>
            </div>

            <div class="form__row">
                <label>Color: </label>
                <input type="color" value="color" name="color"/>
            </div>

            <div class="form__row">
                <label>Date: </label>
                <input type="date" value="date" name="date"/>
            </div>

            <div class="form__row">
                <label>Date, Time (Local): </label>
                <input type="datetime-local" value="datetime" name="datetime"/>
            </div>

            <div class="form__row">
                <label>File: </label>
                <input type="file" value="file" name="file"/>
            </div>

            <div class="form__row">
                <input type="hidden" value="hidden" name="hidden"/>
            </div>

            <div class="form__row">
                <label>Image: </label>
                <input type="image" value="image" name="image"/>
            </div>

            <div class="form__row">
                <label>Month: </label>
                <input type="month" value="month" name="month"/>
            </div>

            <div class="form__row">
                <label>Number: </label>
                <input type="number" value="number" name="number"/>
            </div>

            <div class="form__row">
                <label>Password: </label>
                <input type="password" value="password" name="password"/>
            </div>

            <div class="form__row">
                <label>Single Radio:
                    <input type="radio" value="radio" name="radio"/>
                </label>
            </div>

            <div class="form__row">
                <fieldset>
                    <legend>Group of Radios:</legend>
                    <label>Radio 1:
                        <input type="radio" value="radio1" name="radiogroup"/></label>
                    <label>Radio 2:
                        <input type="radio" value="radio2" name="radiogroup"/></label>
                    <label>Radio 3:
                        <input type="radio" value="radio3" name="radiogroup"/></label>
                    <label>Radio 4:
                        <input type="radio" value="radio4" name="radiogroup"/></label>
                </fieldset>
            </div>

            <div class="form__row">
                <label>Range: </label>
                <input type="range" value="range" name="range"/>
            </div>

            <div class="form__row">
                <label>Reset: </label>
                <input type="reset" value="reset" name="reset"/>
            </div>

            <div class="form__row">
                <label>Time: </label>
                <input type="time" value="time" name="time"/>
            </div>

            <div class="form__row">
                <label>Search: </label>
                <input type="search" value="search" name="search"/>
            </div>

            <div class="form__row">
                <label>Tel: </label>
                <input type="tel" value="tel" name="tel"/>
            </div>

            <div class="form__row">
                <label>Text: </label>
                <input type="text" value="text" name="text"/>
            </div>

            <div class="form__row">
                <label>URL: </label>
                <input type="url" value="url" name="url"/>
            </div>

            <div class="form__row">
                <label>Week: </label>
                <input type="week" value="week" name="week"/>
            </div>

            <div class="form__row">
                <button>This is a button!</button>
            </div>

            <div class="form__row">
                <label>Select 1: </label>
                <select name="select" size="1">
                    <option>Test</option>
                    <option>Test</option>
                </select>
            </div>

            <div class="form__row">
                <label>Select 2: </label>
                <select name="select1" size="3">
                    <option>Test</option>
                    <option>Test</option>
                </select>
            </div>

            <div class="form__row">
                <label>Select Multiple: </label>
                <select name="select2" size="3" multiple>
                    <option>Test</option>
                    <option>Test</option>
                </select>
            </div>

            <div class="form__row">
                <label>Select Groups: </label>
                <select name="select3" size="1" multiple>
                    <optgroup label="First Group">
                        <option>Test</option>
                        <option>Test</option>
                    </optgroup>
                    <optgroup label="Second Group">
                        <option>Test</option>
                        <option>Test</option>
                    </optgroup>
                    <optgroup label="Third Group">
                        <option>Test</option>
                        <option>Test</option>
                    </optgroup>
                </select>
            </div>

            <div class="form__row">
                <fieldset>
                    <legend>Datalist:</legend>
                    <input type="text" name="datalist" list="samplelist">
                    <datalist id="samplelist">
                        <option>Something</option>
                        <option>Something else</option>
                        <option>Another thing</option>
                    </datalist>
                </fieldset>
            </div>

            <div class="form__row">
                <label>A textarea!</label>
                <textarea name="textarea">A paragraph in here</textarea>
            </div>

            <div class="form__row">
                <label>Progress (very unsupported): </label>
                <progress value="20" max="100"></progress>
            </div>

            <div class="form__row">
                <label>Meter (very unsupported): </label>
                <meter min="0" value="20" max="100" low="10" high="90" optimum="80">20 in the meter</meter>
            </div>

            <div class="form__row">
                <input type="submit" value="GO"/>
            </div>
        </fieldset>
    </form>

@endsection