html и css для начинающих

кнопка удаления
кнопка удаления
кнопка меню

Формы в HTML

Понятие формы в HTML,
основные элементы и атрибуты


Формы позволяют собирать информацию вводимую посетителями сайта: логины и пароли, ответы на вопросы анкеты, комментарии и т.д. Для создания формы используется элемент <form></form>. Между открывающим и закрывающим тегом размещается данные формы.

Атрибутами элемента являются:

Итак, для того чтобы создать компонент формы используется элемент <input> (нет закрывающего тега), с атрибутами:

Атрибут type указывает, что именно мы хотим сделать, например, если у атрибута type значение text, это значит, что мы хотим созать однострочное поле для ввода текста.

Атрибут name – идентификация отправленных пользователем данных на сервер.

Можно использовать атрибут maxlenght – задает максимальное количество знаков вводимых пользователем.

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

Поля ввода в HTML - формах

Поле ввода текста


Для создания поля ввода текста атрибуту type задаем значение text, атрибуту name название информации которую вводит пользователь, например username (имя пользователя), атрибуту maxlenght - ограничение по знакам, например 15

Пример:

Поле ввода текста

Имя пользователя:

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


Для создания поля ввода пароля атрибуту type присваивается значение password. Создается такое же поле ввода, но при вводе символы маскируется. Это не значит, что вводимые данные защищены. Не используйте эту форму, для отправки таких данных как номер банковской карты и т.п.

Пример:

поле ввода пароля

Имя пользователя:

Пароль:

Поле ввода нескольких строк текста


Для создания поля для ввода текста объемом несколько строк (комментарий, например) используем элемент <textarea> (есть закрывающий тег), указываем атрибут name. Текст между тегами <textarea> и </textarea> будет виден в поле ввода текста, пользователь сможет его удалить и ввести свой текст.
Можно встретить атрибуты cols – устанавливает ширину поля (количество вводимых символов в строке) и rows – высота поля в строках.

Комментарии

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

Поле загрузки файлов


Для того, чтобы посетитель мог размещать файлы (видео, аудио и т.п.) на сайте используем элемент <input> и атрибут type со значением file, это позволит нам создать поле, возле которого помещается кнопка «Обзор».

Далее нужно создать кнопку подтверждения submite, для этого используем элемент <input>, атрибут type со значением submit и атрибут value - текст на кнопке (например, «загрузить», «отправить» и .т.п.) И обязательно, с такими формами используйте method post!

поле загрузки файла

Загрузите свой видео-файл:


Кнопки, переключатели,
флажки, списки

Графическая кнопка


Вместо стандартной кнопки подтверждения, можно использовать собственное изображение. Для этого атрибуту type нужно придать значение image, указать src для файла с изображением, так же можно добавить атрибуты width и height, атрибут atl тоже может присутствовать.

Графическая кнопка

Подпишись на наши обновления!

Переключатели


Переключатели позволяют пользователю выбрать один вариант ответа из множества. Где можно встретить переключатели? В тестах или анкетах, в интернет-магазинах, при выборе размера, цвета и т.п. В общем, хорошая штука!
Для того, чтобы создать форму с переключателями, используем элемент <input> для компонентов формы и присваиваем атрибуту type значение radio. Атрибут name отправляется серверу вместе со значением переключателя. Например, пользователю нужно выбрать цвет, значит значение атрибута name - color, или выбрать нужно жанр музыки, то значение атрибута name будет genre и.т.п.

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

Атрибут value - это значение каждого переключателя. Должен быть уникальным для каждого переключателя.

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

переключатели

Выберите свой любимый цвет:
красный синий желтый белый зеленый

Флажки


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

Выберите свой любимый цвет:
красный синий желтый белый зеленый

Раскрывающиеся списки


Такой список раскрывается, если щелкнуть мышкой по полю формы. Для чего? Ну, если список вариантов ответов слишком длинный, этот вариант очень удобен. Для создания раскрывающегося списка нужно использовать элемент<select> с атрибутом name (имя элемента формы, отправляемого на сервер) в открывающем теге.
Внутри этого элемента 2 и более (сколько нужно) элементов <option>, в открывающем теге указываются следующие атрибуты:

Между открывающим и закрывающим тегом <option> указывается значение варианта овета.

Раскрывающиеся списки

Выберите цвет платья:

Добавив в элемент <select> атрибут size, вы сможете создать поле, в котором будут отображаться сразу несколько пунктов списка, значением является количество таких пунктов. А если добавить атрибут multiple со значением multiple, пользователь сможет выбрать несколько вариантов ответа сразу.

Выбор нескольких пунктов

Раскрывающийся список с выбором

Выберите свой любимый цвет: (можно выбрать несколько вариантов сразу удерживая клавишу Ctrl

Кнопки и скрытые
элементы формы

Элемент button и скрытые элементы формы


В язык HTML был добавлен элемент <button> </button> для контроля над внешним видом кнопок (можно сочетать на кнопке изображение и текст). С помощью CSS можно «нарисовать» красивую кнопку, но об этом позже (в разделе сайта посвященном CSS)

Кнопка

Скрытые элементы в форме, позволяют размещать данные, не видимые посетителям, но важные для разработчика.
Для этого используем элемент <input> с атрибутом type, которому дается значение hidden, атрибуты name и value указывают значение отправляемой на сервер информации.

скрытые

Метки, элемент lable


У каждого элемента формы должна быть своя надпись или метка, которая создается с помощью элемента <lable></lable>
Такая метка позволяет упростить пользование сайтом людям с нарушением зрения, да и не только им. В чем упрощение? А в том, что можно щелкнуть мышкой не на сам «флажок» или «переключатель» (еще попробуй - попади!), а на его значение.

Располагать элемент <lable> можно двумя способами:

Можно окружить им сам элемент и его значение, т.е. метку.

способ первый

Выберите свой любимый цвет:


Можно указать этот элемент отдельно использую атрибут for. Нужно будет каждому значению присвоить id.

способ второй

Выберите свой любимый цвет:


Группировка данных формы,
валидация формы

Элементы fieldset и legend


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

легенда
Обратная связь

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

Атрибут required


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

В HTML5 для встроенной проверки данных служит атрибут required, он используется с любым элементом формы принимающим пользовательский ввод. В HTML5 атрибуту не требуется значение, а в HTML4 атрибут required принимает значение required.
Пример:

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

Имя пользователя:

Пароль:

Результат: Пример