Элемент Form


Оглавление (нажмите, чтобы открыть):

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

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

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.

    Элемент

    Самым важным элементом формы является элемент .

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

    Все различные типы входных данных описаны в следующей главе.

    Элемент

    Элемент

    Атрибут rows задает количество видимых строк в области текста.

    Атрибут cols атрибут указывает видимая ширина текстовой области.

    Вот как код HTML будет отображаться в браузере:

    Элемент

    Элемент определяет кликабельная кнопка:

    Пример

    Вот как код HTML будет отображаться в браузере:

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

    В HTML5 добавлены следующие элементы формы:

    Примечание: Браузеры не отображают неизвестные элементы. Новые элементы, которые не поддерживаются в старых браузерах не будет «уничтожены » веб-странице.

    Элемент HTML5

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

    Пользователи будут видеть раскрывающийся список из предварительно заданных вариантов исходных данных.

    Атрибут list в элементе , необходимо обратиться к атрибуту id в элементе .

    Пример

    Элемент HTML5

    Цель элемента обеспечить безопасный способ для проверки подлинности пользователей.

    Элемент задает два ключа генератора поля в форме.

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

    Закрытый ключ хранится локально, а открытый ключ отправляется на сервер.

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

    Пример

    Форма с шифровкой:

    Элемент HTML5

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


    Пример

    Выполнить расчет и показать результат в элементе :

    Элемент Form (List) Form element (List)

    Применимо к: SharePoint 2020 | SharePoint Foundation 2013 | SharePoint Online | SharePoint Server 2013 Applies to: SharePoint 2020 | SharePoint Foundation 2013 | SharePoint Online | SharePoint Server 2013

    Описывает формы в базовом типе списка. Describes the forms in a base list type.

    Элементы и атрибуты Elements and attributes

    В следующих разделах описываются атрибуты, дочерние и родительские элементы. The following sections describe attributes, child elements, and parent elements.

    Атрибуты Attributes

    Атрибут Attribute Описание Description
    Default Default НеОбязательный текст. Optional Text. Указывает, является ли форма используемой по умолчанию формой для указанного типа. Specifies whether the form is the default form to use for the specified Type.

    Например, можно определить несколько форм, для которых тип равен DisplayForm. For example, one can define multiple forms for which Type equals DisplayForm. В этом случае необходимо установить форму отображения по умолчанию, чтобы список мог определять, какую форму отображения использовать. If this is the case, a default display form must be established so that a list can determine which display form to use.

    Если определено несколько форм с одинаковым типом, а форма по умолчанию не устанавливается с указанием значения по умолчанию = «true», форма по умолчанию будет выбрана программным способом. If multiple forms are defined that have the same Type, and a default form is not established by specifying Default=»TRUE», a default form will be chosen programmatically.

    Формы в HTML

    В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.

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

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

    Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

    • текстовые поля (для одной или нескольких строк);
    • переключатели;
    • флажки;
    • выпадающие списки;
    • виджеты для загрузки;
    • кнопки отправки.

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

    Элемент

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

    Современные формы на HTML5 и CSS3

    Дата публикации: 2013-02-08

    От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

    Шаг 1: Формирование представления о функциональности

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

    Адрес электронной почты

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    Шаг 2: Разработка формы

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

    Видите, нашу форму составляют следующие элементы:

    Заголовок
    Обозначение обязательных для заполнения полей

    Названия полей ввода


    Поля ввода данных
    Текст-заполнитель

    Подсказки к полям

    Кнопка «Отправить» (Submit)

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

    Шаг 3: Первичный код HTML

    Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

    Шаг 4: Форма HTML

    Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

    Шаг 5: Элементы формы HTML

    Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

    Подсказки для полей формы

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

    Остальные элементы input

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

    Шаг 6: Добавляем атрибут placeholder

    Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.

    Давайте добавим атрибут placeholder для всех текстовых тегов input. Это поможет пользователю понять, что нужно ввести в каждое поле.

    Подсказка: Назначьте placeholder’у стили

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

    В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

    Шаг 7: Основной CSS

    Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

    Удалите стиль :focus

    Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

    Типографские стили

    Давайте определим элементам своей формы типографские стили:

    Стили списка

    Давайте назначим стили элементам списка, чтобы придать форме структуру:

    Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

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

    Заголовок формы

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

    Элементы input

    Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.

    Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.


    Шаг 8: Добавляем интерактивность с помощью CSS3

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

    Шаг 9: Атрибут required в HTML5

    Теперь пора заняться долгожданным: инструментами управления формой HTML5.

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

    Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

    Шаг 10: Стили обязательных для заполнения полей

    Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

    Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

    Что происходит при отправке формы?

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

    В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

    Подсказка:

    На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

    Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

    Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

    Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

    Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

    Пример: iPhone

    iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

    Шаг 12: Изменение атрибутов type

    Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.

    Формы HTML5

    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:

    И вот результат:

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

    ; элемент Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент

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

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

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

    Добавление подсказок

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

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

    Подстановочный текст для поля создается с помощью атрибута placeholder:

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

    В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.

    А вот псевдокласс focus обеспечивается лучшей поддержкой, и его можно использовать, чтобы изменять внешний вид текстового поля при получении фокуса. Например, сделать фон поля более темным, чтобы оно выделялось среди остальных, можно следующим образом:

    Фокус

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

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

    Например, особо проворные пользователи могут опередить вызов метода focus(), щелкнуть в каком-либо другом поле и начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо выдвинется из выбранного им поля и переместится в поле, выбранное методом. Но если управлять фокусом может браузер, он может быть несколько более смышленым и перемещать фокус только в том случае, если пользователь еще не выбрал другое поле.

    На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент или

    (но только в один элемент формы), как показано в следующем примере:

    Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.

    Формы в HTML

    Что такое форма

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

    Так как формы связаны с работой сервера, при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Во перывх, потому что отдельные элементы формы могут существовать и без отправки на сервер. А данные в них могут быть использованы при работе различных скриптов. Во вторых, если Вы будете дальше развиваться в области создания сайтов, то Вам нужно будет знать, по крайней мере, один серверный язык, например PHP. И когда Вы будете его изучать, Вам нужно будет знать HTML, чтобы не отвлекаться на это.

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

    HTML Форма создаётся с помощью тэга

    Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде:

    Если в приведённом примере пользователь введёт в поле для ввода — Andrey, то на сервер будут отправлены данные в виде:

    Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут.

    Атрибут name имеет тот же смысл, что и у тэга .

    Полю для ввода можно задать размеры. Для этого есть атрибут cols , который устанавливает ширину поля в символах и атрибут rows , который устанавливает высоту поля в строках. Вместо этого можно использовать CSS. Как и любому блоку, тэгу

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


    У тега есть атрибут name , который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде:

    Если у какого-то пункта списка есть атрибут selected , то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге.

    Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью атрибута size . При этом внешний вид списка зависит от его высоты. Если список имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки, то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта. Её также можно изменить с помощью CSS.

    Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.

    Другие атрибуты тэгов и Вы можете найти в справочниках.

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

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

    Нажмите на странице на слово «Login», поле для ввода окажется в фокусе.

    Отправка формы

    Чтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг и установить ему тип submit. Ещё одним примером отправки HTML формы на сервер является нажатие клавиши Enter на клавиатуре, когда один из элементов формы находится в фокусе.

    Добавим в форму кнопку отправки данных на сервер:

    Атрибут value содержит текст, который отображается на кнопке.

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

    Автофокус

    Любому элементу формы можно установить атрибут autofocus . Ему не нужно указывать значение, он просто устанавливается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах.

    Коприрование материалов сайта возможно только с согласия администрации

    HTML формы

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

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

    Основные теги, используемые для создания HTML форм, — это тег

    Тег – это основа всего мира форм. Он может быть десяти видов:

    • — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
    • — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
    • — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате и который задает начальное состояние флажка «включен».
    • — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
    • — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
    • — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, .
    • — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге .
    • — создает кнопку, которая без дополнительного кода ничего не будет делать.
    • — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
    • — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

    Обратите внимание, что тег закрывает сам себя при помощи конструкции «/>».

    При отправке данных формы посылается выбранный элемент списка.

    Аналогично атрибуту checked в флажках и переключателях тег

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

    Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега

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

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

    Читайте также:

    1. D-ЭЛЕМЕНТЫ И ИХ СОЕДИНЕНИЯ
    2. Delphi 8 2008 для платформы Microsoft .Net
    3. HTML-формы
    4. I. Виды, формы и системы оплаты труда.
    5. I. Групповой процесс (формы и способы взаимодействия внутри группы)
    6. II. Н/г бассейны Индостанской платформы
    7. II. Организационно-правовые формы страховых компаний.
    8. II. Основные направления реформы
    9. II. ЭЛЕМЕНТЫ АНАЛИТИЧЕСКОЙ ГЕОМЕТРИИ.
    10. XX съезд КПСС и осуждение культа личности. Экономические реформы конца 50-х – начала 60-х гг. Политика мирного сосуществования.
    11. Автоматизированные формы ведения учета
    12. Автоматизированные формы ведения учета

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

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

    Атрибут enctype позволяет указать способ кодирования содержимого формы.

    Форму заполняют разные пользователи, поэтому для нее предусмотрен атрибут, который позволяет определить список допустимых кодировок:


    Можно также определить список допустимых типов данных:

    accept=»список типов данных»

    Большинство форм снабжаются кнопками, которые позволяют очистить (reset»форму или подтвердить (submit) правильность ее заполнения и отослать данные. Чтобы определить программы-сценарии, которые должны выполняться после указанных действий пользователя, существуют два атрибута событий onsubmit и on reset.

    Стандартные атрибуты: id, class, lang, style, dir, title, target, атрибуты событий

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

    Вид элемента определяет атрибут type:

    • type=»text» — создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value;

    • type=»password» — создание поля для ввода пароля, причем введенная информация отображается звездочками;

    • type=»checkbox» — создание флажка;

    • type=»radio» — определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов INPUT. Вот пример группы из трех переключателей:

    Переключатели

    Атрибут checked определяет, какой из переключателей должен быть выбран по

    умолчанию. На рис. 4.4 показан внешний вид этой группы переключателей.

    Рис.4.4. Группа переключателей

    • type=»button» — создание кнопки произвольного назначения;

    • type=»submit» — создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке;

    • type=»reset» — тоже кнопка, но для отмены ввода данных в форму;

    • type=»image» — создание кнопки с рисунком. Для указания графического файла используется атрибут src. Атрибут align предназначен для позиционирования кнопки с рисунком. Значения атрибута уже неоднократно упоминались:

    bottom, left, middle, right, top. Пользоваться этим атрибутом в данном случае я не рекомендую, так как не все броузеры его поддерживают;

    • type=»f ile» — средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Кроме того, броузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный (для операционной системы) диалог выбора файлов;

    • type=»hidden» — скрытый от пользователя элемент. Такие элементы используются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.

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

    Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени может выделить необходимые данные.

    Область применения атрибута value нам уже известна. Значение атрибута задает значение по умолчанию для поля ввода или определяет надпись на кнопке.

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

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

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

    Атрибут readonly позволяет создать элемент, недоступный для редактирования.

    Атрибут usemap (см. выше раздел «Рисунки и карты») может использоваться, если в форме создается карта.

    Так же, как и в FORM, в элементе INPUT можно указывать атрибут accept.

    Допустимые общие атрибуты: accesskey, tabindex, readonly, disabled.

    Стандартные атрибуты: id, class, lang, title, dir, style, атрибуты событий.

    Используя элементы FORM и INPUT, можно создать объект, который заменит аналогичный объект, созданный на основе элемента ISINDEX. Приведенный ниже код выполняет те же функции, что и код, посвященный элементу ISINDEX (см. рис. 4.3):

    Этот элемент является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:

    Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for, значение которого должно совпадать со значением атрибута id соответствующего элемента:

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

    Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, атрибуты событий.

    Дата добавления: 2014-01-15 ; Просмотров: 377 ; Нарушение авторских прав? ;

    Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

    HTML-форма и ее основные элементы

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

    Вставка формы осуществляется напрямую в HTML — код страницы . Главный элемент формы называется form> . Уже внутрь него добавляются все остальные элементы – текстовые поля , « чекбоксы» , переключатели и т . д . У элемента form> имеется несколько атрибутов , один из которых является обязательным . Он называется action . В action указывается , где именно будет приниматься и обрабатываться информация , переданная посредством формы . Как правило , обработка происходит в стороннем PHP — файле . Пример использования атрибута – action =» obrabotchik . php «. Атрибут method позволяет задать метод передачи информации . По умолчанию ( если не прописывать атрибут ) будет указан метод GET . В данном случае информация передается напрямую через URL — адрес . Для каждого элемента формы будет создана пара следующего вида – « имя элемента = значение , которое в нем лежит ». Все эти пары , разделенные знаком « амперсанд » будут перечислены в адресной строке . Если прописать method =» POST » ( регистр не важен ), то данные будут передаваться не через URL , а через тело запроса ( в скрытом режиме ). В большинстве случаев используют именно POST . Пример создания формы:

    Мастер Йода рекомендует:  Чем ссылка глубже - тем она лучше
  • Добавить комментарий