Как сделать форму в HTML — руководство с примерами

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

Примеры как сделать форму в HTML

Для начала, нужно понять что сама форма имеет тег <form>, в котором есть обязательные и не обязательные атрибуты. Например, наша форма должна отправляться по определенному адресу, то есть, туда где есть обработка данных с этой формы. Адрес обработчика указывается в атрибуте action="". Далее, нам обязательно нужно указать метод отправляемых данных формы, основные методы это GET или POST.

• GET — этот метод виден в адресной строке. То есть, отправленные данные из формы будут видны в адресной строке браузера в виде: ?name=John&surname=Smith и на сервер они попадут в глобальной переменной $_GET[′name′] и $_GET[′surname′].
• POST — этот метод не виден никаким образом при отправке формы. На сервер данные попадают в глобальной переменной $_POST.

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

Сейчас мы видим пример создания самой формы, как это было описано выше:

<form action="/url-action" method="post">
  <!-- Элементы формы -->
</form>

Добавление элементов HTML формы

Элементы формы бывают разные, как обычные текстовые, так и файлы, цвет, дата и т.д. Сейчас разберем всего три элемента для создания простой формы, это текстовое поле для имени, email поле для электронной почты и кнопку для отправки формы submit.

<form action="/url-action" method="post">
  <div style="margin-top: 30px;">
    <label for="name"> Ваше имя:
      <input type="text" name="name" id="name">
    </label>
  </div>
  <div style="margin-top: 30px;">
    <label for="email"> Ваш e-mail:
      <input type="email" name="email" id="email">
    </label>
  </div>
  <div style="margin-top: 30px;">
    <input type="submit" value="Сохранить">
  </div>
</form>

Для более удобного вида мы изначально создали теги div и добавили в них атрибут style и прописали верхний отступ на 30 пикселей. Но можно и разместить все аккуратно в таблице, как сделать таблицу в html мы уже рассказывали.
Затем в них поместили теги label для описания элемента формы, и наконец сам элемент формы input. В котором в свою очередь уже прописали нужные атрибуты. Основные атрибуты могут быть следующих типов:

• type — тип элемента формы.
  • text — обычное текстовое поле, подходит для указания имени, фамилии, адреса и т.д.
  • email — как уже понятно,данное поле подходит для указания адреса электронной почты.
  • password — это поле подходит для указания пароля, либо других секретных кодов.
  • tel — поле для указания номера телефона.
  • number — поле для числового значения.
  • date — поле для указания даты.
  • datetime-local — поле для указания даты и времени.
  • time — поле для указания времени.
  • month — поле для указания месяца.
  • week — поле для указания недели.
  • color — поле для выбора цвета. Подходит для каких либо настроек профиля или заказа товара.
  • file — поле для выбора и загрузки файла.
  • radio — поле для выбора одного из предложенных вариантов.
  • checkbox — поле для множественного выбора вариантов.
  • range — ползунок для выбора чисел в диапазоне.
  • search — поле строки поиска.
  • url — поле для URL адреса.
  • submit — поле для кнопки отправки формы.
  • reset — поле для сброса всех заполненных данных формы.
  • image — поле для отображения изображения как кнопки.
  • hidden — скрытое поле формы, данные которого пользователь не видит но они также отправляются как и остальные.
• name — имя элемента формы которое будет принимать сервер $_POST[′surname′], $_POST[′email′] и т.п.
• value — значение поля по умолчанию.
• placeholder — подсказка вписанная в фон самого элемента формы.

Выпадающий список HTML формы

Выпадающий список формы довольно часто можно встретить,например,при выборе размера или цвета товара. Обозначается данный элемент тегом <select>, в который вкладываются уже другие элементы обозначающиеся тегом <option> и у одного из них может быть атрибут selected который делает этот элемент выбранный по умолчанию.

<form action="/url-action" method="post">
  <div style="margin-top: 30px;">
    <label for="name"> Ваше имя:
      <select name="name" id="name">
        <option value="Пётр" selected>Пётр</option>
        <option value="Дмитрий">Дмитрий</option>
        <option value="Константин">Константин</option>
      </select>
    </label>
  </div>
  <div style="margin-top: 30px;">
    <input type="submit" value="Сохранить">
  </div>
</form>

Итог создания HTML формы

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