{% extends "base.html" %}

{% block title %} - Form Basic{% endblock %}

{% block body %}
<div class="container" style="max-width: 400px">
    <h1>Basic Form</h1>
    <form id="form1" method="POST" action="/form-basic-result/" class="text-left">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
        </div>
        <div class="form-group">
            <label for="planet">Planet</label>
            <select id="planet" name="planet" class="form-control">
                <option value="alderaan">Alderaan</option>
                <option value="bespin">Bespin</option>
                <option value="endor">Endor</option>
                <option value="tatooine">Tatooine</option>
            </select>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="lightsaber" name="lightsaber">
            <label class="form-check-label" for="lightsaber">Lightsaber</label>
        </div>
        <fieldset class="form-group">
            <div class="row">
                <legend class="col-form-label col-sm-3 pt-0">Alignment</legend>
                <div class="col-sm-9">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="alignment" id="lightSide" value="Light Side"
                               checked>
                        <label class="form-check-label" for="lightSide">
                            Light Side
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="alignment" id="darkSide" value="Dark Side">
                        <label class="form-check-label" for="darkSide">
                            Dark Side
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
{% endblock %}