Здравствуйте, уважаемые читатели блога сайт. В продолжение изучения переходим к рассмотрению тегов form и input с их атрибутами (), с помощью которых можно создавать самые разнообразные формы для сайта.
Какой бы тематики и наполнения не был тот или иной вебресурс, на нем с большой вероятностью будут встречаться формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы .
Каково же практическое предназначение всего разнообразия возможных форм? Прежде всего, они нужны для отправки вводимых пользователем данных на сервер с целью их дальнейшей обработки посредством специально созданного скрипта (обработчика).
HTML формы — как они создаются с помощью form и input
Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:
Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с form, который имеет открывающую (
) часть:Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.
В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea , с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.
16. Autofocus (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type="hidden".
17. Disabled (без значений) — отключает для пользователя тот элемент формы, к которому он добавлен. Чаще всего применяется совместно со скриптами, где прописываются условия, при выполнении которых недоступный элемент будет активирован.
18. Form — связывает элемент с формой, когда он располагается вне контейнера
. Для связки к тэгу form добавляется глобальный атрибут id, а к тегу input — атрибут form, значения которых одинаковы (например, id="data" и form="data").19. Multiple (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type="file" и type="email".
В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type="email"), то вводить эмейлы следует через запятую.
20. Required (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.
Данный атрибут не используется для графических и стандартных кнопок (type="button | image"), а также для скрытого поля ввода (type="hidden").
21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами "email | password | search | tel | text | url"). Значение по умолчанию 20 символов .
Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для , но для полноты картины вкратце упомяну и их.
22. Maxlength — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type="email | password | search | tel | text | url".
23. Minlength — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.
24. Placeholder — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.
25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.
И в завершение еще несколько атрибутов, дополняющих функционал различных элементов форм:
26. Pattern — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с ):
Логин Пароль |
Для поля логина (type="text") в качестве значения pattern прописано регулярное выражение {5,}, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.
В отношении текстовой области для пароля (type="password") задано значение {8,}, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.
При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:
27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки "image" (см.таблицу параметров input type выше).
28. Step — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type="date | datetime-local | month | number | range | tel | time | week.").
В качестве параметра может принимать любое целое или дробное число. По умолчанию step="1" . Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type="number". Для первого выставим step="2", в для второго step="0,1":
Введите значение от -10 до 10: Введите значение от 0 до 1: |
29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли :
- для type="button | reset | submit" — устанавливает текстовую надпись на кнопках;
- для type="checkbox | radio | image" — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
- для type="password | text" — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
- для type="file" (загрузка файлов) не применяется, поскольку не влияет на этот элемент.
Пример использования для каждого из выше перечисленных вариантов:
Выберите CMS: WPJoomla |
Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type="text" («Ваше имя»), идентифицирует каждый из переключателей ("1" и "2"), установленных с помощью type="radio", а также активирует надпись на кнопке ("Отправить").
Пример создания красивой HTML формы
Далее попробую представить вам образец вебформы, в состав кода которой вошли не только сочетания input type с разными значениями, образующие стандартные текстовые поля и кнопки, но и, например, которые позволяют инициировать наведение фокуса на элемент не только прямым щелчком мышки, но и кликом по тексту.
Обратите внимания, что для получения уникального оформления отдельные компоненты формы помещены в , к каждому из которых с наборами :
Back {max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;} .form-1, .form-2, .form-3, .form-4 {padding:15px; border:4px double #909090} .form-1, .form-2, .form-3 {border-bottom:none} .form-1 input {display:block; margin-bottom:10px; width:100%} .in {padding-left:40px} .in input {width:100%} ..png) no-repeat;background-position:10px 10px} ..png) no-repeat;background-position:10px 10px} .form-4 input {display:block; height:50px; font-size:24px; width:100%; cursor: pointer}
В результате подобная вебформа приобретает вот такие очертания:
Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).
Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях.
Естественно, в последующих публикациях продолжу описание основных тегов гипертекстовой разметки, поэтому не забывайте подписываться на обновление блога посредством e-mail . Также посмотрите для закрепления еще один урок Евгения Попова о создании контактной формы.
Формы
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 - это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент
Пожалуйста, заполните форму. Обязательные поля помечены *
Добавьте немного стилей 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-элемент | Описание |
---|---|---|
Однострочное текстовое поле | Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек ( ) | |
Многострочное текстовое поле | Текстовое поле, в которое можно ввести несколько строчек текста | |
Флажок | Выводит поле флажка, который можно установить или очистить | |
Переключатель | Выводит переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них | |
Кнопка | Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript | |
Список | Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент |
Одним из ограничений 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.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
Форм на веб-странице может несколько (столько, сколько нужно разработчику ). Каждая из них начинается тегом
Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).
Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.
Атрибут name тега
Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).
Но сам по себе тег
Ввод данных. Поля формы - тег
Тег это наиболее часто встречающийся в формах тег. Он предназначен для создания различных элементов, служащих для ввода данных в форму: это текстовые поля, кнопки, флажки, переключатели.
type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:
Значение атрибута type= "..." |
Результат |
Описание |
Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах. |
||
Текстовое поле для ввода пароля. |
||
|
Переключатель. |
|
|
Флажок. |
|
Кнопка. |
||
Кнопка сброса. |
||
Кнопка для отправки внесенных данных. |
||
Поле для ввода имени пересылаемого файла. |
||
Кнопка-изображение. |
||
Скрытое поле - невидимое для пользователя. |
Раскрывающийся список - теги
Тег
Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.
Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.
По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу
При наличии атрибута multiple , будут отображены все пункты списка или их часть (в зависимости от браузера ), если атрибутом size не установлено определенное количество видимых пунктов.
Обязательным элементом раскрывающегося списка является тег
При помощи атрибута name тега
Атрибут selected тега
Сторона света - одно из четырех основных направлений:
7 Чудес света!
Сторона света - одно из четырех основных направлений:
Север Юг Запад Восток
7 Чудес света!
Пирамида Хеопса Висячие сады Семирамиды Статуя Зевса в Олимпии Храм Артемиды в Эфесе Мавзолей в Галикарнасе Колосс Родосский Александрийский маяк
Многострочное текстовое поле - тег
Тег
Атрибут name тега
Атрибут disabled блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols и rows соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *
Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт. До этого все мои публикации были посвящены основным элементам языка, способам создания различных объектов контента, их форматированию, структурированию и т.д. Освоив предыдущие темы, вы уже можете создать достаточно хороший сайт. Однако он будет неполноценным без сегодняшней темы: «Создание форм в html».
Данный раздел в языке очень важен. Поэтому уделите его изучению особое внимание, иначе созданный вами веб-ресурс нельзя будет выпустить в продакшн. Таким образом, после прочтения статьи вы узнаете, для чего нужно использовать формы, с помощью каких тегов они создаются, а также сможете опробовать конкретные примеры на практике. Приступим же!
Что такое форма и как она функционирует
Форма – это один из важнейших объектов , который предназначен для обмена информационными данными между сервером и пользователем.
Проще говоря, если вы хотите создать интернет-магазин с возможностью заказа продукции на сайте, запрашивать на веб-ресурсе регистрацию и работать с аккаунтами или обеспечить клиентам обратную связь с менеджерами компании, то вам никак не обойтись без форм.
Форма задается при помощи специального элемента языка html
.
Замечу, что документ с кодом может содержать в себе несколько объявлений тега
Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Может сейчас и не сильно понятно, что и как взаимодействует в этой небольшой программе, однако гарантирую, что после прочтения всей статьи вы сможете создавать приложения в разы сложнее.
Отправляем данные на сторону сервера
Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit .
Код такого метода выглядит вот так:
При запуске представленной строки в отобразиться кнопка с надписью: «Отправить».
Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.
После подтверждения отправки указанной информации, она не сразу поступает на сервер. Сначала ее обрабатывает браузер, приводя к виду «имя=значение».
За имя отвечает параметр атрибута type
тега
, а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action
элемента
Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.
Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.
Теперь я хотел бы остановиться и подробнее рассказать об элементе . Если объяснять простым языком, то нужен для создания текстовых полей, переключателей, разнообразных кнопок, скрытых полей, флажков и других объектов.
Тег не обязательно задавать в паре с
Основными атрибутами данного элемента языка гипертекстовой разметки являются:
- Text – создает текстовое поле;
- Submit – создает кнопку для отправки данных на сервер;
- Image – отвечает за кнопку с картинкой;
- Reset – устанавливает кнопку для очистки формы;
- Password – задает текстовое поле специально для паролей;
- Checkbox – отвечает за поля с флажками;
- Radio – отвечает за поля с выбором одного элемента;
- Button – создает кнопку;
- Hidden – используется для скрытых полей;
- File – задает поле, отвечающее за отправку файлов.
Способы передачи информации
Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post . Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.
Post | Get | |
Размер передаваемых документов | Ограничиваются серверной стороной. | Максимум – 4 Кб. |
Способ отображения отправленной информации | Доступна только при просмотре через браузерные расширения или другие специальные программные продукты. | Сразу же доступна всем. |
Использование закладок | Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес). | Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время. |
Кэширование | Исходя из предыдущего пункта все запросы на одной странице. | Каждую страницу можно кэшировать отдельно. |
Предназначение | Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев. | Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений. |
Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе
Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post .
Введите свои персональные данные!
Например, для ввода даты предусмотрены переключатели числа каждого из параметров (дня, месяца и года), а также для удобства выпадающая панель с самим календарем.
Создание панели регистрации
Основные теги и атрибуты были рассмотрены. Именно поэтому настало время для создания полноценной формы регистрации с использованием стилевой разметки css и проверкой вводимых данных. Конечно посмотреть серверную работу с ними нам не удастся, но дизайн и важные детали мы предусмотрим.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Советую вам сохранить данный код программы в документе с расширением.html и кодировкой utf-8, и открыть последний в окне браузера. Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением. Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus .
Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента < input> указан атрибут required . Он устанавливает отмеченные поля обязательными для заполнения.
Еще одним интересным моментом является указание типа type="email" , который появился в . При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.
Вот и подошла публикация к концу. В ней я постарался собрать максимальное количество важных и актуальных знаний, касающихся форм. Надеюсь она была вам полезной! Буду очень признателен, если вы вступите в ряды моих подписчиков и расскажете о блоге своим друзьям.
Пока-пока!
С уважением, Роман Чуешов
Прочитано: 333 раз
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент
Атрибут | Значение / описание |
---|---|
accept-charset | Значение атрибута представляет собой разделенный пробелами список кодировок символов
, которые будут использоваться для отправки формы, например, |
action | Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # . Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: |
autocomplete | |
enctype | Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" . application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 . multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. text/plain — указывает на то, что передается обычный (не html) текст. |
method | Задает способ передачи данных формы. Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. |
name | Задает имя формы , которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . |
novalidate | Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения |
target | Указывает окно, в которое будет направлена информация: _blank — новое окно _self — тот же фрейм _parent — родительский фрейм (если он существует, если нет — то в текущий) _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. |
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.Каждой группе элементов можно присвоить название с помощью элемента