Полное руководство по элементам HTML-формы


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

Свойства и методы формы

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

Работать с формами станет намного удобнее, когда мы их изучим.

Навигация: формы и элементы

Формы в документе входят в специальную коллекцию document.forms .

Это – так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.

Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .

Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .

В этом случае form.elements[name] является коллекцией, например:

Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они ни находились в форме, доступны в коллекции form.elements .

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

Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .

Другими словами, вместо form.elements.login мы можем написать form.login .

Это также работает, но есть небольшая проблема: если мы получаем элемент, а затем меняем его свойство name , то он всё ещё будет доступен под старым именем (также, как и под новым).

В этом легче разобраться на примере:

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

Обратная ссылка: element.form

Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.

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

Рассмотрим элементы управления, используемые в формах.

input и textarea

К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

Обратим внимание: хоть элемент и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.

Там хранится только тот HTML, который был изначально на странице, а не текущее значение.

select и option

В отличие от большинства других элементов управления,

Полное описание элемента

  1. Выведите значение и текст выбранного пункта.
  2. Добавьте пункт: .
  3. Сделайте его выбранным.

решение

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

Большинство элементов добавляется в форму с помощью элемента . Назначение и внешний вид элемента меняются в зависимости от значения атрибута type.

Элемент

Раскрывающийся список (select)

Прокручиваемые списки

По умолчанию с помощью тега

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

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

Пример: Создание списка с заголовками

Элемент

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

Пример: Использование кнопки

HTML5 Элемент

Элемент позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору > . Это позволяет ассоциировать с соответствующим полем ввода:

Пример: Использование элемента

Метки элементов формы (label)

У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента значение такое же, как значение атрибута > . Соответствие значений атрибутов for и > и передать фокус нужному полю формы:

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

Полное руководство по элементам HTML-формы

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

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

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

Лайфхак: наиполезнейшая функция var_export()

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


17 бесплатных шаблонов админок

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

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

Зум слайдер

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

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

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

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

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

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

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

action (англ. «действие»)
Файл на сервере с кодом для отработки отосланных данных
action=»https://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, применённого к данному элементу:

    Мастер Йода рекомендует:  Лучший видеокурс по шаблонам проектирования
    Значение Описание
    button Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
    checkbox
    включено
    выключено
    Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
    color Элемент управления для задания цвета (определяет палитру цветов).
    date Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
    datetime-local Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
    email Определяет поле для ввода адреса электронной почты.
    file Элемент управления, который позволяет пользователю выбрать файл.
    hidden Элемент управления, который определяет скрытое поле ввода.
    image Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit ). По аналогии с тегом вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
    month Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
    number Элемент управления для ввода числа с плавающей точкой.
    password Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега , чтобы задать максимальную длину значения, которое может быть введено в поле.
    radio
    выбрано
    не выбрано
    Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка ( radio button) или переключатель.
    range Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:

    • min = «0»
    • max = «100»
    • value = min + (max — min) / 2 , или min (если max меньше чем min )
    • step = «1»
    reset Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
    search Определяет однострочное текстовое поле для ввода строки поиска
    submit Определяет кнопку отправки формы
    tel Определяет элемент управления для ввода телефонного номера.
    text Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
    Это значение по умолчанию.
    time Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
    url Определяет поле для ввода абсолютного URL-адреса.
    week Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

    С выходом HTML 5 к элементу добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

    • checkbox (флаговая кнопка).
    • radio (радиокнопка).
    • submit (кнопкa отправки формы).
    • text (однострочное текстовое поле).

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

    И так по порядку, что мы сделали в этом примере:

    • Разместили два однострочных текстовых поля ( type = «text» > ) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
    • Разместили две радиокнопки ( type = «radio» > ) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male ). Он применяется только для полей type = «checkbox» > и type = «radio» > , в противном случае он игнорируется.
    • Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
    • Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы ( type = «submit» > ). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name ) и значение (атрибут value ).

    Результат нашего примера в браузере:

    Рис 32 HTML формы.

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

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

    Использование конструктора форм

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

    1. Общая идея ¶

    Конструктор форм использует объект CForm для описания параметров, необходимых для создания HTML формы, таких как модели и поля, используемые в форме, а также параметры построения самой формы. Разработчику достаточно создать объект CForm, задать его параметры и вызвать метод для построения формы.


    Параметры формы организованы в виде иерархии элементов формы. Корнем является объект CForm. Корневой объект формы включает в себя две коллекции, содержащие другие элементы: CForm::buttons и CForm::elements. Первая содержит кнопки (такие как «Сохранить» или «Очистить»), вторая — поля ввода, статический текст и вложенные формы — объекты CForm, находящиеся в коллекции CForm::elements другой формы. Вложенная форма может иметь свою модель данных и коллекции CForm::buttons и CForm::elements.

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

    2. Создание простой формы ¶

    Ниже будет показано, как построить форму входа на сайт.

    Сначала реализуем действие login :

    Вкратце, здесь мы создали объект CForm, используя конфигурацию, найденную по пути, который задан псевдонимом application.views.site.loginForm . Объект CForm, как описано в разделе «Создание модели», использует модель LoginForm .

    Если форма отправлена, и все входные данные прошли проверку без ошибок, перенаправляем пользователя на страницу site/index . Иначе выводим представление login , описывающее форму.

    Псевдоним пути application.views.site.loginForm указывает на файл PHP protected/views/site/loginForm.php . Этот файл возвращает массив, описывающий настройки, необходимые для CForm:

    Настройки, приведённые выше, являются ассоциативным массивом, состоящим из пар имя-значение, используемых для инициализации соответствующих свойств CForm. Самыми важными свойствами, как мы уже упомянули, являются CForm::elements и CForm::buttons. Каждое из них содержит массив, определяющий элементы формы. Более детальное описание элементов формы будет приведено в следующем подразделе.

    Опишем шаблон представления login :

    Подсказка: Приведённый выше код echo $form; эквивалентен echo $form->render(); . Использование более компактной записи возможно, так как CForm реализует магический метод __toString , в котором вызывается метод render() , возвращающий код формы.

    3. Описание элементов формы ¶

    При использовании конструктора форм вместо написания разметки мы, главным образом, описываем элементы формы. В данном подразделе мы опишем, как задать свойство CForm::elements. Мы не будем описывать CForm::buttons, так как конфигурация этого свойства практически ничем не отличается от CForm::elements.

    Свойство CForm::elements является массивом, каждый элемент которого соответствует элементу формы. Это может быть поле ввода, статический текст или вложенная форма.

    Описание поля ввода

    Поле ввода, главным образом, состоит из заголовка, самого поля, подсказки и текста ошибки и должно соответствовать определённому атрибуту модели. Описание поля ввода содержится в экземпляре класса CFormInputElement. Приведённый ниже код массива CForm::elements описывает одно поле ввода:

    Здесь указано, что атрибут модели называется username , тип поля — text и его атрибут maxlength равен 32.

    Любое доступное для записи свойство CFormInputElement может быть настроено приведённым выше способом. К примеру, можно задать свойство hint для того, чтобы показывать подсказку или свойство items, если поле является выпадающим списком или группой элементов checkbox или radio. Если имя опции не является свойством CFormInputElement, оно будет считаться атрибутом соответствующего HTML-тега input. Например, так как опция maxlength не является свойством CFormInputElement, она будет использована как атрибут maxlength HTML-элемента input.

    Следует отдельно остановиться на свойстве type. Оно определяет тип поля ввода. К примеру, тип text означает, что будет использован элемент формы input , а password — поле для ввода пароля. В CFormInputElement реализованы следующие типы полей ввода:

    • text
    • hidden
    • password
    • textarea
    • file
    • radio
    • checkbox
    • listbox
    • dropdownlist
    • checkboxlist
    • radiolist

    Отдельно следует описать использование «списочных» типов dropdownlist , checkboxlist и radiolist . Для них необходимо задать свойство items соответствующего элемента input. Сделать это можно так:

    Данный код сгенерирует выпадающий список с текстом «Выберите значение:» и опциями «Мужчина» и «Женщина», которые мы получаем из метода getGenderOptions модели User .

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

    Описание статического текста

    Довольно часто в форме, помимо полей ввода, содержится некоторая декоративная HTML разметка. К примеру, горизонтальный разделитель для выделения определённых частей формы или изображение, улучшающее внешний вид формы. Подобный HTML код можно описать в коллекции CForm::elements как статический текст. Для этого в CForm::elements в нужном нам месте вместо массива необходимо использовать строку. Например:

    В приведённом коде мы вставили горизонтальный разделитель между полями password и rememberMe .

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

    Описание вложенных форм

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

    Вложенная форма, как и главная, описывается объектом CForm. Для того чтобы описать вложенную форму, необходимо определить элемент типа form в свойстве CForm::elements:

    Так же как и у главной формы, у вложенной формы необходимо задать свойство CForm::elements. Если вложенной форме необходимо сопоставить модель данных, то это можно сделать, задав свойство CForm::model.

    В некоторых случаях бывает полезно определить форму в объекте класса, отличного от CForm. К примеру, как будет показано ниже, можно расширить CForm для реализации своего алгоритма построения разметки. При указании типа элемента form , вложенная форма будет автоматически использовать объект того же класса, что и у главной формы. Если указать тип элемента как, например, XyzForm (строка, оканчивающаяся на Form ), то вложенная форма будет использовать объект класса XyzForm .

    4. Доступ к элементам формы ¶

    Обращаться к элементам формы так же просто, как и к элементам массива. Свойство CForm::elements возвращает объект CFormElementCollection, наследуемый от CMap, что позволяет получить доступ к элементам формы как к элементам массива. Таким образом, чтобы обратиться к элементу username формы login из вышеприведённого примера, можно использовать следующий код:

    Мастер Йода рекомендует:  Создание горизонтального меню с помощью HTML и CSS Javascript

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

    Так как CForm реализует доступ к элементам CForm::elements как к массиву, можно упростить приведённый код до:

    5. Создание вложенной формы ¶

    Ранее мы уже описывали вложенные формы. Форма, содержащая вложенные формы, называется главной. В данном разделе мы будем использовать форму регистрации пользователя в качестве примера создания вложенных форм, соответствующих нескольким моделям данных. Далее данные для входа пользователя хранятся в модели User , а данные профиля — в модели Profile .

    Реализуем действие register следующим образом:

    Выше мы создаём форму, используя настройки из application.views.user.registerForm . После отправки данных формы и успешной их валидации мы пытаемся сохранить модели пользовательских данных и профиля. Мы получаем модели через свойство model соответствующего объекта вложенной формы. Так как валидация уже пройдена, мы вызываем $user->save(false) с параметром false , позволяющим не проводить её повторно. Точно так же поступаем с моделью профиля.

    Далее описываем настройки формы в файле protected/views/user/registerForm.php :

    При задании каждой вложенной формы мы указываем свойство CForm::title. По умолчанию при построении HTML-формы каждая вложенная форма будет выведена в fieldset с заданным нами заголовком.

    Описываем очень простой код шаблона представления register :

    6. Настройка отображения формы ¶

    Главное преимущество при использовании конструктора форм — разделение логики (конфигурация формы хранится в отдельном файле) и отображения (метод CForm::render). Мы можем настроить рендеринг формы, переопределив метод CForm::render либо используя собственный файл представления. Оба варианта позволяют не менять конфигурацию формы и использовать её повторно.

    При переопределении CForm::render необходимо, главным образом, обойти коллекции CForm::elements и CForm::buttons и вызвать метод CFormElement::render для каждого элемента. Например:

    Также можно использовать представление _form :

    Для этого достаточно написать:

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

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

    Построение форм

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


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

    Инициализация формы

    Чтобы добавить форму на страницу мы будем использовать элемент

    Демонстрация формы для входа

    На практике

    С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.

    Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент

    Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:

    В качестве напоминания — класс row добавляет белый фон и обеспечивает некоторый вертикальный padding , в то время как класс grid выравнивает по центру наш контент в середине страницы и обеспечивает некоторый горизонтальный padding .

    Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.

    В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:

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

    Чтобы сделать это, добавим класс why-attend к маркированному списку.

    С этим добавленным классом создадим новый раздел для стилей страницы Регистрация в нижней части нашего файла main.css. В этом разделе мы будем использовать класс, чтобы выбрать маркированный список и добавить list-style как square , а также некоторые margin .

    Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:

    Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу

    Далее, внутри элемента

    Здесь мы видим, что каждое поле формы вложено в элемент . Поле для «Имя» использует элемент со значением атрибута type как text , в то время как поле «Email» использует элемент со значением email у атрибута type .

    Оба поля формы — «Имя» и «Email» включают в себя логический атрибут required и атрибут placeholder .

    Для поля «Количество билетов» применяется элемент и вложенные элементы . Сам элемент включает в себя логический атрибут required , а первый элемент включает логический атрибут selected .

    Для поля комментариев используется элемент

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

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

    В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:

    Мы начали с размещения 22-пиксельного margin снизу формы, чтобы вертикальное пространство помогло отделить его от других элементов. Затем добавили некоторые шрифтовые свойства, в том числе насыщенность, размер, высота строки и семейство для всех элементов , и

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

    Добавим некоторые стили для элементов внутри . Поскольку мы можем добавить дополнительные элементы позже, добавим класс register-group к нашему существующему элементу , оттуда мы можем применить уникальные стили к элементам вложенных в него.

    После того, как класс register-group находится на месте, мы добавим несколько стилей для элементов, вложенных в . Эти стили появятся в нашем файле main.css, ниже существующих стилей формы.

    Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.

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

    Добавим значение btn к атрибуту class , наряду с новым классом btn-default к нашей кнопке для отправки. Мы будем использовать имя класса btn-default специально, так как эта кнопка выводится на белом фоне и стиль для кнопок по умолчанию передвинется вперёд.

    Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.

    Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:

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

    Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.

    Рис. 10.07. Наша страница регистрации с формой

    Демонстрация и исходный код

    Ниже вы можете скачать исходный код сайта на данный момент.

    Резюме

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

    Напомним быстро, что мы обсудили в этом уроке:

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

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

    Формы HTML5

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

    HTML-формы существовали с самых ранних времен языка HTML, и с тех пор они нисколько не изменились, несмотря на определенные серьезные усилия. Разработчики веб-стандартов несколько лет колдовали над стандартом XForms, который должен был заменить HTML-формы, но его постиг такой же провал, как и стандарт XHTML 2.

    Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.

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

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

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

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

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

    Мастер Йода рекомендует:  Ошибка файловой системы NTFS приводит к вылету Windows 7 и Windows 8.1


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

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

    Модернизация традиционной 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») и, если необходимо, запускать собственный код для автоматического фокуса.

    PHP 5. Полное руководство — Коггзолл Дж.

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

    Элементы текстового поля и поля ввода пароля

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

    Таблица 4.2. Атрибуты текстового поля

    NAME Имя, присвоенное текстовому ПОЛЮ.
    SIZE Размер текстового поля в браузере (в символах).
    MAXLENGTH Максимальное количество символов, принимаемое текстовым полем.
    VALUE Значение по умолчанию для текстового поля.
    Листинг 4.1. Создание текстового поля в HTML

    103
    ^Од Использование PHP для разработки Web-приложений

    Подобно текстовому полю, поле ввода пароля позволяет организовать такой же однострочный ввод. Однако в отличие от только что описанного текстового поля, поле ввода пароля маскирует вводимые символы таким образом, что они не могут быть прочитаны с экрана. Чтобы создать поле ввода пароля, установите значение атрибута ТУРЕ дескриптора равным PASSWORD. Поскольку текстовые поля и поля ввода пароля принимают один и тот же набор атрибутов, обратитесь к табл. 4.2, чтобы просмотреть набор допустимых атрибутов для полей ввода пароля. Ниже представлен пример использования поля пароля.

    Листинг 4.2. Создание поля ввода пароля в HTML__________________________________

    Элементы переключателя и флажка

    Один из методов, предназначенных для того, чтобы позволить пользователям выбирать один пункт из списка допустимых, предполагает использование переключателей. В HTML переключатель может быть создан установкой значения атрибута TYPE дескриптора равным RADIO. Элемент переключателя допускает только три атрибута: NAME, VALUE и CHECKED. Когда вы имеете дело с переключателями, необходимо принимать во внимание следующие моменты:

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

    • Атрибуту CHECKED не присваивается значение, и только один переключатель в группе может иметь этот атрибут (см. листинг 4.3).

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

    Листинг 4.3. Создание группы переключателей в HTML

    Американский футбол CINPUT TYPE=»radio» NAME=»myradio» VALUE=»2″> yT6 XoKKeft

    Флажки подобны переключателям, но позволяют отмечать любое количество из представленных позиций. Флажок создается установкой значения атрибута TYPE в дескрипторе равным CHECKBOX. В отличие от переключателей, здесь не требуется устанавливать одинаковые значения атрибута NAME для всей группы, и не действует ограничение на количество элементов группы, снабженных атрибутом CHECKED.

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

    Листинг Д.4. Создание группы флажков в HTML____________________________________

    Американский футбол CINPUT TYPE=»checkbox» NAME=»mycheckbox2″ CHECKED VALUE=»2″>ФутболCBR> CINPUT TYPE=»checkbox» NAME=»mycheckbox3″ CHECKED VALUE=»3″>ХоккейсВВ> CINPUT TYPE=»checkbox» NAME=»mycheckbox4″ VALUE=,,4″>БeйcбoлCBR>

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

    Следующий элемент формы, который мы рассмотрим — это элемент загрузки файла. Этот элемент формы предоставляет возможность клиентскому браузеру просматривать локальную файловую систему и выбирать файл дли загрузки на Web-cepuep. Более подробно о том, как этот элемент должен использоваться для правильной его работы, будет описано позднее в настоящей главе, в разделе “Управление загрузкой файлов”. Чтобы создать элемент загрузки файлов, установите значение атрибута TYPE дескриптора CINPUT> равным FILE. Допустимые атрибуты этого Элемента формы перечислены в табл. 4.3.
    Предыдущая 41 42 43 44 45 46 .. 300 >> Следующая

    Полное руководство по элементам HTML-формы

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

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

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

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

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

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

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

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

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

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

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

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

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