HTML для начинающих, часть 9 – 1 половина

Основы форм в HTML и базовые теги

Привет, друзья! Сегодня я начинаю большой и подробный рассказ о таком важном элементе HTML, как формы. Данная часть будет разбита на две половины, в первой половине мы разберем только базовое понимание, но в отличие от других тем я считаю что формам нужно уделить куда больше внимания по данной причине будет вторая половина этого урока в которой мы затронем более углубленные темы связанные с формами в html.

Формы — это один из ключевых элементов любого сайта, ведь через них происходит взаимодействие пользователя с веб-приложением. Регистрации, вход в аккаунты, отправка данных и даже обычные поисковые запросы — всё это происходит через формы. В этой части мы рассмотрим базовую структуру форм и основные теги, которые понадобятся вам в повседневной разработке.

Зачем нужны формы?

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

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

Структура формы

Каждая форма в HTML начинается с тега <form>. Этот тег является контейнером, который объединяет все поля ввода и кнопки. Он также отвечает за то, как и куда будут отправлены данные формы.

Вот базовый пример структуры формы:

<form action="/submit-form" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">

    <label for="email">Электронная почта:</label>
    <input type="email" id="email" name="email">

    <button type="submit">Отправить</button>
</form>

Здесь вы видите основные элементы формы:

• Тег <form> открывает форму и задает два важных атрибута: action и method.
• action указывает URL, куда отправляются данные формы.
• method определяет, каким способом данные будут переданы на сервер. Чаще всего используются методы GET и POST.

Основные атрибуты формы

Давайте немного подробнее остановимся на важных атрибутах тега <form>:

1. action — это URL, на который отправляются данные формы. По сути, этот атрибут указывает серверу, куда “постучаться” с вашими данными. Если его не указать, данные будут отправлены на текущий URL.

   <form action="/submit-form">

2. method — определяет способ отправки данных. Существует два основных метода:
   • GET: данные передаются через URL. Этот метод удобен для поисковых запросов или ссылок, где важно сохранять видимость параметров. Однако он ограничен по объему данных.
   • POST: данные передаются в теле запроса. Этот метод более безопасен и позволяет отправлять большие объемы информации, например, формы регистрации или отправки файлов.

   Пример использования метода POST:

   <form action="/submit-form" method="post">
   

3. enctype — используется для указания типа кодирования данных при отправке формы. Этот атрибут важен, когда вы работаете с загрузкой файлов. Для отправки файлов необходимо указать enctype="multipart/form-data".

   <form action="/upload" method="post" enctype="multipart/form-data">
   

Важные теги форм

Теперь, когда мы познакомились с общими атрибутами формы, давайте перейдем к основным тегам, которые используются внутри формы для сбора данных от пользователя.

1. <input>Тег <input> — это один из самых универсальных и часто используемых элементов формы. Он представляет собой поле для ввода различных типов данных, таких как текст, электронная почта, пароли, даты и многое другое. Его поведение определяется типом, который задается через атрибут type.Примеры использования <input>:
   • Текстовое поле:

     <input type="text" name="username" placeholder="Введите имя">
     

   • Поле для ввода электронной почты:

     <input type="email" name="email" placeholder="Введите электронную почту">
     

   • Поле для ввода пароля:

     <input type="password" name="password" placeholder="Введите пароль">
     

     Тег <input> является самозакрывающимся, то есть не требует пары </input>, и это делает его удобным для использования в форме. Кроме того, у тега <input> есть множество атрибутов, которые помогают настраивать его поведение:

     • name — имя поля, которое будет отправлено на сервер.
     • placeholder — текст, отображаемый в поле до ввода данных.
     • required — делает поле обязательным для заполнения.

2.  <label>Тег <label> используется для привязки текста к полям ввода. Он помогает пользователям и поисковым системам понять, что именно нужно вводить в то или иное поле.Пример использования:

   <label for="username">Имя пользователя:</label>
   <input type="text" id="username" name="username">
   

   Атрибут for связывает метку с полем ввода, используя идентификатор id этого поля.

3. <textarea>Если вам нужно поле для ввода многострочного текста (например, для комментариев или отзывов), используйте тег <textarea>. В отличие от <input>, этот тег требует закрывающего тега.Пример:

   <textarea name="comments" rows="4" cols="50"></textarea>
   

   Атрибуты rows и cols управляют размером текстовой области.

4. <select> и <option>Для создания выпадающего списка используется тег <select>. Внутри него вы определяете опции с помощью тега <option>.Пример:

   <label for="city">Выберите город:</label>
   <select name="city" id="city">
       <option value="moscow">Москва</option>
       <option value="spb">Санкт-Петербург</option>
       <option value="kazan">Казань</option>
   </select>
   

   Здесь каждая опция имеет свой атрибут value, который передается на сервер при выборе соответствующего пункта.

5. <button>Тег <button> используется для создания кнопок, которые могут быть как обычными кнопками, так и кнопками для отправки формы. Пример:

   <button type="submit">Отправить</button>
   

   Атрибут type может принимать значения submit (отправить форму), reset (сбросить данные формы) и button (обычная кнопка без функционала).

Расширенные элементы HTML-форм: Радио-кнопки, флажки и валидация

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

Радио-кнопки (Radio buttons)

Радио-кнопки (<input type="radio">) используются, когда нужно предоставить пользователю выбор одного из нескольких вариантов. Например, когда вы хотите, чтобы посетитель сайта выбрал свою страну проживания, или ответил на вопрос в анкете с единственным вариантом ответа. Важно помнить, что в отличие от флажков (о которых мы поговорим чуть позже), радио-кнопки позволяют выбрать только один вариант из группы.

Пример радио-кнопок:

<form>
    <p>Выберите ваш пол:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Мужской</label><br>

    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Женский</label><br>

    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Другой</label><br>
</form>

В этом примере каждый элемент имеет атрибут name, который одинаков для всей группы радио-кнопок. Это необходимо для того, чтобы браузер понял, что эти кнопки связаны, и позволил выбрать только один вариант. Значение каждой кнопки задается через атрибут value, который будет отправлен на сервер, когда пользователь сделает выбор.

Флажки (Checkboxes)

Флажки (<input type="checkbox">) используются в случаях, когда нужно позволить пользователю выбрать несколько вариантов одновременно. Например, если вы хотите, чтобы пользователь выбрал несколько интересующих его тем для подписки на рассылку.

Пример использования флажков:

<form>
    <p>Выберите ваши любимые фрукты:</p>
    <input type="checkbox" id="apple" name="fruit" value="apple">
    <label for="apple">Яблоко</label><br>

    <input type="checkbox" id="banana" name="fruit" value="banana">
    <label for="banana">Банан</label><br>

    <input type="checkbox" id="orange" name="fruit" value="orange">
    <label for="orange">Апельсин</label><br>
</form>

Здесь пользователь может выбрать сразу несколько флажков. Как и в случае с радио-кнопками, атрибут value указывает значение, которое будет отправлено на сервер, если флажок выбран.

Скрытые поля (Hidden inputs)

Скрытые поля (<input type="hidden">) позволяют передавать данные на сервер, которые не видны пользователю. Эти данные могут быть полезны для служебной информации, такой как ID пользователя, метки времени или другие параметры, которые вы не хотите показывать на форме, но которые необходимы для обработки.

Пример скрытого поля:

<form action="/submit-form" method="post">
    <input type="hidden" name="userId" value="12345">
    <input type="text" name="username" placeholder="Введите имя">
    <button type="submit">Отправить</button>
</form>

Здесь в форме пользователь видит только поле для ввода имени, но когда данные отправляются на сервер, вместе с ними передается и скрытое значение userId.

Валидация данных

Теперь давайте поговорим о важной части работы с формами — валидации данных. Валидация позволяет убедиться, что данные, введенные пользователем, соответствуют определённым критериям. Например, если требуется ввести адрес электронной почты, мы должны убедиться, что формат введённого значения правильный. HTML предоставляет встроенные инструменты для валидации, которые могут помочь вам сделать формы более удобными и безопасными.

Обязательные поля

Одним из самых простых способов валидации является использование атрибута required. Если поле помечено как обязательное, то браузер не позволит отправить форму, пока пользователь не введет значение в это поле.

Пример:

<form>
    <label for="email">Электронная почта:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Отправить</button>
</form>

Здесь поле для ввода электронной почты является обязательным, и если пользователь попытается отправить форму, не введя почту, браузер покажет сообщение об ошибке.

Типы полей

HTML также предоставляет множество типов полей, которые включают встроенную валидацию. Например, поле с типом email проверяет, чтобы введенное значение соответствовало формату электронной почты, а поле с типом number проверяет, чтобы введенные данные были числом.

Пример с полем для числового ввода:

<form>
    <label for="age">Возраст:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>
    <button type="submit">Отправить</button>
</form>

В этом примере поле для ввода возраста имеет ограничения: минимальное значение — 18, а максимальное — 99. Если пользователь попытается ввести значение за пределами этого диапазона, браузер не позволит отправить форму.

Пользовательские сообщения об ошибках

Иногда встроенных возможностей HTML для валидации может быть недостаточно, и вам потребуется настроить собственные сообщения об ошибках. Это можно сделать с помощью атрибута pattern для задания регулярного выражения, а также атрибута title, который будет выводить пользовательское сообщение, если данные не соответствуют заданному шаблону.

Пример с использованием регулярного выражения:

<form>
    <label for="username">Имя пользователя (должно начинаться с буквы):</label>
    <input type="text" id="username" name="username" pattern="[A-Za-z][A-Za-z0-9]*" title="Имя пользователя должно начинаться с буквы и содержать только буквы и цифры" required>
    <button type="submit">Отправить</button>
</form>

В этом примере поле username должно соответствовать шаблону: имя пользователя должно начинаться с буквы и может содержать только буквы и цифры. Если введенное значение не соответствует этому шаблону, пользователь увидит сообщение об ошибке.

Кнопки отправки и сброса

Важной частью любой формы являются кнопки для отправки данных или сброса введенной информации. Давайте кратко рассмотрим их.

1. Кнопка отправки (<button type="submit">): как мы уже упоминали в первой части, эта кнопка отправляет данные формы на сервер.
2. Кнопка сброса (<button type="reset">): сбрасывает все введенные пользователем данные, возвращая форму к её исходному состоянию.

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

<form>
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username" required><br>

    <button type="submit">Отправить</button>
    <button type="reset">Сбросить</button>
</form>

Заключение первой части

В этой части мы узнали базовый синтаксис форм а также углубились в работу с формами, рассмотрели радио-кнопки, флажки, скрытые поля и основы валидации данных. Эти элементы делают формы более гибкими и позволяют создавать сложные и интерактивные интерфейсы для пользователей. В следующей части мы обсудим отправку данных формы через JavaScript и работу с файлами, а также поговорим о том, как формы взаимодействуют с сервером.

Ссылка на предыдущую статью данного мини курса: Таблицы в HTML
Ссылка на следующую статью данного мини курса: Формы в HTML вторая половина