Каждый контейнер выполняет свою роль:
input-width
– этот контейнер задает результирующую ширину текстового поля;width-setter
– этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.
Вот набор стилей, который разъяснит эту конструкцию:
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
}
Из стилей получается, что элемент input-width
задает ширину, которую должно было занимать текстовое поле. Элемент width-setter
задает ширину input-элемента меньше на горизонтальные внутренние отступы . Стоит заметить, что его внешние отступы поля (margin
) должны быть равны padding-left
и padding-right
для элемента input.width-setter
на величину своих горизонтальных отступов (padding
), а в IE6 - растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin
. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left
). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter
. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute
.
Input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
position:relative;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
position:absolute;
left:-9px;
top:0;
}
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.width
для контейнера input-width
.
Примечание
. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) - и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
В саму оболочку HTML-формы между тегами
вставляются кнопки
для отправки или очищения данных, кнопки для подтверждения выбора, переключатели, выпадающие списки и поля для ввода данных,
последними как раз займемся сейчас.
Тег type
атрибут тега input , который указывает тип поля, в данном случае он не обязателен,
с точки зрения спецификации по HTML это значение(text) по умолчанию, но лично я советую его вставлять всегда. name
это очень важный атрибут и является обязательным!!! Он является кодификатором данного поля , сценарии как раз
и ждут имена полей с каким-то значением. Имя этого атрибута может начинаться только с латинской буквы и заканчиваться ними,
между буквами может использоваться дефис. value
атрибут который обозначает значение поля, или точнее значение атрибута name
,
эти атрибуты всегда отправляются в сценарий парой, name=value
или login=ваш_логин. Этот атрибут не является обязательным,
и вставляется только для того что-бы в поле отображался какой либо текст, в моем примере введите логин
. size
этот атрибут не является обязательным, и устанавливает только количество символов для отображения, в моем примере 20, а ввести можно и 1000, но
отображаться будут только 20. Кстати 20 задавать нет смысла т.к. это значение по умолчанию, используйте этот атрибут если вам нужно больше или меньше 20 символов
для отображения. maxlength
этот атрибут служит для ограничение символов для ввода, попробуйте в
моем примере стереть текст введите логин
и набрать больше 5, и у вас это не получится!!!
Представите что кто-то скопирует текст какой либо книги и вставит в поле где должен быть логин, это может круто увеличить нагрузку на ваш сервер, а с этим ограничителем у этого
чудо-посетителя ничего не получится!!! Ограничивать 5 символами я вам вообще не рекомендую, желательно чтобы это значение было порядка 32 или даже 64!!!
Поле для ввода паролейзначения "password" для атрибута type
. Это поле служит для ввода
паролей или прочего текста который не должен видеть посторонний глаз.
Скрытое поле:
Поле для загрузки файла: enctype
в теге form
должно быть "multipart/form-data"
,
чтобы браузер не кодировал, а сервер на котором лежит скрипт(сценарий) не декодировал эти файлы, т.к это может просто разрушить их.
Поле для отправки комментария:
textarea
- это тег для поля, он является парным!!! name
вам уже известен. rows
этот атрибут устанавливает количество строчек, в моем примере 4строки. cols
а этот атрибут устанавливает количество букв в одной строке.
Это и все поля которые пользователь может заполнять самостоятельно, за исключением type="hidden"
.
Чаще всего в формах используется тег различных атрибутов . Семантика type
.
Атрибуты тега
type
Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение
text
.
Возможные значения:
Не все браузеры поддерживают типы, добавленные в HTML5.
Autocomplete="off"
Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п.
.setAttribute("autocomplete","off");
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
уникальное имя , иначе сценарий
не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно
соответствовать имени, которое описано для него в программе обработки.
value
Значение поля по умолчанию или надпись на кнопке.
size
Размер поля типа .
maxlength
Ограничение на количество символов, которые можно ввести в поле типа .
readonly="readonly" или ""
Запрещает изменение элемента.
required
Автоматически проверяет заполнено ли поле.Минимальное значение числа в поле типа number
.
max
Максимальное значение числа в поле типа number
.
step
Шаг изменения числа в поле типа number
.
pattern
Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern .
placeholder
Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
В IE и Firefox (до 18 версии) placeholder
считается псевдоклассом, а в остальных – псевдоэлементом.
РЕЗУЛЬТАТ:
List
Список вариантов, которые можно выбирать при наборе в текстовом поле.
Типы элемента INPUT
Кнопка BUTTON
Кнопка BUTTON
предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт.
То есть на кнопку вешается событие OnСlick
и вызывается нужная функция.
Атрибут value
задает надпись на кнопке.
Атрибут onclick
задает JavaScript-обработчик, который вызывается при щелчке на кнопке.
Атрибут name
служит для JavaScript-именования кнопки (на сервер не передается).
Пример
РЕЗУЛЬТАТ:
Кнопка SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима
от кнопки . Сама она не передается, а служит только
для управления.
Атрибут onclick
для кнопки SUBMIT
практически не используется, так как лучше использовать
обработчик событий onsubmit
, заданный в теге
РЕЗУЛЬТАТ:
Атрибут value
дает определенные преимущества при использовании более одной
кнопки передачи данных. В этом случае на основании значения полученной переменной
сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
РЕЗУЛЬТАТ:
Атрибут formnovalidate
может быть применен, чтобы предотвратить проверку значений формы.
Пример
РЕЗУЛЬТАТ:
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по
умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма
полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET
.
Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде
«Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не
закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и
главнейшим элементом форм. Этот тип используется тегом input
,
то тогда атрибут type="text"
пропускать нельзя. name
, всегда обязательно, так как
базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
РЕЗУЛЬТАТ:
Текст «Иванов» помещается в созданное поле в качестве начального значения.
Если пользователь не внесет изменений или нажмет кнопку , то
значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел.
Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5).
Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
РЕЗУЛЬТАТ:
Можно задать минимальное, максимальное значение поля и шаг изменения числа.
Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0.
Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
РЕЗУЛЬТАТ:
Для задания любого шага используйте step="any"
.
Пример
РЕЗУЛЬТАТ:
Поле number
отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при
наведении или получении полем фокуса.
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм , то в скрытом поле
каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла
и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для
сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в
нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем
передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с
целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion
, которой будет присвоено значения 1.2. Эта информация может использоваться для
определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария
может повести себя неожиданным образом.
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple
, при этом для разделения адресов используется запятая (,)
Пример
Рис. 1. Улучшенные веб-формы с помощью HTML5