Формы
Ter <form>
контейнер для формы размещенной на странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
У него есть следующие атрибуты:
action - ссылка на файл, который должен будет обработать данные формы.
method - метод запроса на сервер, есть два основных значения: GET и POST. По умолчанию GET
target - указывает как будут отображены результаты, в текущем окне либо новой вкладке.
autocomplete - контролирует автозаполнение форм, имеет проблемы с кроссбраузерностью.
В html5 добавили update и delete. <<
Элементы формы, тег <input>
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
<input type="text" name="inp" value=" same value " />
Имеет следующие обязательные атрибуты:
name - имя элемента формы
value - значение, которое будет передано на сервер
type - тип поля
Типы элементов формы, атрибут type
input type="text"
- элемент формы, создает текстовое поле для ввода.input type="password"
- элемент формы, который реализует текстовое поле для ввода пароля. При этом все символы внутри заменяются на маркер "точка".input type="checkbox"
- элемент формы, который реализует квадратное поле с галочкой. Имеет два состояния - выбранный и не выбранный.input type="radio"
- элемент формы, который реализует radio-переключатель. Имеет два состояния - выбранный и не выбранный.input type="email"
- тип ввода данных почтового адресаinput type="url"
- тип ввода данных urlinput type="date"
- тип ввода данных датыinput type="time"
- тип ввода данных времениinput type="datetime"
- тип ввода данных объединяет предыдущие 2-а в одинinput type="month"
- тип ввода данных месяцаinput type="week"
- тип ввода данных номера неделиinput type="number"
- тип ввода данных числа(но не телефонных номеров)input type="range"
- тип ввода данных range отображается в виде ползункаinput type="search"
- тип ввода данных search. Разница с "text" чисто стилистическая. Так же в Safary есть уникальный атрибут добавляющий историю недавних запросов.input type="tel"
- используется для ввода телефонного номера.input type="color"
- позволяет пользователю ввести значение цвета выбрав из палитры.
Создание кнопок на форме
Есть несколько основных способов реализовать кнопки в разметке.
Первый - использовать элементы input с особенным значением атрибута type (submit, reset):
type="submit"
- элемент формы, который реализует кнопку отправки данных на сервер. При нажатии формируется запрос и отправляется файлу, указанному в атрибуте action^"".type="reset"
- элемент формы, который реализует кнопку очистки полей формы. При этом поля не просто очищаются от внесенных данных, но и восстанавливают значения по умолчанию.
Второй - создание элемента input со значением атрибута type = button. При этом созданная кнопка может реализовать любой функционал, указанный в ее дополнительных атрибутах обработчиков событий.
<inputtype="button" name="button" value="Do" onclick="ToDo()" />
Выпадающий список, тег <select>...</select>
Тег select
- тег, контейнер, содержащий в себе описание выпадающего списка. Каждый элемент списка описан внутри с помощью отдельного тега option. Содержимое тега option
будет отображено пользователям в качестве элементов выпадающего списка, но на сервер будут отправлены именно значения атрибутов value
и name
.
Если Вам необходимо реализовать список с многозначным выбором, то следует указать атрибут
multiple="multiple"
Различные типы тега <input>
Также есть еще несколько особенных типов элементов input:
1- type = "hidden"
- элемент формы, который не отображается пользователю, при этом передается на сервер при отправке. Используется для передачи параметров, которые не должны быть видны либо изменяться пользователем.
type = "file"
- элемент формы, предназначенный для создания поля выбора загрузки файла. Реализован в каждом браузере по-разному.
Группировка элементов формы, тег <fieldset>
Тег <fieldset>
предназначен для группирования элементов формы. Такая
группировка облегчает работу с формами, содержащими большое число
данных.
Тег <legend>
применяется для создания заголовка группы элементов
формы, которая определяется с помощью тега <fieldset>
.
Тег <textarea>...</textarea>
<textarea>
- тег, предназначенный для создания многострочного поля для ввода. Имеет специальные атрибуты rows cols, которые соответственно указывают его высоту и ширину.
<textarea cols="100" rows="4">content</textarea>
При этом, его реализация в разных браузерах тоже отличается. В некоторых, он приобретает возможность изменять размер, расширяться, в некоторых -отличается визуальным видом.
Устаревшие атрибуты элементов формы
В связи с развитием HTML некоторые элементы, а также атрибуты устарели и потеряли свою значимость, но так как сайты не «совершенствуются» самостоятельно, они еще воспринимаются в некоторых браузерах.
Ниже предоставлен список, некоторых из них:
Align - атрибут, отвечающий за выравнивание, работает не во всех полях для ввода.
Атрибуты alt и title отвечают за значение, которое пользователю браузер будет выдавать как подсказку при наведении на элемент, с текстом, написанном в этих атрибутах.
Атрибут border - устанавливает рамку вокруг элементов, в текущих версиях браузеров не работает.
Атрибут checked
Атрибут checked - отвечает за состояние элемента, выбран он или нет.
Используется для двух типов элемента input, при этом необходимо помнить об особенностях их группировки:
Checkbox - при группировке элементов с помощью одинакового значения атрибута name, в активное состояние могут быть установлены одновременно несколько элементов группы.
Radio - при группировке элементов с помощью одинакового значения атрибута name, в активное состояние может быть установлен одновременно только один элемент группы.
Атрибут selected
Атрибут selected - атрибут, который устанавливает определенный элемент выпадающего списка, как значение по умолчанию.
Атрибуты disabled и readonly
Атрибут disabled - указывает на то, что элемент формы должен отображаться пользователю не активным и быть не восприимчивым к изменениям пользователя.
Атрибут readonly позволяет сделать элемент не восприимчивым к изменениям пользователя.
Отличие между ними зависит от браузера, а точнее от реализации элементов с данными атрибутами.
Атрибуты size и maxlength
Для управления размерами текстовых полей и установкой максимально допустимых значений в разметке предусмотрены специальные атрибуты:
Атрибут size используется для указания размеров текстового поля для ввода.
Атрибут maxlength используется для того, чтобы задать максимально допустимое значение для текстового поля.
<inputtype="text" name="first_name" value="Mickey" size="120" maxlength="100" />
Новые атрибуты элемента <input>
autocomplite
- по умолчанию поле ввода наследует состояние автозаполнения формы к которой относится. Автозаполнение для форм включено по умолчанию.min, max
- атрибуты ограничивают диапазон вводимых значенийmultiple
- в html5 не нов, но позволяет загружать несколько файловinput type=file
pattern
- позволяет создавать регулярные выраженияstep
- отвечает за степень подробности вводимых данныхlist
- служит для связывания с элементом <datalist> в котором есть заготовленные для выбора элементы и в случае отсутствия подходящего позволяет ввести и отправить свой вариант/информацию.autofocus
- курсор помещается в поле при загрузке страницыplaceholder
- подсказка, для какой информации предназначено полеrequired
- поле должно быть проверенно и заполнено иначе информация не будет отправлена и браузер вернет ошибкуform
- атрибут связывающий эл-ты(вынесенные из тега <form>) с формой.
///
Полезные ссылки и материалы к ДЗ
///
Last updated