{% extends "base.html" %}

{% block title %}Contacts{% endblock %}

{% block content %}
<h1>Form Elements Example</h1>

    <form method="POST">

        <!-- Текстовое поле ввода -->

        <p>

            <label for="username">Username:</label>

            <input type="text" id="username" name="username" required>

            <!-- Тег <input> с типом text используется для ввода текста. Атрибут required делает поле обязательным для заполнения. -->

        </p>


        <!-- Поле для ввода пароля -->

        <p>

            <label for="password">Password:</label>

            <input type="password" id="password" name="password" required>

            <!-- Тег <input> с типом password скрывает вводимый текст, отображая вместо него точки или звездочки. -->

        </p>


        <!-- Поле для ввода адреса электронной почты -->

        <p>

            <label for="email">Email:</label>

            <input type="email" id="email" name="email" required>

            <!-- Тег <input> с типом email проверяет, что введённый текст соответствует формату адреса электронной почты. -->

        </p>


        <!-- Текстовая область -->

        <p>

            <label for="bio">Bio:</label>

            <textarea id="bio" name="bio" rows="4" cols="50"></textarea>

            <!-- Тег <textarea> используется для ввода большого количества текста. -->

        </p>


        <!-- Выпадающий список -->

        <p>

            <label for="country">Country:</label>

            <select id="country" name="country">

                <option value="usa">USA</option>

                <option value="canada">Canada</option>

                <option value="uk">UK</option>

            </select>

            <!-- Тег <select> создаёт выпадающий список. Тег <option> внутри <select> определяет элементы списка. -->

        </p>


        <!-- Чекбоксы -->

        <p>Interests:</p>

        <p>

            <input type="checkbox" id="coding" name="interests" value="coding">

            <label for="coding">Coding</label>

            <input type="checkbox" id="sports" name="interests" value="sports">

            <label for="sports">Sports</label>

            <input type="checkbox" id="music" name="interests" value="music">

            <label for="music">Music</label>

        </p>

        <!-- Тег <input> с типом checkbox создаёт флажок. Пользователь может выбрать несколько элементов. -->


        <!-- Радиокнопки -->

        <p>Gender:</p>

        <p>

            <input type="radio" id="male" name="gender" value="male">

            <label for="male">Male</label>

            <input type="radio" id="female" name="gender" value="female">

            <label for="female">Female</label>

            <input type="radio" id="other" name="gender" value="other">

            <label for="other">Other</label>

        </p>

        <!-- Тег <input> с типом radio создаёт радиокнопку. Пользователь может выбрать только один из вариантов. -->


        <!-- Поле для выбора даты -->

        <p>

            <label for="birthday">Birthday:</label>

            <input type="date" id="birthday" name="birthday">

            <!-- Тег <input> с типом date позволяет пользователю выбрать дату из календаря. -->

        </p>


        <!-- Поле для загрузки файла -->

        <p>

            <label for="profile_picture">Profile Picture:</label>

            <input type="file" id="profile_picture" name="profile_picture">

            <!-- Тег <input> с типом file позволяет пользователю загрузить файл. -->

        </p>


        <!-- Кнопка отправки формы -->

        <p>

            <button type="submit">Submit</button>

            <!-- Тег <button> с типом submit отправляет форму на сервер. -->

        </p>

    </form>
{% endblock %}