Теги HTML форм

Содержание материала:

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 7. Создание форм в html

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

Атрибуты формы:

action (англ. «действие»)
Файл на сервере с кодом для отработки отосланных данных
action=»http://www.название.домен/имя программы»
enctype (англ. «тип кодировки») text/plain (обычный текст)
application/x-www-dorm-urlencoded (для метода Post отправки формы)
multipart/form-data (для метода Post, если прикрепляются файлы)
method (метод отправки данных) post
get
  • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
  • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
  • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

Элементы формы html

  • Текстовое поле html:
  • Значение атрибута type — text — указывает на то, что это именно текстовое поле
  • size — размер текстового поля в символах
  • maxlength — максимальное кол-во вмещающихся в поле символов
  • value — первоначальный текст в текстовом поле
  • name — имя элемента, необходимо для обработки данных в файле-обработчике
  • Поле ввода пароля html:

    Вместо текста в поле отображается маска — звездочки или кружочки

    Кнопка submit html:

    Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

    Кнопка очистки формы html:

    Результат:

    Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

    Html флажок:

    ASP
    javascript
    PHP
    HTML

    В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа

    Атрибут checked устанавливает сразу элемент отмеченным

    Radio кнопка html:

    ASP
    Javascript
    PHP
    HTML

    radio кнопка html служит для единственного выбора из нескольких вариантов

    Атрибут checked устанавливает сразу элемент отмеченным

    Выпадающий список HTML

    Рассмотрим пример добавления выпадающего списка:

    • Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
    • Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
    • Атрибут selected у пункта ( option ) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

    Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

    Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1 :

    Текстовая область в HTML

    Для ввода большого фрагмента текста служит элемент текстовая область:

    • Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
    • Атрибут rows определяет количество строк в элементе

    Другие элементы

    • Обычная кнопка

    Элемент кнопка-изображение

    Элемент загрузка файла

    Для прикрепления файла к форме существует специальный элемент управления:

    При его использовании значение кодировки формы (атрибут enctype у тега form ) должен иметь значение multipart/form-data

    Скрытое поле

    Важным элементом при программировании является скрытое поле. Поле не отображается в окне браузера, а призвано передавать дополнительные данные через форму в файл-обработчик.

    Дополнительные элементы и атрибуты

    • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

    В примере создана надпись (тег label ) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

    Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

    Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

    Для визуального оформления группы объектов можно использовать элемент fieldset :

    Книги HTML
    ASP
    javaScript

    Можно задать очередность передвижения по элементам клавишей TAB :

    Элемент будет первым в очереди переходов.

    Теги HTML форм

    Всем привет!
    Продолжаем изучать основы HTML. В этом уроке мы разберем, что такое HTML форма и как она создается.
    Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.

    Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.

    Форма поиска:

    Форма отправки комментариев:

    Форма входа на сайт:

    Форма обратной связи:

    Форма для подачи заказа:

    Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, как создать простую HTML форму и какие теги можно использовать для создания различных полей формы.

    Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.

    HTML форма – это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке программирования PHP. Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс основ HTML для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.

    Учимся создавать HTML формы

    Любая HTML форма будет состоять из основного тега . Внутри тега вставляются остальные элементы формы, которые будут отображаться на веб странице.

    Form и input — теги и их атрибуты для создания различных HTML форм для сайта

    Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение изучения языка гипертекстовой разметки переходим к рассмотрению тегов form и input с их атрибутами (что представляют из себя эти составляющие HTML кода в общем случае), с помощью которых можно создавать самые разнообразные формы для сайта.

    Какой бы тематики и наполнения не был тот или иной вебресурс, на нем с большой вероятностью будут встречаться формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы с помощью тегов select, option, textarea, label, fieldset и legend.

    Каково же практическое предназначение всего разнообразия возможных форм? Прежде всего, они нужны для отправки вводимых пользователем данных на сервер с целью их дальнейшей обработки посредством специально созданного скрипта (обработчика).

    HTML формы — как они создаются с помощью form и input

    Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

    Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с парным тегом form, который имеет открывающую () часть:

    Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

    В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea, с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

    Кстати, именно атрибуты, которые бывают обязательными и необязательными, можно считать средством «тонкой настройки», расширяющим функциональные возможности тегов, а значит, и самой вебформы, которая при просмотре в браузере будет иметь такой вид:

    Обратите внимание, что однострочные текстовые поля («Ваше имя», «Электронная почта», «Тема сообщения») выведены в том числе благодаря присутствию атрибутов name (c разными значениями «name», «email», «sub») и type («text») наиболее востребованного тега input.

    Для многострочного поля применен тег textarea со своими параметрами. Кнопка «Отправить» реализована тем же input в совокупности с атрибутами value и type (со значением «submit»).

    После появления такой формы на странице ресурса пользователь сможет вводить в нее данные. Но это еще не все. Требуется обеспечить такие условия, при которых введенная информация передавалась бы на сервер для обработки в результате нажатия кнопки «Отправить».

    Если внешний вид формы мы можем создавать с помощью языка гипертекстовой разметки, то обеспечить передачу данных и их обработку средствами ХТМЛ, к сожалению, мы не в силах.

    Для этого предназначена программа обработки форм (обработчик), выполняющая эту задачу. Она обычно реализуется в виде скрипта, написанного на языке PHP, содержание коего в каждом конкретном случае зависит от преследуемых целей. В предоставленном мною примере с обратной связью данную роль играет созданный для этого файл mail.php с таким содержимым:

    Прежде чем продолжить текстовое изучение материала, посмотрите небольшой видеоролик:

    Далее переходим к описанию конкретных элементов, определяющих вид составных частей веб-форм на странице, то есть к тегам и их атрибутам, причем пристальное внимание я уделю тем, которые являются валидными в HTML5, поскольку именно эта версия языка гипертекстовой разметки в ближайшем будущем будет наиболее актуальной.

    Атрибуты тега form — action, method, name и другие

    Как я уже отмечал выше, любая ХТМЛ форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов, некоторые из которых могут принимать различные значения (параметры). Наиболее часто используемыми из них (смотрите третий скриншот вверх отсюда) являются следующие:

    1. Action — путь до документа (URL), содержащего скрипт исполнения (обработчик веб-форм). Обязательный атрибут (в HTML5 таковым не является, поскольку пятая версия языка разметки предусматривает ситуации, когда данные для обработки отправляются на текущую страницу). В качестве значения используется абсолютный или относительный путь к файлу на сервере:

    2. Method — c помощью этого атрибута обеспечивается способ передачи данных. Собственно, их всего два: get и post, которые и являются параметрами. Метод get (значение по умолчанию) используется для небольших сообщений посредством адресной строки браузера. Тогда как post предназначен для отправки большего объема данных закрытым способом.

    3. Name — если вы используете на сайте несколько форм, то для каждой нужно придумать уникальное название для ее идентификации, данное наименование и будет служить значением этого атрибута, который является необязательным.

    Далее представлю вам и остальные атрибуты тега form:

    4. Accept-charset — определяет кодировку, в которой сервер должен обрабатывать полученные данные. В качестве значения (параметра) данного атрибута выступает название используемого стандарта (UTF-8, Windows-1251 и т.д.).

    5. Autocomplete [HTML5] — активирует автозаполнение формы браузером, который в этом случае оставляет в памяти содержание впервые заполняемых полей (чаще логина и пароля), а при необходимости в дальнейшем ввода этих данных автоматически их вставляет в нужные места. Имеет всего два параметра: on — автоматическое заполнение включено, off — выключено.

    Топ-пост этого месяца:  Click.ru - обзор сервиса автоматизации контекстной рекламу КликРу

    Замечу, что функция автоматического заполнения может быть вообще отключена в браузере самого пользователя. Тогда присутствие атрибута autocomplete=»on» в коде веб-формы поможет только в случае, если данная опция активирована в настройках обозревателя конкретного юзера.

    6. Enctype — задает метод кодирования введенных в форму данных перед отправкой их на сервер. Может быть применено одно из трех значений:

    • application/x-www-form-urlencoded (параметр по умолчанию) — вместо пробелов применяется «+», кодируются все символы кроме букв латинского алфавита и цифр. Например, знаки кириллицы будут преобразованы в нечто, похожее на «%2F%3D%26%3F%2%3D%26%3D»;
    • text/plain — только пробелы заменяются знаком «+», буквы и другие символы кодировке не подлежат;
    • multipart/form-data — информация не кодируется. Данный параметр используется при отправлении файлов на сервер. При этом элемент загрузки файла в форме описывается тегом input с атрибутом type=»file» (подробнее о нем поговорим ниже).

    Вот пример кода с применением атрибута enctype со значением «multipart/form-data»:

    7. Noval >[HTML5] — это логический атрибут (значения отсутствуют), который отменяет проверку на корректность введенной пользователем информации, отправляемой на сервер:

    Вот простой пример. Допустим, пользователь заполняет какую-то форму из большого количества полей, в некоторых из которых (либо во всех) заданы параметры, на основании которых браузер автоматически проверяет правильность введенных данных и при попытке их отправки в случае наличия ошибок выводит сообщение о требовании их исправления.

    Так вот, novalidate позволяет зафиксировать всю информацию без необходимости ее немедленной корректировки и оставляет возможность сохранения любых внесенных уже данных с тем, чтобы продолжить заполнение вебформы спустя некоторое время.

    8. Target. Результат обработки отправленных на сервер данных, внесенных юзером в форму, расположенную на странице, возвращается в форме HTML документа, который загружается в окно браузера, определяемое значением атрибута target:

    • _blank — в новое окно;
    • _self (параметр по умолчанию) — в то же окно;
    • _parent — во фрейм-родитель. Если таковой отсутствует, то в текущее окно (_self);
    • _top — в полное исходное окно, отменяя при этом все другие фреймы. При отсутствии фреймов в то же окно (_self);
    • framename — в именной фрейм, название которого задается с помощью его атрибута name ( );

    Тег input и его атрибуты, расширяющие возможности форм

    Теперь рассмотрим input, который является самым распространенным элементом, используемым для создания вебформы и который, как было отмечено, не имеет закрывающего тега. Основной его атрибут — type, который является обязательным и с помощью разных значений (параметров) определяет вид формы на странице веб-ресурса.

    Атрибут type и формируемые им элементы — text (текстовое поле), button (кнопка), checkbox (чекбокс), radio (радиокнопка) и другие

    ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
    1. BUTTON Простая кнопка. Надпись оформляется с помощью параметра атрибута value.
    2. CHECKBOX Чекбоксы. Позволяют выбрать галочкой один или сразу несколько необходимых вариантов, названия пунктов (A, B, C) реализованы с помощью атрибута value.
    3. COLOR [HTML5] Управление палитрой цветов.
    4. DATE [HTML5] Ввод календарной даты в формате DD.MM.YYYY (день, месяц и год).
    5. DATETIME-LOCAL [HTML5] Выбор даты и времени в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты).
    6. EMAIL [HTML5] Поле для ввода адреса электронной почты
    ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
    7. FILE Кнопка выбора файла для последующей загрузки его на сервер
    ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
    8. HIDDEN Скрытое поле, которое не отображается, однако данные в обработчик передаются.
    9. IMAGE Поле с картинкой. Нужно указать путь (относительный или абсолютный) до соответствующего изображения на сервере в качестве значения атрибута src. При нажатии картинку данные будут отправлены на сервер.
    10. MONTH [HTML5] Ввод месяца и года в формате Month YYYY.
    11. NUMBER [HTML5] Выбор отрицательного или положительного числа.
    12. PASSWORD Текстовое поле, где символы показываются звездочками. Предназначено для скрытия вводимого пароля.
    13. RADIO Переключатели (радиокнопки). Обычно используются при необходимости выбора одного варианта из предложенных. Для установки наименования каждой радиокнопки применен атрибут value.
    14. RANGE [HTML5] Ползунок для выбора чисел в указанном диапазоне. Применяются следующие значения по умолчанию, если соответствующие атрибуты не указаны:

    • min = «0»
    • max = «100»
    • value = min + (max — min) / 2, или min, если max
    15. RESET Кнопка для возврата данных к первоначальному значению.
    16. SEARCH [HTML5] Однострочное поле для поиска.
    17. SUBMIT Кнопка для отправки данных.
    18. TEL [HTML5] Элемент для указания номера телефона
    19. TEXT Текстовое поле для ввода символов
    20. TIME [HTML5] Ввод времени в формате hh:mm.
    21. URL [HTML5] Специальное поле для указания URL-адреса.
    22. WEEK [HTML5] Выбор порядкового номера недели и года (Неделя NN, YYYY)

    Если значение type не указано, то по умолчанию будет создано текстовое поле (type=»text»).

    Какие еще атрибуты расширяют функционал input

    1. Name — служит для идентификации элемента вебформы обработчиком либо при получении доступа к введенным данным посредством скриптов, причем, любой набор символов может быть его значением (конечно, для удобства лучше применять смысловой термин, а не абракадабру).

    В качестве примера создадим стандартную форму авторизации для ввода логина и пароля, где для каждого тега input пропишем уникальное название посредством атрибута name («login-x», «password-x», «submit1»). Вот как это будет выглядеть:

    2. Accept — задает фильтрацию на виды файлов, которые можно загружать на сервер. Применим исключительно совместно с . Возможны следующий значения:

    • file_extension — расширение файла (.doc, .gif, .jpg, .png, .xls и т.д.);
    • audio/* — аудиофайлы (звуковые);
    • video/* — видеофайлы;
    • image/* — файлы изображений;
    • media_type — наименование MIME-типа (application/json, audio/mp4, image/gif и т.п.).

    При необходимости можно указать сразу несколько различных расширений или MIME-типов через запятую, которые выступают в роли параметра. Вот пример с фильтром по всем видеофайлам:

    Загрузите видеоролик:

    А вот с образец с возможным выбором изображений в форматах JPEG или PNG:

    Загрузите картинку (формат JPEG или PNG):

    После нажатия пользователем кнопки «Выберите файл» в появившемся окне выбора будут предложены те группы файлов, которые указаны посредством значения атрибута accept.

    3. Alt — применяется исключительно с целью создания альтернативного текста для графической кнопки «Отправить» (input type=»image»). Если по каким-то причинам изображение на страницу не загружено, то вместо него будет выведен фрагмент текста, описывающий эту картинку, он и является параметром данного атрибута.

    Естественно, наряду с alt и type=»image» (см. таблицу параметров type выше) должен быть указан и атрибут src, где в качестве значения указан относительный либо абсолютный путь до картинки. Без лишних слов к примеру (слева — код, справа — вид кнопки без отображаемой картинки):

    4. Autocomplete [HTML5] — дает возможность сохранять данные, введенные пользователями (два значения: on — автозаполнение включено, off — выключено). Если присутствие такого же атрибута в теге form регулирует автоматическое заполнение сразу для всех полей вебформы, то с помощью тега input можно его включить для одних элементов и отключить для других.

    В ниже представленном примере для текстового поля (type=»text»), в которое вводится логин, автоматическое заполнение включено, а для области ввода пароля оно отключено. В результате после вторичного посещения страницы юзером, на которой размещена форма авторизации, его логин будет выведен автоматически:

    Но механизм автоматического заполнения (autocomplete=»on») будет работать только тогда, когда в браузерных настройках конкретного пользователя включен режим автосохранения (обычно в целях общей безопасности у большинства юзеров эта опция не активирована). Например, в веб-браузере Google Chrome он запускается так («Настройки» — «Пользователи» — «Пароли»):

    5. Checked (нет значений) — устанавливает флажки (галочки) для чекбоксов (type=»checkbox») и радиокнопок, или переключателей (type=»radio»). Причем, в пределах одной вебформы можно отметить сколь угодно много чекбоксов (множественный выбор):

    И только один переключатель (единичный выбор):

    6. Formaction [HTML5] — работает исключительно в связке с type=»image» или type=»submit» тега input (кнопка отправки) и указывает путь до файла, который обрабатывает занесенные в веб-форму данные. Этот путь (URL) служит значением данного атрибута, который по своему действию аналогичен action для тега form, но имеет перед ним приоритет. То есть, при наличии различных параметров обоих атрибутов учитываться будет значение formaction:

    Для этого примера вся информация будет обрабатываться именно скриптом, относительный путь до которого (formdata-y) описывается именно атрибутом formaction тега input. При этом элемент action=»formdata» игнорируется веб-браузером.

    Еще 4 атрибута (7-10) для input, действия которых тождественны аналогичным элементам для основного тега

    Введите ваше имя:

    13. List [HTML5] — выводит варианты, которые можно выбирать из списка. Параметром является имя идентификатора id (глобальный атрибут) тега , который служит контейнером для набора тэгов option, каждый из которых определяет свой пункт списка:

    14. Max [HTML5] — определяет максимальное значение при вводе числа либо даты, которые выступают в роли параметров. Используются целые положительные и отрицательные числа для атрибутов type=»number», type=»range», а также календарные даты в формате YYYY.MM.DD (год, месяц и день) для type=»date».

    15. Min [HTML5] — устанавливает минимально возможное для выбора число или дату. В отношении значений действуют те же правила, что и для атрибута max.

    Совместное использование этих двух выше названных атрибутов дает возможность установить диапазон доступных к выбору значений:

    Начало события (с 5 по 10 ноября 2020 г.):

    Конец события (с 11 по 20 ноября 2020 г.):

    Выберите число (от -5 до 5):

    Действия следующих 6 атрибутов (пп. 16-21) тега input тождественны или почти совпадают с их воздействием применительно к тегу select.

    16. Autofocus [HTML5] (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type=»hidden».

    17. Disabled (без значений) — отключает для пользователя тот элемент формы, к которому он добавлен. Чаще всего применяется совместно со скриптами, где прописываются условия, при выполнении которых недоступный элемент будет активирован.

    18. Form [HTML5] — связывает элемент с формой, когда он располагается вне контейнера . Для связки к тэгу form добавляется глобальный атрибут ).

    19. Multiple [HTML5] (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type=»file» и type=»email».

    В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type=»email»), то вводить эмейлы следует через запятую.

    20. Required [HTML5] (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

    Данный атрибут не используется для графических и стандартных кнопок (type=»button | image»), а также для скрытого поля ввода (type=»hidden»).

    21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами «email | password | search | tel | text | url»). Значение по умолчанию 20 символов.

    Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для многострочного поля textarea, но для полноты картины вкратце упомяну и их.

    22. Maxlength [HTML5] — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type=»email | password | search | tel | text | url».

    23. Minlength [HTML5] — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

    24. Placeholder [HTML5] — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

    25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.

    И в завершение еще несколько атрибутов, дополняющих функционал различных элементов форм:

    26. Pattern [HTML5] — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с логином и паролем):

    Для поля логина (type=»text») в качестве значения pattern прописано регулярное выражение [A-Za-z]<5,>, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

    В отношении текстовой области для пароля (type=»password») задано значение [A-Za-z0-9]<8,>, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

    При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

    27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки «image» (см.таблицу параметров input type выше).

    28. Step [HTML5] — устанавливает шаг для элементов, предусматривающих выбор числовых значений (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: WP Joomla

    Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type=»text» («Ваше имя»), идентифицирует каждый из переключателей («1» и «2»), установленных с помощью type=»radio», а также активирует надпись на кнопке («Отправить»).

    Пример создания красивой HTML формы

    Далее попробую представить вам образец вебформы, в состав кода которой вошли не только сочетания input type с разными значениями, образующие стандартные текстовые поля и кнопки, но и, например, теги label, которые позволяют инициировать наведение фокуса на элемент не только прямым щелчком мышки, но и кликом по тексту.

    Обратите внимания, что для получения уникального оформления отдельные компоненты формы помещены в контейнеры div, к каждому из которых добавлены классы с наборами CSS свойств:

    В результате подобная вебформа приобретает вот такие очертания:

    Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).

    Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях.

    Естественно, в последующих публикациях продолжу описание основных тегов гипертекстовой разметки, поэтому не забывайте подписываться на обновление блога посредством e-mail. Также посмотрите для закрепления еще один урок Евгения Попова о создании контактной формы:

    Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ

    Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о такой неотъемлемой составляющей верстки любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

    Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

    Зачем нужны и как работают формы на современных сайтах

    Та же строка поиска по сайту (здесь описан поиск от яндекса) создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.

    Так, с обоснованием необходимости изучения этих элементов, думаю, вопросов больше не должно возникнуть, поэтому самое время переходить непосредственно к изучению их возможных вариантов.

    Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.

    По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

    Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (обратная связь описанная тут) и многое другое.

    Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.

    Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.

    Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.

    Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

    Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.

    Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

    Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

    1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
    2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
    3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

    Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

    C помощью Input и Type можно создавать следующие элементы:

    1. однострочные текстовые поля (Type=»Text»)
    2. поля для ввода пароля (Type=»Password»)
    3. чекбоксы (Type=»Checkbox»)
    4. радиокнопки (Type=»Radio»)
    5. скрытые поля (Type=»H >Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

    Примеры форм, созданных на Input с различными значениями для Type

    TEXT Обычное текстовое поле для ввода символов с клавиатуры
    PASSWORD Текстовое поле, в котором вводимые символы закрываются звездочками
    BUTTON Просто кнопка
    SUBMIT Создается кнопка, с помощью которой можно отправить данные в программу обработчика
    IMAGE Поле с изображением, при нажатии на которое, данные будут отправлены в обработчик
    RADIO Радиопереключатели — следует использовать, если требуется выбрать только один вариант из предложенных Joomla
    WordPress
    SMF
    CHECKBOX CHECKBOX — чекбоксы (можно активировать несколько чекбоксов одновременно) Joomla
    WordPress
    SMF
    FILE Создается кнопка для загрузки файла на сервер
    HIDDEN Скрытое поле, которое не отображается, но в файл обработчика данные передаются.
    RESET Кнопка для возвращение данных в первоначальное значение (сброса).

    Другие атрибуты тэга Input и примеры их использования

    Рассмотрим, для чего нужны остальные атрибуты:

    1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
    2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
    3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
    4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
    5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

    Теперь давайте рассмотрим все примеры формы с Input. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:

    Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

    Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

    Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.

    Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

    Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

    Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

    Для начала хочу немного напомнить, что такое, собственно, вебформы и для чего они нужны на страницах сайта. Они в первую очередь призваны в удобном для пользователя виде повторять имеющиеся в любой операционной системе элементы: кнопки, поля для ввода текста, выпадающие списки, флажки, переключатели и тому подобные вещи.

    Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.

    Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.

    Браузеры сами знают, как отображать тот или иной элемент вебформы. Правда, варианты отображения одного и того же ее элемента в разных браузерах могут немного отличаться друг от друга, но, как правило, не существенно.

    Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?

    В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).

    Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

    Открывающий тег Form в таком случае должен выглядеть примерно так:

    Вместе с Textarea можно использовать следующие атрибуты:

    1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
    2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
    3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
    4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
    5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

    Label — для чего нужен этот Html тэг в форме

    Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.

    В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:

    Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.

    Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

    Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.

    Fieldset и Legend — разбиваем форму на части

    Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

    Так вот, для создания группы из составных частей вам нужно заключить все эти части в открывающий и закрывающий тэги Fieldset. А для того, чтобы задать для данной группы заголовок (Legend), вам нужно сразу же после открывающего Fieldset прописать конструкцию из открывающего и закрывающего Legend, между которыми необходимо вставить текст заголовка группы.

    Вот пример создания групп с помощью Fieldset и Legend:

    Теги HTML форм

    Тег используется для создания форм. Формы предназначены для отправки данных, введенных пользователем в ее поля, с целью дальнейшей обработки. Отправляются данные специальной программе-обработчику расположенной на сервере. Это может быть Web-сервер, Mail-сервер и т.д.

    Кроме этого, благодаря атрибуту name , к форме можно обращаться через различные скрипты, для динамического изменения содержимого формы или получения из нее информации.

    Сам по себе тег еще не является формой. Он должен содержать теги, которые называются элементами формы, они создают различные кнопки, маркеры, поля для ввода текста и т.д. Кстати, если в форме присутствует только поле для ввода текста, и кнопка отправки данных, либо одно из двух, то инициировать отправку можно при помощи клавиши Enter .

    Атрибуты

    • accept-charset — Задает список кодировок данных, вводимых в текстовые поля формы.
    • action — Обязательный атрибут. Задает адрес, по которому будут отправлены данные.
    • autocomplete — Разрешает или запрещает автозаполнение полей формы.
    • enctype — Определяет MIME-тип данных, отправляемых формой.
    • method — Указывает метод HTTP, который будет использоваться при отправке данных на сервер.
    • name — Задает имя формы, для обращения к ней.
    • target — Указывает имя окна или фрейма, в которое возвращается результат обработки.
    • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
    • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
    • dir — указывает направление текста внутри элемента.
    • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
    • lang — указывает язык, на котором написан текст внутри HTML-элемента.
    • style — необходим для применения встроенных стилей CSS к тегу.
    • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab ).
    • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

    Тип тега

    Модель тега: block (блочный, уровня блока).

    Создание формы в HTML

    HTML теги, определяющие HTML формы на сайте

    Создаем сайты и отдельные страницы в сети интернет для общения с посетителями.

    HTML формы используются для регистрации посетителей на сайте, для интерактивных опросов и голосований, позволяют отправлять сообщения, совершать покупки и так далее. HTML Форма создается с одной целью: сбор и последующая передача информации на обработку программному сценарию или по электронной почте.

    Теги HTML форм

    Контейнер существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.

    Элементы форм

    Кнопка

    Тег задает кнопку произвольного вида.

    Группа элементов формы

    Тег позволяет группировать элементы формы.

    Список вариантов

    Тег задает список вариантов, которые можно выбрать при вводе информации в текстовое поле .

    Тег позволяет задавать различные элементы форм: текстовые поля, различные кнопки, переключатели, флажки.

    Тег используется для генерации пары ключей (закрытого и открытого) для шифрования и расшифрования данных.

    Метка элемента формы

    Тег используется для задания окружающего элемент формы кликабельного текста. При щелчке мышкой на этот текст значение связанного с ней элемента формы изменится.

    Заголовок группы элементов формы

    Тег определяет заголовок группы элементов формы, заданной тегом .

    Датчик

    Тег является датчиком и используется для вывода значения в определенном диапазоне.

    Индикатор

    является индикатором хода выполнения задачи.

    Группа пунктов списка

    Тег позволяет группировать пункты списка .

    Пункт списка

    Тег определяет отдельный пункт списка .

    Область вывода информации

    Тег определяет область вывода результатов вычислений.

    Список

    Тег предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько.

    Текстовая область

    определяет область для ввода многострочной текстовой информации.

    В конце разговора о HTML-формах хочу сделать одно замечание. Некоторые браузеры отображают элементы форм, даже если они не находятся внутри контейнера . Но злоупотреблять этим не стоит, потому что:

    1. в одном документе может находиться несколько форм, и именно определяет, какие элементы к какой форме относятся;
    2. в теге задается URL обработчика формы и метод передачи данных;
    3. присутствие на web-страницы элементов формы без самой формы считается невалидным и понижает шансы вашего сайта попасть в ТОП.

    Работа с формами на JavaScript

    Теги для работы с формами.

    Контейнер предназначен для вставки форм в web страницу.

    Закрывающий тег требуется.

    action — Указывает адрес программы, которая будет обрабатывать данные, переданые ей из форм.

    method — Метод передачи данных ( GET и POST ).

    name — Имя формы, для доступа к ней из скрипта.

    Тег cлужит для создания непосредственно форм.

    Закрывающий тег не требуется.

    TYPE — определяет тип поля ввода.

    СНЕСKBOX — используется для выбора пользователем нескольких значений из предложенных.

    RADIO — тоже что и checkbox, но пользователь может выбрать только одно значение.

    TEXT — Данный тип поля ввода описывает однострочное поле ввода.

    PASSWORD — То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране (отображаются звездочки вместо символов).

    RESET — Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.

    SUBMIT — Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы (action). Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

    FILE — создает элемент для выбора локальных файлов.

    IMAGE — создает кнопку в виде изображения.

    NAME — имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.

    SIZE — определяет визуальный размер поля ввода на экране в символах.

    VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

    MAXLENGTH — определяет количество символов, которое пользователи могут ввести в поле ввода.

    CHECKED — означает, что CHECKBOX или RADIOBUTTON будет выбран.

    Контейнер позволяет пользователю выбрать значение из фиксированного списка значений.

    Обычно это представлено выпадающим меню. Тэг select имеет один или более элементов между стартовым тэгом . Элементы в свою очередь заключены в контейнер . По умолчанию, первый элемент отображается в строке выбора.

    size — количество отображаемых элементов.

    name — имя для select.

    Контейнер используется для того, чтобы позволить пользователю вводить свободный текст.

    HTML Forms

    HTML Form Example

    An HTML form contains form elements.

    Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

    The Element

    The element is the most important form element.

    The element can be displayed in several ways, depending on the type attribute.

    Here are some examples:

    Type Description
    Defines a one-line text input field
    Defines a radio button (for selecting one of many choices)
    Defines a submit button (for submitting the form)

    You will learn a lot more about input types later in this tutorial.

    Text Input

    defines a one-line input field for text input:

    Example

    This is how it will look like in a browser:

    First name:

    Last name:

    Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

    Radio Button Input

    defines a radio button.

    Radio buttons let a user select ONE of a limited number of choices:

    Example

    This is how the HTML code above will be displayed in a browser:

    Male
    Female
    Other

    The Submit Button

    defines a button for submitting the form data to a form-handler.

    The form-handler is typically a server page with a script for processing input data.

    The form-handler is specified in the form’s action attribute:

    Example

    This is how the HTML code above will be displayed in a browser:

    The Action Attribute

    The action attribute defines the action to be performed when the form is submitted.

    Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

    In the example above, the form data is sent to a page on the server called «/action_page.php». This page contains a server-side script that handles the form data:

    Grouping Form Data with

    The element is used to group related data in a form.

    The element defines a caption for the element.

    Example

    This is how the HTML code above will be displayed in a browser:

    HTML Exercises

    Test Yourself with Exercises!

    Here is the list of all

    Thank You For Helping Us!

    Your message has been sent to W3Schools.

    Top Tutorials

    Top References

    Top Examples

    Web Certificates

    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
    Powered by W3.CSS.

    HTML Формы

    Пример формы HTML

    Элемент

    Форма HTML содержит элементы формы.

    Элементы образуют различные типы элементов ввода как текстовые поля, чекбоксы, радио-кнопки, кнопки, и многое другое.

    Элемент ввода

    Элемент это самый важный элемент формы.

    Элемент может быть показан несколькими способами, в зависимости от атрибута type.

    Вот некоторые примеры:

    Типы Описание
    Определяет однострочное текстовое поле ввода
    Определяет переключатель (для выбора одного из вариантов)
    Определяет кнопку «Отправить» (для отправки формы)

    Вы узнаете намного больше о типах входных позже в этом учебнике.

    Ввод Текста

    определяет однострочное поле ввода ввод текста:

    Пример

    Вот как это будет выглядеть в браузере:

    Примечание: Сама форма не видна. Также обратите внимание, что ширину по умолчанию для текстового поля 20 символов.

    Переключатель входного сигнала

    определяет радио кнопку.

    Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов:

    Пример

    Вот как это будет выглядеть в браузере:

    Мужчина
    Женщина
    Другие

    Кнопка Отправки

    определяет кнопку для представления данных формы форме-обработчику.

    Форма обработчик обычно сервер со скриптом для обработки входных данных.

    Форма обработчик, указанный в форме атрибута action:

    Пример

    Вот как это будет выглядеть в браузере:

    Атрибут действие

    Атрибут action определяет действие, которое будет выполнено при отправке формы.

    Обычно, данные формы отправляются на веб-страницу на сервере, когда пользователь нажимает на кнопку «Отправить».

    В приведенном выше примере, данные формы отправляются на страницу на сервере «action_page.php». На этой странице представлен серверный скрипт, который обрабатывает данные формы:

    Группировка данных формы с

    Элемент используется для группировки связанных данных в форме.

    Элемент определяет название элемента .

    Пример

    Вот как это будет выглядеть в браузере:

    Еще Примеры

    Отправка электронной почтой из формы
    Как отправить электронную почту из формы?

    Проверьте себя с помощью упражнений!

    Спасибо, что Вы помогаете нам!

    Ваше сообщение было отправлено в SchoolsW3.

    Учебники

    Справочники

    Примеры

    Веб Сертификаты

    SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание. Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, не возможно гарантировать правильность всего содержимово. Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности. Авторское право 1999-2020 Все права защищены.
    Работает на стиле W3.CSS.

  • Добавить комментарий