Таблица 2. Атрибуты тега
Атрибут
Значение / описание
disabled
Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form
name
Определяет имя
, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
Таблица 3. Атрибуты тега
Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt
Определяет альтернативный текст
для изображений, указывается только для .
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step
Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения:
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время:
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку , активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
4. Текстовые поля ввода
Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Таблица 5. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled
Отключает раскрывающийся список.
form
Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
multiple
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl .
name
Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required
Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size
Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Формы
HTML-формы - это простые элементы управления HTML, которые применяются для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля для ввода данных с клавиатуры, списки для выбора предопределенных данных, флажки для установки параметров и т. п. Существует бесчисленное количество способов использования HTML-форм, и если вы побродили по просторам Интернета всего лишь несколько дней, то, несомненно, использовали их для разных целей - от регистрации на каком-либо форуме или получения почтового ящика до просмотра биржевого курса или покупки товара в интернет-магазине.
HTML-формы существовали с самых ранних времен языка HTML , и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms
, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.
Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.
Но так как разработчики основных браузеров никогда не заморачивались с реализацией XForms в своих продуктах по причине его слишком большой сложности и небольшого использования, сообщество веб-разработчиков так никогда и не сделало этот прыжок.
Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.
Что такое форма?
Скорее всего, вам приходилось работать с формами раньше. Но если нет или вы порядочно подзабыли эту тему, следующий материал позволит вам получить необходимые сведения для более углубленного изучения этой области веб-дизайна.
Веб-форма
- это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду - благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма - это одинокое текстовое поле поисковых систем , таких как Google:
Все основные веб-формы работают одинаково. Пользователь вводит определенную информацию, а потом нажимает кнопку, чтобы отправить введенную информацию на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким-либо приложением, которое потом предпринимает соответствующий очередной шаг. Перед тем как отослать новую страницу назад браузеру, серверная программа может обратиться к базе данных, чтобы извлечь или сохранить информацию.
Сложность этого процесса состоит в том, что существуют сотни разных способов реализации серверного приложения , которое обрабатывает поступившие из формы данные. Некоторым разработчикам может быть достаточно элементарных сценариев для манипулирования полученными данными, в то время как другие могут использовать средства высшего уровня , которые упаковывают данные из формы в аккуратные программные объекты. Но в любом случае, задача перед этими приложениями стоит, по большому счету , одинаковая - исследовать данные из формы, выполнить какие-либо действия с ними, а потом на основе полученных результатов отправить браузеру новую страницу.
Модернизация традиционной HTML-формы
Лучший способ обучения работе с формами HTML5 - это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться.
Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент
.
Элемент
удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action
. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript , то для атрибута action можно просто указать значение #.
Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента
. Каждому разделу можно присвоить название, для чего используется элемент
. В следующем листинге приводится разметка формы:
Пожалуйста, заполните форму. Обязательные поля помечены *
Контактная информация
Имя *
Телефон
Email *
Персональная информация
Возраст*
Пол
Женщина
Мужчина
Перечислите личные качества
Выберите ваших любимых животных
Зебра
Кошак
Анаконда
Человек
Слон
Антилопа
Голубь
Краб
Добавьте немного стилей CSS:
Body {
font-family: "Palatino Linotype", serif;
max-width: 600px;
padding: 0px 30px;
}
h1 {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
fieldset {
margin-bottom: 15px;
padding: 10px;
}
legend {
padding: 0px 3px;
font-weight: bold;
font-variant: small-caps;
}
label {
width: 110px;
display: inline-block;
vertical-align: top;
margin: 6px;
}
em {
font-weight: bold;
font-style: normal;
color: #f00;
}
input:focus {
background: #eaeaea;
}
input, textarea {
width: 249px;
}
textarea {
height: 100px;
}
select {
width: 254px;
}
input {
width: 10px;
}
input {
width: 170px;
padding: 10px;
}
И вот результат:
Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом
, который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент , а для нескольких - элемент
; элемент создает выпадающий список. Краткое обозрение этих и других элементов управления форм приведено в таблице:
Одним из ограничений HTML-форм является то, что разработчик не может контролировать каким способом браузер отображает элементы управления формы. Например, если вы хотите заменить унылое серое поле флажка большим черно-белым полем с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы - создать с помощью JavaScript элемент с поведением, подобным флажку, иными словами, элемент меняет свой внешний вид, когда на нем щелкают.)
Это ограничение сохранилось и в HTML5 и распространяется на все новые элементы управления, которые мы рассмотрим. Это означает, что формы не подойдут для разработчиков, которым нужен полный контроль над внешним видом своих страниц в общем и требуются элементы управления с особым внешним видом в частности.
Теперь, когда у нас есть форма, с которой можно работать, настало время улучшить ее с помощью HTML5. Начнем мы это в следующих разделах с добавления подстановочного текста подсказок и поля с автоматическим фокусом.
Добавление подсказок
Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется "водяным знаком", так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого подстановочного текста показан на рисунке:
Вверху, когда поле пустое, в нем отображается подстановочный текст. Внизу, когда пользователь щелкает мышью в поле (устанавливая в нем фокус), подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, то поле снова заполняется подстановочным текстом.
Подстановочный текст для поля создается с помощью атрибута placeholder
:
...
Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer . К счастью, это не такая уж и большая проблема, т.к. подстановочный текст - всего лишь приятная примочка, не обязательная для функционирования формы.
В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета . Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder
и -moz-placeholder
), либо смириться с таким порядком вещей.
А вот псевдокласс focus обеспечивается лучшей поддержкой , и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом:
Input:focus {
background: #eaeaea;
}
Фокус
Так как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию. К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши , установив, таким образом, фокус на этом поле.
Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента . Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.
Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.
На этой идее основан новый HTML5-атрибут autofocus
, который можно вставить в элемент или (но только в один элемент формы), как показано в следующем примере:
Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье "Поддержка браузерами HTML5") и, если необходимо, запускать собственный код для автоматического фокуса.
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте
. В данной статье я бы хотел рассказать о создании форм в HTML
. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку . Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML
. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:
Создание форм HTML
Имя
Пароль
Введите сообщение...
Выберите поисковую систему Google
Yandex
Rambler
Готовы изучить формы?
Да
Конечно да=)
Выберите один из вариантов
Вариант 1
Вариант 2
Вариант 3
Файл
Простая кнопка
Отправить форму
Очистить поля формы
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:
Создание формы
начинается с ключевого слова
. Это парный тег , соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут name
задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action
указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action="request.php"
. В нашем случае мы не обрабатываем форму. Атрибут method
указывает каким способом мы будем передавать данные: открытым (get
) или скрытым (post
). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:
1) Если мы используем метод post : mysite.ru/request.php
.
2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin"
.
Думаю различия понятны.
Элементы формы:
1) Тестовое поле
. Текстовое поле создаётся с помощью тега
, как впрочем и все элементы формы. Атрибут type="text"
как раз и отвечает за то, что будет создано текстовое поле. Атрибут name
— это имя, как и во всех элементах формы. Атрибут value
— это значение по умолчанию.
2) Поле для ввода пароля
. Задаётся с помощью все то же тега
с атрибутом type="password"
.
3) Текстовая область
. Задаётся с помощью тега
. Это парный тег, текстовая область должна закрываться тегом
. У этого элемента есть несколько атрибутов. Также можно задать атрибут name
. Атрибут rows
отвечает за количество строк, атрибут cols
— за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения , до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).
4) Радиокнопки
. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки
также создаются с помощью тега
с атрибутом type="radio"
. Атрибут value
указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name
. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked
(значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.
5) Флажки
. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега
с атрибутом type="checkbox"
. Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck=""
.
6) Выпадающий список
. Выпадающий список создаётся с помощью тега
и заканчивается тегом
. В данной конструкции необходимо ещё с помощью тега
указать элементы списка.
7) Поле для отправки файла
. Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега
с атрибутом type="file"
. Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.
8) Скрытое поле
. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег
с атрибутом type="hidden"
. На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.
9) Кнопки
. Кнопки создаются с помощью тега
с атрибутом type="button"
. Атрибут value
отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.
10) Отправка формы
. По сути это такая же кнопка, но с атрибутом type="submit"
. При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега
Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера.
Другими словами, формы используются для сбора информации введённой пользователями.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега
. Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .
Рассмотрим пример использования:
Пример использования тега
for =
"yes"
>
Да
Нет
>
Да
Нет >
В этом примере мы:
Внутри первой
формы:
Внутри второй
формы:
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Подсказка для полей ввода
Давайте рассмотри пример использования:
Пример использования атрибута placeholder
Login: type =
"text"
name =
"login"
placeholder =
"Введите ваш логин"
>
Password: type =
"password"
name =
"password"
placeholder =
"Введите ваш пароль"
>
Далее
В данном примере мы указали для элемента с типом text
(однострочное текстовое поле) и типом password
(поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне , чтобы убедиться, что вы все выполнили правильно.