С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение . Ширина поля задается свойством width .
Таблица 3. Атрибуты тега Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для указанным расширением , например, accept=".gif" , accept=".pdf" , accept=".doc"
alt
Определяет альтернативный текст
для изображений, указывается только для
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например,
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением , значение атрибута может содержать целое или дробное число . Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы , число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля
step
Используется для элементов, предполагающих ввод числовых значений , указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
file — позволяет загружать файлы с компьютера пользователя.
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
url — поле предназначено для указания URL-адресов.
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
Таблица 4. Атрибуты тега
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например,
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить .
Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования.
Для того, чтобы все это сделать на своих web-страницах и нужны формы.
Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это
все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках,
посвященных, например, javascript.
Итак, в html форма задается тегами
. Все остальные элементы формы располагаются между этими
тегами.
У тега
name
- имя формы. Необходимо, если на странице несколько форм action
- определяет URL-адрес, по которому будет отправлена информация введеная пользователем method
- определяет способ отправки информации target
- указывает имя окна, в котором будут отображаться результаты обработки отправленной формы данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных.
А пока запомните, что все элементы формы располагаются между тегами
: Текстовое поле
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом
Результат:
Параметры:
name
- имя элемента,type
- тип элемента (в данном случае - text),size
- размер текстового поля в символах, которые одновременно будут видны, при вводе
большего количества символов, они будут прокручиваться,maxlength
- максимальное количество символов, которое можно ввести в поле, если опустить
этот параметр, то число символов будет неограниченным,value
- текст, который будет отображаться (его можно стереть), при отсутствии этого параметра
поле будет пустым.disabled
- блокирует поле от любых изменений,readonly
- делает поле доступным только для чтения.Результат:
Текстовое поле для ввода пароля
Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него
появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как
у простого текстового поля, кроме параметра type="password"
.
Пример:
Результат:
Попробуйте ввести что-нибудь в этом поле. Флажки
Вы, конечно, встречали подобный элемент:
Он задается все тем же тегом
Пример:
Рассмотрим его параметры:
type
- тип элемента (в данном случае - checkbox),name
- имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,value
- значение элемента, указывает программе обработчику формы значение пункта, который
выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",checked
- им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может
выбрать другие пункты. Переключатели
В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name
должны быть
одинаковы для всех элементов группы. Параметр type="radio"
, все остальные такие же, как у флажков.
Результат:
Кнопки
Существует четыре вида кнопок:
submit
- кнопка отправки содержимого формы web-серверу. Ее параметры:type="submit"
- тип кнопки, name
- имя кнопки,value
- надпись на кнопке.image
- графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо
подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:type="image"
- тип графической кнопки, name
- имя кнопки, src
- адрес картинки для кнопки.reset
- кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:type="reset"
- тип кнопки очищения, name
- имя кнопки, value
- надпись на кнопке.button
- произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:type="button"
- тип произвольной кнопки, name
- имя кнопки, value
- надпись на кнопке.onclick
- указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие
события (например, двойной щелчок ), но здесь мы не будем их рассматривать.Пример кода:
Результат:
Кнопки можно задавать и по другому, при помощи тегов
type
- тип кнопки, может принимать значения: reset
- кнопка очистки формы, submit
- кнопка отправки данных, button
- кнопка произвольного действия.name
- имя кнопки,value
- надпись на кнопке.Результат:
physical
- перенос и на экране и при поступлении на сервер.disabled
- неактивное поле,readonly
- разрешено только чтение.Здравствуйте, уважаемые читатели блога сайт. В рамках изучения премудростей в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих .
Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки
, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле
посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend
.
Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).
К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл , написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.
При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть , где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.
Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.
2. Multiple
— этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):
3. Size
— устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки
, а, например, при size="5" будут видны уже пять:
4. Required
(параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:
5. Autofocus
(значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:
6. Disabled
(параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:
7. Form
— осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера
. При этом в роли значения атрибута form прописывается параметр глобального атрибута id
, который добавлен к тегу form:
Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.
Атрибуты тега option
1. Value
— определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value
(для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:
2. Disabled
— блокирует для выбора элемент выпадающего списка.
Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.
3. Label
— отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между и вовсе отсутствует.
Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".
4. Selected
— выделяет текущий пункт выпадающего списка:
Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:
Атрибуты тега optgroup
Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.
1. Label
— устанавливает название каждой группы в качестве параметра:
То же самое, но с multiple и size="7" тега select:
2. Disabled
(нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:
Небольшой видеоролик будет здесь как нельзя кстати:
Текстовое поле в форме посредством textarea
Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:
В поле можно осуществлять переносы строк, при этом текст будет передаваться обработчику на сервер с учетом сделанных переносов. Поле можно растягивать по ширине и длине, захватив мышкой нижний правый угол, который отмечен двумя диагональными полосками.
Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:
1. Name
— определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.
2. Cols
— ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20
.
3. Rows
— высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.
4. Maxlength
— указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.
Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):
5. Minlength
— указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.
7. Readonly
(без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:
Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:
8. Autoсomplete
— указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.
Имеет всего два параметра
: on
(включен) и off
(выключен). Вот пример кода:
Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.
9. Wrap
— устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:
Soft
— набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки
. В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.
Hard
— переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols
:
Off
— отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:
10. Autofocus
(не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.
11. Disabled
— в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет :
HTML форм ы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы : поля ввода
Здесь мы с Вами создаём текстовую область высотой в 10
строк (значение атрибута "rows
") и шириной в 15
символов (значение атрибута "cols
").
Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.
Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков
", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега
radio
" атрибута "type
". Напишем такой HTML-код
:
Выберите что-нибудь одно:
Тут я остановлюсь на атрибуте "name
", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ
сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name
". Атрибут "value
" означает значение переменной "choiceradio
" (опять же, например, в JavaScript
). Сразу после описания тега
Ещё одним элементом формы являются переключатели (checkbox
). Создаются они опять же с помощью тега
Вы согласны с нашими правилами:
Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms
" будет "yes
", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.
Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега
Выберите файл для загрузки:
Рис. 1. Улучшенные веб-формы с помощью HTML5