HTML+CSS Формы

Уроки HTML+CSS: Формы

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

Главным тегов, в котором создаются поля, является тег <form></form>.

Формы создаются следующим образом:

  • Внутри тега form записываются поля и текстовые элементы, которые должны находиться в форме. Тег input создает поля в которые записывается информация. В зависимости от типа input , он передает определенную информацию.
  • Внутри тега lable записывается текст который будет выводиться в форме. Как правило текст используется для обозначения информации, которую должен ввести пользователь(например: введите почту). Так же для этих целей можно использовать обычный тег p , обозначающий абзац.
  • Для того чтобы в дальнейшем эту форму можно было обрабатывать, для тега form необходимо задать некоторые атрибуты. Атрибут method указывает, каким методом будет передаваться информация. Он принимает 2 значения: POST и GET. POST указывает, что данные передаваемые из почты, должны скрываться. GET будет передавать значения, введенные в полях, в URL. Второй атрибут это action он указывает путь к файлу обработчику в котором будет находиться php скрипт.
  • Для каждого input необходимо указать уникальное имя, которое прописывается в атрибут name. Это имя, аналогично class и имеет туже функцию(используется для конкретного вызова определеного поля)

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

<form action="путь_к_файлу_обработчика" method="post" name="frm_feedback">
<label>Ваше имя:</label><br/>
<input type="text" name="user_name">" /><br/>
<label>Ваш e-mail:</label><br/>
<input type="text" name="user_email">" /><br/>
<label>Текст сообщения:</label><br/>
<textarea name="text_comment"></textarea>
<br/>
<input type="submit" value="Отправить" name="btn_submit" />
</form>

Значения атрибута type для input

Значение text

По стандарту type имеет значение text

Значение checkbox

Выбери меня

Значение color

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

Значение date

Используется для выбора даты. Предназначен для той же цели что и предыдущий тип…

Значение datetime-local

Значение hidden

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

Значение radio

Значение 1

Значение 2

Значение range

Так же вы можете добавить дополнительные атрибуты которые будут указывать крайнее максимальное (max="") и минимальное (min="") значения для ползунка, а так же на каком значение должен находиться ползунок при появление (value="").

Типы input для валидации

Так же в input существуют типы которые используются для валидации форм. В большинстве случаев для валидации используют javascript и php обработчики, но и такой метод можно использовать. Данные типы проверяют чтобы в поле не передавались некорректные данные.

В случае ввода недопустимых символов, будет высвечиваться сообщение.

Значение email


Значение password

Значение tel


<textarea></textarea>

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

Атрибут  Значение
cols Ширина поля в символах.
row Высота поля в строках
disabled Блокирует доступ и изменение элемента.
placeholder Указывает замещающийся текст.
required Обязательное для заполнения поле.
tabindex Порядок перехода между элементами при нажатии на клавишу Tab.
wrap Параметры переноса строк.

soft – Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка.

hard – Слова в поле переносятся механически, чтобы они поместились в размер области. При этом значении обязательно должен присутствовать атрибут cols.

off – Нестандартное значение. Переносы строк отключены.

maxlength Максимальное число введенных символов.
name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly Устанавливает, что поле не может изменяться пользователем.

 

Как проверить поле на заполненность?

Для проверки поля на заполненность необходимо прописать дополнительный атрибут require. Этот атрибут  может не иметь значений. Его можно записать вот так <input type="text" require />

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

Атрибуты для вывода текста.

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

Первый атрибут – value. Он добавляет текст в поле. Этот текст вы можете скопировать или удалить.

Второй – placeholder. Данный атрибут добавляет текст, который исчезает при нажатии и работе с полем.

Оставить комментарий

avatar
  Подписаться  
Уведомление о