На формы и элементы их. Веб-формы и их элементы: виды и назначение
На формы и элементы их. Веб-формы и их элементы: виды и назначение
12.04.2019Windows 8
Одним из вариантов обработки формы может быть пересылка данных по электронной почте:
action="mailto:Aдpec@cepвep.домен"
С помощью атрибута method можно задать протокол для пересылки данных на сервер. Протокол GET используется по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используется протокол POST.
Атрибут enctype позволяет указать способ кодирования содержимого формы.
Форму заполняют разные пользователи, поэтому для нее предусмотрен атрибут, который позволяет определить список допустимых кодировок:
accept-charset="список кодировок"
Можно также определить список допустимых типов данных:
accept="список типов данных"
Большинство форм снабжаются кнопками, которые позволяют очистить (reset"форму или подтвердить (submit) правильность ее заполнения и отослать данные. Чтобы определить программы-сценарии, которые должны выполняться после указанных действий пользователя, существуют два атрибута событий onsubmit и on reset.
Этот элемент позволяет создавать различные части формы, такие как флажки переключатели, поля ввода. Элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов.
Вид элемента определяет атрибут 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.
Используя элементы FORM и INPUT, можно создать объект, который заменит аналогичный объект, созданный на основе элемента ISINDEX. Приведенный ниже код выполняет те же функции, что и код, посвященный элементу ISINDEX (см. рис. 4.3):
размещаются элементы формы.
Элементы формы - это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь
вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно.
Тэг
Тэг
может выглядеть на странице по-разному в зависимости от
типа. В том числе он может создавать разные поля для ввода. Типов тэга
достаточно много, поэтому он рассматривается в отдельной теме. А пока мы для примера создадим его на
странице. Добавим его внутрь тэга
.
Атрибут name
очень важен. Имя элемента формы передаётся на сервер вместе со
значением. Данные отправляются на сервер в следующем виде:
имя = значение
Если в приведённом примере пользователь введёт в поле для ввода - Andrey, то на сервер будут отправлены
данные в виде:
Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут.
Тэг
Тэг
Тэг
является парным. Внутрь него можно пометсить текст,
который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.
У тега
Если у какого-то пункта списка есть атрибут selected
, то этот пункт является
выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать
в тэге.
Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью
атрибута size
. При этом внешний вид списка зависит от его высоты. Если список
имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки,
то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта.
Её также можно изменить с помощью CSS.
Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.
Но в таком виде это просто текстовый тэг. Основная функция тэга
Атрибут value
содержит текст, который отображается на кнопке.
При нажатии на кнопку, на сервере запускается файл, который указан в атрибуте action
тэга
. Этот файл получает данные из формы.
Автофокус
Любому элементу формы можно установить атрибут autofocus
. Ему не нужно указывать
значение, он просто устанавливается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе
после загрузки страницы. Атрибут работает не во всех браузерах.
Каждый элемент страницы можно рассматривать как объект, который имеет свои свойства, методы и обработчики событий. Чаще всего события на странице связаны с формой (нажатие кнопки, например).
Формы в документе представлены семейством Forms. К именованным формам можно обратиться непосредственно по имени: forms.MyForm.свойство или MyForm.свойство.
defaultValue – возвращает первоначальное значение элемента, установленное в тегах.
Методы:
select() – выделяет область ввода указанного элемента формы.
События:
OnChange – содержимое объекта было изменено. Проверяется конечный результат. То есть, в процессе редактирования могли быть внесены, а затем удалены изменения. Если начальное состояние поля равно конечному состоянию, то считается что событие не произошло.
(horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Такая линия будет полезна при отделении тематического вступления от основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Некоторые элементы HTML, которые могут присутствовать внутри тега BODY, называются элементами «уровня блока », в то время как другие - «встроенными » (также называемыми элементами «уровня текста»).
Модель содержимого
Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
Встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет.
Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста.
Общие атрибуты могут использоваться практически для любого тега HTML. Поэтому их и выделяют в отдельную группу, чтобы избежать многочисленных бессмысленных повторов.
Accesskey
Позволяет перейти к текстовому полю с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш..
Задает один или несколько имен классов для связи элемента со стилевым оформлением. Если указаны несколько классов, то они перечисляются через пробел. Имя класса может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква. contenteditable
Указывает можно ли редактировать содержание элемента или нет. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (contenteditable).
Contextmenu
Устанавливает контекстное меню для элемента. Значение атрибута – идентификатор меню, созданного с помощью тега
префикс data-
удаляется;
дефис перед буквой удаляется, а буква за ним становится прописной;
другие дефисы остаются неизменными.
Например, атрибут data-number-of-users преобразуется в переменную numberOfUsers.
Задает направление отображения текста. Возможные значения:
ltr – слева направо,
rtr – справа налево.
Draggable
Указывает, можно ли перетаскивать элемент с помощью мышки или нет. Возможные значения: "true", "false".
Элемент скрыт, т.е. он не отображается на странице, но доступен через скрипты.
Атрибут hidden не работает в Safari, Android, iOS.
Идентификатор элемента, который используется для обращения к элементу через скрипты. Идентификатор – уникальное имя элемента, т.е. в коде документа должен встречаться только один раз. Идентификатор может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква. В HTML5 id
можно использовать также для ссылки на конкретное место Web-страницы.
Язык содержимого элемента.
Spellcheck
Определяет проверять или не проверять правописание и грамматику в тексте. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (spellcheck). Результат будет заметен только для полей форм и
, а также для элементов c установленным атрибутом contenteditable.
Внутренние стили элемента.
Tabindex
Определяет порядок получения фокуса в форме при переходе между элементами с помощью клавиши Tab. Возможное значение – любое целое положительное число. Переход к элементам, у которых не задан атрибут tabindex, происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.
Всплывающий текст, появляющийся при наведении указателя мышки на элемент.
Таблицы стилей. Селекторы
Таблицы стилей.
Стиль – это все что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты, цвета, позиционирование и т.д.
Каскадные таблицы стилей представляют собой простую технологию присоединения стилей к документам HTML. Таблица стилей – это шаблон, который управляет форматированием тегов в документе. Она представляет собой набор правил отображения.
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Каждый элемент HTML представляет собой возможный CSS селектор. Свойства селектора определяют стиль документа, для которого он определен.
Виды селекторов:
Обычный.
Селектор {определение
}
Определение состоит из двух частей: свойства и его значения, разделенных двоеточием. Назначение свойства видно из его названия.
Классовые селекторы.
селектор.класс {определение
}
В CSS с помощью классовых селекторов можно описать собственные стили для различных классов одних и тех же элементов.
Классы также могут быть описаны без явного привязывания к определенным элементам.
Классы также могут быть описаны без явного привязывания их к определенным элементам.
ID-селекторы.
#ID {определение}
ID – индивидуально именованный стиль. С его помощью можно создавать стилистические исключения среди элементов одного класса. Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств.
Контекстные селекторы.
селектор селектор {определение
}
Контекстные селекторы – это сочетания нескольких обыкновенных селекторов. Стиль задается только элементом в заданной последовательности в зависимости от каскадного порядка.
Для того чтобы придать нескольким элементам одинаковые свойства селекторы перечисляются через запятую.
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент
...
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
Атрибут
Значение / описание
accept-charset
Значение атрибута представляет собой разделенный пробелами список кодировок символов
, которые будут использоваться для отправки формы, например,
.
action
Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
autocomplete
enctype
Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method
Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
name
Задает имя формы
, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" .
novalidate
Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target
Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента