Подробно о html элементах ввода данных в форме обратной связи на веб странице

Для того, чтоб пользователь мог передать на сервер какие-то данные на сервер. Для этого используются формы передачи данных на сервер.

Если рассматривать формы на уровне html, то для реализации различных возможностей передачи данных существует множество элементов, из которых строится форма и их атрибутов. Так же есть свои особенности css стилизации и обработки данных на стороне клиента.

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

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

Тег form — основной тег формы

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

<form action="script.php" method="post" class="form" id="form">

  <!-- Элементы формы -->

</form>

При создании формы отправки данных на сервер можно обойтись без тега form. Например, можно повесить на кнопку отправки событие onclick, которое будет запускать функцию отправки данных на сервер с помощью AJAX. Тогда возникает вопрос, а зачем он нужен?

Использование тега <form> позволяет управлять поведением данных посредством предусмотренных для этого тега атрибутов.

Наличие тега form улучшает видимость кода для поисковых машин и делает код понятнее для самого разработчика.

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

Атрибуты тега form

Функционал тега form можно скорректировать с помощью использования атрибутов с определенными значениями.

Атрибуты, которые используются в теге form:

• action — устанавливает адрес передачи данных
• method — определяет метод передачи данных
• enctype — определяет кодировку данных
• name — определяет имя формы (в PHP обработчик не передается)
• novalidate — отключает браузерную валидацию
• autocomplete — включает/выключает подсказки автозаполнения
• target — определяет где открывать результат

Помимо специализированных атрибутов тег form поддерживает использование всех глобальных атрибутов.

Атрибут action

Атрибут action — принимает в качестве значения адрес скрипта обработчика, на который будут отправляться данные.

<form action="script.php"></form>

На сегодняшний день данный атрибут практически не используют. Передача данных на сервер с помощью атрибута action провоцирует перезагрузку страницы. Подобное поведение будет создавать определенные неудобства пользователю. Для передачи данных без перезагрузки страницы на сервер используют метод AJAX в JavaScript. Данный способ не предполагает использование атрибута action.

Атрибут method

Атрибут method — определяет HTTP-метод передачи данных на сервер. В качестве значения принимают методы POST или GET. Какой метод использовать зависит от целей формы.

<form method="post"></form>

• GET — данные передаются в URL строке. Данные кэшируются браузером и имеют ограничение по длине строки URL. Используется данный метод в основном для поисковых запросов.
• POST — передается в теле HTTP запроса. Преимущество использования данного метода заключается в том, что запрос не виден, так как не попадает в URL строку, что делает передачу данных более безопасным. Используется в формах сбора заявки.

Стоит добавить, что помимо POST и GET существуют методы PUT и DELITE. Эти методы используются очень редко и не поддерживаются HTML. Для передачи запросов необходимо использовать AJAX.

• PUT — используется для обновления данных на сервере.
• DELITE — используется для удаления данных на сервере.

Атрибут enctype

Атрибут enctype — определяет тип кодировки данных, которые отправляются формой на сервер.

<form enctype="multipart/form-data"></form>

Атрибут принимает три значения:

• application/x-www-form-urlencoded — значение по умолчанию
• multipart/form-data — служит для отправки бинарных данных таких как файлы. Применяется при использовании в форме <input type=”file”>
• text/plain — кодирует данные в обычный текст.

На практике данный атрибут используется со значением multipart/form-data в случае, если форма предусматривает отправку файлов. Например, если в форме присутствует поле загрузки изображения.

<form enctype="multipart/form-data">

    <input type="file" name="image" class="image_user">

    <button>Отправить фото</button>

  </form>

Атрибут name в теге form

Атрибут name — используется для идентификации формы на стороне клиента с помощью JavaScript. На стороне сервера в массив $_POST значение атрибута name тега form не передается.

С помощью JavaScript получим HTMLFormElement объект формы со значением “myForm” атрибута name:

<form name="myForm">

    <input type="text" name="field">

    <button>Отправить</button>

  </form>

  <script>

    const forms = document.forms.myForm;

    console.log(forms) // Получаем в консоли HTMLFormElement объект текущей формы

  </script>

Атрибут target

Атрибут target — определяет, где именно будет отображаться результат отправки данных на сервер.

Работает в теге form аналогично как и для тега <a href=””></a>. Поддерживает несколько стандартных для себя значений.

Если использовать для атрибута target значение “_blank” результат отправки будет открыт в отдельной вкладке браузера.

<form target="_blank">

  <!-- Элементы форм -->

</form>

Атрибут autocomplete — определяет показывать ли подсказки для автозаполнения полей ввода на основе ранее вводимых значений.

<form autocomplete="off"></form>

Принимает два значения:

• “off” — отключает показ подсказок автозаполнения.
• “on” — включает автозаполнение. Применяется по умолчанию.

Атрибут novalidate

Атрибут novalidate — отключает браузерную валидацию формы. Полезен при применении кастомной валидации в форме.

<form novalidate>

    <!-- FormElement -->

  </form>

Это были атрибуты, которые необходимы при практической работе с тегом form. Остальные не вижу смысла разбирать так, как они встречаются на практике.

JavaScript события тега form

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

Например, при отправке анимировано показывать popup окно с уведомлением о отправке.

С помощью JavaScript можно прослушивать события отправки и очистки формы.

• submit — событие, возникающее при отправке формы.
• reset — событие, возникающее при очистке формы (при клике на кнопку с type=”reset”)

При прослушивании событий можно в момент его возникновения запускать обработчик. Обработчик представляет из себя js функцию, которая будет запускать определенное действие. Прослушивать данные события можно тремя способами.  

Способ 1: добавление обработчика в HTML

Здесь мы добавляем обработчик прямо в html разметку с помощью атрибутов onsubmit и onreset.

<form name="form" class="form" onsubmit="formSend(event)" onreset="formReset(event)">
   <input type="text" placeholder="text" name="field-text">
    <button>Button Send</button>
    <button type="reset">Button Reset</button>
</form>
JavaScript обработчики
<script>
    function formSend(event) {
      event.preventDefault();
      console.log('Сообщение отправлено')
    }

    function formReset(event) {
      event.preventDefault();
      console.log('Данные удалены')
    }
  </script>

Достоинством данного способа является наглядность и простота. Вполне подойдет для реализации в простых проектах. Недостатком может быть усложнение непосредственно html кода.

Если с помощью return возвращать false, то форма не будет отправлена.

<form name="form" class="form" onsubmit="return formSend(event)" onreset="return formReset(event)"></form>

 Если же обработчик вернет true или undefined, то форма будет отправлена.

 Назначение свойств события в JavaScript

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

Использование метода sddEventListener

Данный метод позволяет программно запускать код обработчика события.

<form name="form" class="form">

  <input type="text" placeholder="text" name="field-text">

  <button type="submit">Button Send</button>

  <button type="reset">Button Reset</button>

</form>

JavaScript:

<script>

  const form = document.querySelector('.form');

  form.addEventListener('submit', (event) => {

    event.preventDefault();

    console.log("Сообщение отправлено")

  })

  form.addEventListener('reset', (event) => {

    event.preventDefault();

    console.log("Поля очищены")

  })

</script>

Данный подход позволяет запускать сразу несколько обработчиков события.

Атрибуты интерактивных элементов формы

Атрибуты HTML элементов позволят расширить функциональность и удобство взаимодействия пользователя с формой. С помощью атрибутов можно более гибко настроить форму и формировать данные при отправке на сервер.

Использование атрибутов позволяет улучшить удобство взаимодействия пользователя с формой и сделает работу с ней более понятной.

Атрибут name

Атрибут name определяет имя текстового поля. По имени можно идентифицировать поле в PHP или JavaScript файлах обработчиках.

По атрибуту name в файле обработчике PHP получено значение (value) элемента.

<input type="text" name="field-text">

Атрибут placeholder

Атрибут placeholder выводит текстовую подсказку в поле. При клике на текстовое поле для того, чтоб установить курсор подсказка пропадает.

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

Атрибут value

Устанавливает начальное значение поля. С помощью данного атрибута можно вывести пред заполненное текстовое поле.

<input type="text" value="Пертович">

Пользователь может изменить заранее установленное значение.

Атрибут required

Атрибут required делает поле обязательным для заполнения.

<input type="text" required>

При попытке отправить данные формы на сервер при не заполненном поле с атрибутом required данные не будут не будут отправлены. Для того, чтоб уведомить пользователя о причине предусмотрено браузерное уведомление.

Внешний вид всплывающего окна определяется браузером.

Атрибут readonly

Атрибут делает поле доступным только для просмотра. Редактирование содержимого поля пользователю не доступно.

<input type="text" readonly>

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

Атрибут disabled

Атрибут делает поле не активным. Пользователь не может взаимодействовать с полем.

<input type="text" disabled>

• Данные поля не отправляются на сервер.
• Пользователь не может ни копировать, ни изменять данные поля.
• Фокус при попытке установить курсор в поле не появляется.

Атрибуты maxlength и minlength

Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести в поле. При попытке ввести большее количество символов, чем установлено в значении атрибута ввод срабатывать не будет.

<input type="text" maxlength="8" minlength="3">

Атрибут minlength устанавливает минимальное количество символов, необходимое для отправки формы на сервер. В противном случае форма отправлена не будет.

Автозаполнение текстовых полей формы

Включить или отключить подсказки автозаполнения текстовых полей данными, которые ранее уже вводились в браузере можно с помощью атрибута autocomplete.

Об этом атрибуте уже шла речь выше в контексте использования его в теге form. В контексте использования атрибута в текстовых полях можно добавить то, что для разных типов полей могут использоваться специфичные значения атрибута.

<form>

    <input type="text" name="name" autocomplete="name" placeholder="Full Name">

    <input type="email" name="email" autocomplete="email" placeholder="Email">

    <input type="tel" name="phone" autocomplete="tel" placeholder="Phone Number">

    <input type="text" name="address" autocomplete="address-line1" placeholder="Address">

    <input type="text" name="city" autocomplete="address-level2" placeholder="City">

    <input type="text" name="postal-code" autocomplete="postal-code" placeholder="Postal Code">

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

</form>

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

Атрибут autofocus

Из названия атрибута не сложно догадаться, что он устанавливает фокус поля при загрузке страницы.

<input type="text" autofocus>

Атрибут pattern

Атрибут задает регулярное выражение, которому будет соответствовать вводимое в поле значение. Это можно использовать для создания костомной валидации.

Применяется к полям типа (type):

• text
• tel
• email
• password
• url
• search

Для улучшения пользовательского опыта работы с формой следует использовать глобальный атрибут title с текстовой подсказкой.

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

Для того, чтоб запретить отправку текста, содержащего спецсимволы на сервер понадобится установить регулярное выражение [A-Za-z0-9]+ в качестве значения атрибута pattern.

<input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" title="Имя пользователя должно содержать только буквы и цифры, без спецсимволов." >

Атрибут title в данной ситуации помимо отображения текста подсказки при наведении выводит текст в окно уведомление о ошибке ввода.

Валидация телефонного номера

<input type="tel" pattern=" \+7\(\d{3}\)\d{3}-\d{2}-\d{2}" title="Формат: +7(999)999-99-99">

Валидация адреса электронной почты

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Введите корректный email">

Пароль с требованиями

<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Минимум 8 символов, включая цифру, строчную и заглавную буквы">

Перечисленные атрибуты могут применятся к разным типам полей. Так же есть уникальные атрибуты, применяемые для какого-то конкретного типа поля.

Поля ввода input

Поле ввода, как и подавляющее большинство элементов формы создается одинарным тегом <input>. Поле ввода служит для передачи текстовых или числовых данных не большого объема.

Записывается с помощью одинарного тега input. Атрибут type является обязательным и указывает браузеру на тип поля. С помощью атрибута type полю задается тип вводимых данных.

<input type="text" name="name_user">

• type=”text” — текстовое поле
• type=”tel” — для ввода номера телефона
• type=”email” — для ввода адреса электронной почты
• type=”password” — для ввода пароля
• type=”url” — для url  адреса
• type=”search” — для поискового запроса
• type=”number” — для ввода числовых значений

Создадим форму отправки данных на сервер, состоящую из перечисленных типов полей (кроме type=”search”).

<form action="#" method="post" name="form">

      <input type="text" name="name_user" placeholder="Имя пользователя" required>

      <input type="tel" name="phone_user" pattern="\+7\(\d{3}\)\d{3}-\d{2}-\d{2}" placeholder="Номер телефона">

      <input type="email" name="email_user" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="E-mail">

      <input type="password" name="password_user" maxlength="16" required placeholder="Пароль">

      <input type="number" name="age_user" value="23">

    </form>

Атрибуты и их значения можно комбинировать в зависимости от конкретной ситуации.

К полям ввода можно так же отнести поля выбора даты и времени. К ним относятся поля типов

Атрибуты полей ввода

К перечисленным полям применимы атрибуты:

• name — имя поля для идентификации его скриптами обработчиками.
• value — значение поля.
• placeholder — текстовая подсказка.
• required — делает поле обязательным.
• readonly — делает поле доступным только для чтения.
• disabled — делает поле не доступным для взаимодействия с ним.
• maxlenfth и minlength — ограничивает количество символов текста (для текстовых полей).
• max и min — ограничивает количество введенных числовых символов (применяется для полей типа “number”, “rahge”, “date”, “datetime-local”, “month”, “week”, “time”).
• pattern — добавляет регулярное выражение для валидации данных.
• autofocus — установит фокус на поле при загрузке страницы.
• form — связывает поле с какой-то формой по id.
• autocapitalize — управляет автоматическим изменением регистра (Значения: “none”, “sentences”, “words”, “characters”).
• autocomplete — включает или отключает автозаполнение (Значения: “on”, “off”).
• spellcheck — включает проверку орфографии (Значения: true, false).
• inputmode — указывает на тип виртуальной клавиатуры (Значения: “text”, “numeric”, “tel”, “email”, “url”)

Стилизация полей ввода с помощью css

Для стилизации текстовых полей ввода существуют специальные для этого свойства.

У текстового поля есть несколько состояний.

• Дефолтное (по умалчанию) состояние
• Состояния фокуса – курсор установлен в поле
• Активное состояние – пользователь вводит текст
• Заполненное поле – валидация данных поля пройдена/не пройдена

При дефолтном состоянии стилизация поля осуществляется с помощью стандартных для всех html элементов свойств.

В момент ввода или фокуса стилизация поля доступна через псевдоклассы:

• input:focus{/*Стили при фокусе поля*/}
• input:active{/*Стили при вводе текста */}
• input:valid{/*Стили при пройдений валидации */}
• input:invalid{/*Стили при не пройдений валидации */}

В состоянии фокуса рамка поля меняет свои стили. По умолчанию за это отвечает свойство outline. Для управления поведением можно заранее указать outline: none; и стилизовать бордер используя псевдокласс.

Например, это можно сделать так:

input, textarea{

  outline: none;

  &:focus{

    border: 1px solid rgb(84, 31, 244);

  }

}

Текстовое поле textarea

Элемент <textarea> — это HTML-элемент поля ввода, предназначенный для ввода многострочного текста. Элемент отличается от <input type="text">, который предназначен для ввода только одной строки текста. textarea используется для объемного текста в несколько строк.

<label for="message">Ваше сообщение:</label>

<textarea id="message" name="message" rows="4" cols="50" placeholder="Введите текст..."></textarea>

 В формах обратной связи используется для ввода сообщений, комментариев и для других случаев, где требуется ввести текст большего объема, чем в поле типа «имя пользователи».

Поле textarea имеет существенное отличие от других полей, предназначенных для ввода текста – возможность изменять размеры самого поля при помощи курсора. Так же можно изначально задать размеры поля с помощью атрибутов тега <textarea>.

🔹 Основные атрибуты <textarea>:

• rows – задает количество строк (пример: rows=»4″).
• cols – задает ширину (пример: cols=»50″).
• placeholder – текст-подсказка внутри поля.
• maxlength – ограничение по количеству символов.
• required – делает поле обязательным для заполнения.
• readonly – запрещает редактирование (только для чтения).
• disabled – делает поле неактивным.
• wrap – задает перенос строк (soft, hard).