Урок4

Урок 4: Создаём формы — Потому что спросить имейл лично как-то неловко

Добро пожаловать на Урок 4! Теперь, когда на твоей странице уже есть картинки и ссылки, пора перейти на новый уровень и взаимодействовать с посетителями. Как? Через формы! Хочешь собирать имейлы, получать отзывы или выяснить раз и навсегда, стоит ли класть ананасы на пиццу — HTML-формы справятся с этим (и тебе не придётся краснеть).

Тег `<form>`: Основной элемент любой формы

В HTML формы создаются с помощью тега <form>. Представь это как магическую коробочку, которая собирает всю информацию, что вводят пользователи, и передаёт её тебе. Вот базовая структура:

<form action="your-server-url" method="post">
    <!-- Здесь будут элементы твоей формы -->
</form>

action: Куда отправятся данные формы (обычно это сервер).
method: Обычно используем post (данные отправляются в фоне) или get (данные видны в URL, как в строке поиска Google).

Простой пример:

<form action="/submit" method="post">
    <!-- Элементы формы -->
    <input type="text" name="name" placeholder="Ваше имя">
    <input type="email" name="email" placeholder="Ваш имейл">
    <button type="submit">Отправить</button>
</form>

Задание: Создай свою первую форму

Попробуй сделать простую форму для сбора имени и имейла. Не переживай о сервере сейчас, мы просто учимся (и избегаем неловких моментов при просьбе вживую).

Поля ввода: Где происходит магия

Формы не обходятся без полей ввода — это те самые окошки, куда люди вводят свои данные. HTML предлагает несколько типов полей, вот несколько из них:

<input type="text"> для обычного текста (например, имя).
<input type="email"> для сбора имейла (ну или хотя бы попытки).
<input type="password"> для скрытых полей (например, пароль или секретный рецепт борща).

Пример с несколькими полями:

<form action="/submit" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" placeholder="Ваше имя">
    
    <label for="email">Имейл:</label>
    <input type="email" id="email" name="email" placeholder="Ваш имейл">
    
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" placeholder="Ваш пароль">
    
    <button type="submit">Зарегистрироваться</button>
</form>

Задание: Добавь больше полей

Создай форму, которая собирает имя, имейл и пароль. Хочешь добавить креатива? Спроси любимый цвет или мнение насчёт ананасов на пицце (этот вопрос никогда не устареет).

Радиокнопки и чекбоксы: Пусть люди выбирают

Хочешь предложить пользователям сделать выбор? Используй радиокнопки или чекбоксы:

Радиокнопки: Пользователь может выбрать только один вариант.
Чекбоксы: Можно выбрать несколько вариантов.

Пример с радиокнопками и чекбоксами:

<form action="/submit" method="post">
    <label>Выберите любимый цвет:</label><br>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Красный</label><br>
    
    <input type="radio" id="blue" name="color" value="blue">
    <label for="blue">Синий</label><br>
    
    <label>Выберите любимую пиццу:</label><br>
    <input type="checkbox" id="margherita" name="pizza" value="margherita">
    <label for="margherita">Маргарита</label><br>
    
    <input type="checkbox" id="diavola" name="pizza" value="diavola">
    <label for="diavola">Диавола</label><br>
    
    <button type="submit">Отправить</button>
</form>

Задание: Добавь радиокнопки и чекбоксы

Создай форму, где можно выбрать любимый цвет и любимую пиццу. Ведь кто не любит обсудить пиццу, правда?

Хостинг твоей страницы с помощью Caddy

Теперь, когда ты добавил форму на свою страницу, пора снова использовать Caddy, чтобы показать её миру (или хотя бы друзьям).

Шаг 1: Открой терминал

Перейди в директорию, где сохранён твой HTML-файл:

cd ~/my-website

Шаг 2: Запусти Caddy

Запусти эту команду, чтобы хостить свою страницу локально на порту 8080:

caddy file-server --listen :8080

Шаг 3: Открой свою страницу

Открой браузер и зайди на http://localhost:8080, чтобы увидеть свою новую интерактивную форму. Теперь ты можешь собирать полезную (или совершенно бесполезную) информацию от своих посетителей!

Подытожим:

В этом уроке ты научился:

Создавать HTML-формы с помощью тега <form>.
Добавлять поля для сбора данных от пользователей.
Использовать радиокнопки и чекбоксы для выбора.
Хостить свою обновлённую страницу с помощью Caddy для тестирования.

Теперь твоя страница интерактивна, и ты готов собирать все возможные интересные данные (например, кто за ананасы на пицце, а кто против!). В следующем уроке мы перейдём к стилям и погрузимся в мир CSS. Готовься к ещё более интересным приключениям в веб-дизайне!

HTML Начинающие Веб-дизайн