Создание HTML форм

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea>, списки <select>, подсказки и т.д. Весь код формы заключается в элемент <form>.

Большая часть информации веб-форм передаётся с помощью элемента <input>. Для ввода одной строки текста применяется элемент <input type="text">, для нескольких строк — элемент <textarea>. Элемент <select> создает выпадающий список.

Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<label for="lastname">Last Name</label><input type="text" id="lastname">

<input type="text" id="lastname"><label for="lastname">Last Name</label>

<label>Last Name<input type="text" name="lastname"></label>

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

<fieldset>
 <legend>Контактная информация</legend>
 <label>Имя<input type="text" required></label>
 <label>E-mail<input type="email" required></label>
</fieldset>
fieldset
Рис. 1. Группировка полей формы

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

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки *, установленный возле названия поля. В новой спецификации появился специальный атрибут required, который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

<input type="text" required placeholder="Ваше имя">

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

input:focus {
background: #eaeaea;
}

Ещё один полезный html5-атрибут — атрибут autofocus. Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).

Пример создания формы регистрации

HTML разметка

<div class="form-wrap">
  <div class="profile"><img src="https://html5book.ru/wp-content/uploads/2016/10/profile-image.png">
    <h1>Регистрация</h1>
  </div>
  <form method="post" action="form.php">
    <div>
      <label for="name">Имя</label>
      <input type="text" name="name" required>
    </div>
    <div class="radio">
      <span>Пол</span>
      <label>
        <input type="radio" name="sex" value="мужской">мужской
        <div class="radio-control male"></div>
      </label>
      <label>
        <input type="radio" name="sex" value="женский">женский
        <div class="radio-control female"></div>
      </label>
    </div>
    <div>
      <label for="email">E-mail</label>
      <input type="email" name="email" required>
    </div>
    <div>
      <label for="country">Страна</label>
      <select name="country">
        <option>Выберите страну проживания</option>
        <option value="Россия">Россия</option> 
        <option value="Украина">Украина</option> 
        <option value="Беларусь">Беларусь</option> 
      </select> 
      <div class="select-arrow"></div> 
    </div> 
    <button type="submit">Отправить</button> 
  </form> 
</div>

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

form-default
Рис. 2. Внешний вид формы по умолчанию

Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.

.form-wrap {
  width: 550px;
  background: #ffd500;
  border-radius: 20px;
}
.form-wrap *{transition: .1s linear}
.profile {
  width: 240px;
  float: left;
  text-align: center;
  padding: 30px;
}
form {
  background: white;
  float: left;
  width: calc(100% - 240px);
  padding: 30px;
  border-radius: 0 20px 20px 0;
  color: #7b7b7b; 
}
.form-wrap:after, form div:after {
  content: "";
  display: table;
  clear: both;
}
form div {
  margin-bottom: 15px;
  position: relative;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  position: relative;
  margin-top: 50px;
}
h1:after {
  content: "\f138";
  font-size: 40px;
  font-family: FontAwesome;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

/********************** стилизация элементов формы **********************/
label, span {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
input[type="text"], input[type="email"] {
  border-width: 0;
  outline: none;
  margin: 0;
  width: 100%;
  padding: 10px 15px;
  background: #e6e6e6;
}
input[type="text"]:focus, input[type="email"]:focus {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio label {
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  width: 50%;
  float: left;
  line-height: 40px;
}
.radio input {
  position: absolute;  
  opacity: 0;
}
.radio-control {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: #e6e6e6;
  border-radius: 50%;
  text-align: center;
}
.male:before {
  content: "\f222";
  font-family: FontAwesome;
  font-weight: bold;
}
.female:before {
  content: "\f221";
  font-family: FontAwesome;
  font-weight: bold;
}
.radio label:hover input ~ .radio-control,
.radiol input:focus ~ .radio-control {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio input:checked ~ .radio-control {
  color: red;
}
select {
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/
  -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/
}
select::-ms-expand {
  display: none; /*убираем галочку в IE*/
}
.select-arrow {
  position: absolute;
  top: 38px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
button {
  padding: 10px 0;
  border-width: 0;
  display: block;
  width: 120px;
  margin: 25px auto 0;
  background: #60e6c5;
  color: white;
  font-size: 14px;
  outline: none;
  text-transform: uppercase;
}

/********************** добавляем форме адаптивность **********************/
@media (max-width: 600px) {
  .form-wrap {margin: 20px auto; max-width: 550px; width:100%;}
  .profile, form {float: none; width: 100%;}
  h1 {margin-top: auto; padding-bottom: 50px;}
  form {border-radius: 0 0 20px 20px;}
}

Файл form.php

<?php
  $name = trim(strip_tags($_POST["name"]));
  $sex = trim(strip_tags($_POST["sex"]));
  $email = trim(strip_tags($_POST["email"]));
  $country = trim(strip_tags($_POST["country"]));
  $subject = "Регистрация на сайте url_вашего_сайта";
  $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country";
  $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n";
  $headers .= "From: Ваше_имя <ваш_email>" . "\r\n";
  $headers .= "Bcc: ваш_email". "\r\n";
  if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){
    mail($email, $subject, $msg, $headers);
    echo "Спасибо! Вы успешно зарегистрировались.";
    }
?>

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.

See the Pen ORxGZq by Elena (@html5book) on CodePen.

  • Создание Сайтов

    Тоже интересный урок. Формы — это вообще редкость. Спасибо, Елена. Буду ждать новые уроки.

  • Влад Н

    Добрый день!
    А пример обработчика данной формы, с отправкой на почту пользователю и админу, можете предоставить?
    За ранее, благодарен за быстрый ответ.

  • Влад Н

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

    • Здравствуйте, Влад. Вы немного нетерпеливы. У меня есть и выходные дни, и рабочее и нерабочее время. Чуть позже добавлю простой пример обработчика формы с саму статью, так как дискус удаляет php-код из комментариев.

    • Всё готово, смотрите код.

    • Создание Сайтов

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

  • В 12 строке «mail($email, $subject, $msg, $headers);» вместо $email — куда должен быть свой адрес приёма .

  • Виноват, Вы отправляете сообщение тому, кто зарегистрировался.

    • Я не стала подробно расписывать, так как php-код не является целью этого сайта. В 10 строчке вы указываете свой емайл, чтобы вам приходила скрытая копия письма. Строки 2-5 сохраняют в переменные данные, введённые в поля формы посетителем вашего сайта.

  • Александр Тимощенко

    после нажатия кнопки отправить, перекидывает на страницу вида мойсайт/send.пхп и все. пустой белый экран, на почту ничего не приходит.
    куда смотреть? я так понимаю хтмл перенаправляет, а вот в пхп уже не выполняется код?

    • Не знаю, что вы там наворотили, но если делать всё как написано, письма приходят. Почтовый домен у вас создан?

      • Александр Тимощенко

        использую gmail

        • Почта отправляется с помощью SMTP. Для использования SMTP необходимо настроить почтовый сервер на вашем хостинге (просто создать его) или настроить SMTP для Gmail (погуглите как).

          • Александр Тимощенко

            Хотелось бы получить (либо получить ссылочку что почитать) разъяснения. Меня волнует больше не работоспособность в данных момент, а понять принцип работы.
            1) В теге form action (в старом html — ныне уже пхп) мы указываем файл (путь — вопрос, вида ссылки мойсайт/send пхп? Либо как в коде хтмл при выборе той же картинки выбираем папку и сам файл), который вступает в работу при заполнении формы и отправки?
            На этом этапе вступает в работу всё, что указано в файле пхп?
            2) Как (почему) файл пхп понимает что указанная почта моя (с которой отправлять)? Видел как то решения с вводам е-маила и пароля отправления — тут всё понятно, но в нашем случае нет пароля? Я могу указать что ли чужую почту? Думаю нет. Так как, без ввода каких то данных сервера отправки, он понимает?
            3) Если я компаную ajax запрос для вывода на монитор окна с надписью ваше сообщение отправлено, и при этом происходит ресет форм (без перезагрузки страницы) — нашел вот такой интересный вариант для себя — тут я не могу понять. Написано так — подключаем javascript. Я делал на бутстрап. Достаточно выполнить внизу(и внизу ЛИ) «js/bootstrap.min.js, либо требуется подключать ссылкой (не могу найти, но видел — ссылка на сторонний сайт)?
            И почему ajax добавляется в сам главный html документ? Т.е. если я хочу ввставить функцию ajax, внизу я делаю скрипт, вписываю код, (он отличается от html и больше похож на пхп)?
            Т.е. выглядит это так ? http://prntscr.com/fap859
            При этом перед, или после строки с подключением java ascript (вот и нашлась ссылочка) должен находится КОД моего сайта с формами?
            Либо всё подключается сразу после (перед) непосредственно кодом ФОРМЫ?
            Извините за назойливость, может не ваш профиль) Но мне необходимо уловить смысл работы. Всё-таки даже самый простейший сайт не будет работать без форм

          • 1) Файл не может быть с расширением .html, только .php. Путь к файлу может быть как относительный, так и абсолютный. Форма же у вас на сайте и файл обработчика тоже у вас на сервере. Если он где-то в другом месте храниться, то только абсолютный путь. Файл так и называется — обработчик формы, то есть код внутри обрабатывает данные из полей формы плюс дополнительная информация, говорящая что дальше делать с этими данными — просто пересылать их или еще можно задать сохранение их в базу данных. Но с этим вопросом уже не ко мне.
            2) Письмо с данными формы, введенными посетителем, будет приходить вам на почту. Зачем вам указывать чужую почту, как вы будете вдеть эти письма? А так сервер не различает, ваша это почта или еще чья.
            3) Не могу ответить, с ajax еще не работала.
            Для рассылки пользуюсь сервисом MailChimp, формы на сайте делаю с помощью плагина Contact Form 7. Не все нужно писать с нуля, есть готовые рабочие решения, поищите что-то похожее для джумлы.

          • Александр Тимощенко

            3) Не могу ответить, с ajax еще не работала.
            Для рассылки пользуюсь сервисом MailChimp, формы на сайте делаю с помощью плагина Contact Form 7. Не все нужно писать с нуля, есть готовые рабочие решения, поищите что-то похожее для джумлы.
            Не, давайте про джумлу забудем. Теперь только html. Только хардкор ) Пока что )))))
            Это всё для обычного хтмл сайта.

          • Александр Тимощенко

            еще вопросик. я взял именно вашу форму. ваш код плменяв емаил. заполняю, нажимаю, переадресовывает на адрес мойсайт!/form.пхп и все, белый экран. ничего не приходит

  • Максим Водолажский

    Добрый день. Подскажите пожалуйста, как решить одну проблему с формой. Нужно собрать и обработать данные о публикациях в некотором перечне журналов. Эти журналы, а их около 100 шт., имеют свои характеристики: рейтинг определенных баз, в которых эти журналы индексируются. Для этого существует экселевский файл. Задача — каким-то образом связать названия журналов из выпадающего списка в форме с базой данных журналов. Потом необходимо обработать данные и выдать результат «анкеты» пользователю и мне на почту. Заранее благодарю за идеи! 😉