Определение элементов формы. Веб-формы и их элементы: виды и назначение
Каждый элемент страницы можно рассматривать как объект, который имеет свои свойства, методы и обработчики событий. Чаще всего события на странице связаны с формой (нажатие кнопки, например).
Формы в документе представлены семейством Forms. К именованным формам можно обратиться непосредственно по имени: forms.MyForm.свойство или MyForm.свойство.
Общие свойства элементов формы:
Value – возвращает содержимое объекта.
Disabled – делает объект неактивным.
Name – возвращает строку со значением name объекта.
Общие события элементов формы:
OnFocus – объект попал в фокус, стал активным.
OnBlur – объект вышел из фокуса.
OnClick – произошло нажатие мыши в области объекта.
OnDblClick – произошло двойное нажатие мыши в области объекта.
OnMouseOver – мышь наведена на элемент.
OnMouseOut – указатель мыши «ушел» с элемента.
Общие методы элементов формы:
focus – передает фокус указанному элементу формы.
blur – удаляет фокус из элемента формы.
Элементы Text, Password, textArea.
Свойства:
maxLength – возвращает максимальную длину строки.
defaultValue – возвращает первоначальное значение элемента, установленное в тегах.
Методы:
select() – выделяет область ввода указанного элемента формы.
События:
OnChange – содержимое объекта было изменено. Проверяется конечный результат. То есть, в процессе редактирования могли быть внесены, а затем удалены изменения. Если начальное состояние поля равно конечному состоянию, то считается что событие не произошло.
OnSelect – произошло выделение части текста.
Элемент CheckBox, Radio.
Свойства:
checked – проверка текущего состояния флажка. True – установлен, False – снят.
defaultChecked - возвращает первоначальное значение элемента, установленное в тегах.
Элемент Select.
Свойства:
options – массив параметров option объекта.
selectedIndex – возвращает индекс выбранного элемента.
selected – возвращает логическое значение, показывающее текущее состояние параметра в объекте.
defaultSelected – возвращает логическое значение - первоначальное значение элемента, установленное в тегах.
index – возвращает индекс элемента.
События:
OnChange – содержимое объекта было изменено.
Теги логического разделения. Общие атрибуты тегов.
HTML тег
(horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Такая линия будет полезна при отделении тематического вступления от основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Некоторые элементы HTML, которые могут присутствовать внутри тега BODY, называются элементами «уровня блока », в то время как другие - «встроенными » (также называемыми элементами «уровня текста»).
Модель содержимого
Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
Встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет.
Группировка элементов: элементы DIV и SPAN
Начальный тег: обязателен, Конечный тег: обязателен
Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста.
Визуальные браузеры обычно помещают символ перевода строки перед и после элементов 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). Результат будет заметен только для полей форм и используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент
Одним из важнейших свойств web-документов является возможность получения данных от клиентов и отправки их на сервер . Эта возможность обеспечивается с помощью так назваемых ФОРМ (FORMS ).
Таким образом,
Как выглядят HTML-формы?
Вот один из простейших примеров:
| 1. | Фамилия * | |
| 2. | Имя, отчество * | |
| 3. | Место работы * | |
| 4. | Должность * | |
| 5. | Рабочий адрес * | |
| 6. | Рабочий телефон * | |
| 7. | Факс | |
| 8. | E-mail * | |
| 9. | Адрес личной web-страницы | |
| 10. | Ученая степень | |
| 11. | Ученое звание | |
| 12. | Область научных интересов * | 1. 2. 3. 4. 5. 6. |
Это очень простая форма. Она содержит лишь текстовые поля и две кнопки. Первая кнопка (RESET ) позволяет "сбросить" все введенные пользователем данные, вторая (SUBMIT )- непосредственно отсылает данные на сервер . Ясно, что если забыть разместить в форме кнопку SUBMIT , то данные на сервер не будут отправлены. Поэтому
Рассмотрим HTML-код, создающий форму.
| Формы размещаются в контейнере . |
Этот контейнер можно уподобить обычному бумажному почтовому конверту - на последнем обязательно присутствует адрес назначения и фамилия адресата, в тэге непременно указывается адрес серверного сценария , который получит и обработает ввведенные клиентом данные. Для этого используется атрибут action . Таким образом, простейшая форма имеет такую структуру:
Атрибут action
является обязательным (если, конечно, отправка данных на сервер предусмотрена), но не единственным атрибутом формы. О других атрибутах мы поговорим чуть позднее, а пока остановимся на основных элементах форм.
Элементы форм
Все элементы форм создаются тэгами, имеющими начало: , где значения атрибута type и определяют тип элемента. Рассмотрим возможные значения этого атрибута.
- Текстовое поле (text field):
(Мы только что видели их в нашем примере)
Текстовое поле определяет код:
Здесь
- name - имя поля (впоследствии мы узнаем, как к элементам форм можно обращаться просто по имени);
- value - то, что будет записано в текстовое поле "по умолчанию", как только документ появится в окне браузера;
- align - этот атрибут "отвечает" за расположение текстового поля; он не является специфическим для элементов форм и (как и в других тэгах) может принимать значения: left , right , center ;
- size - длина поля в символах;
- maxlength - максимальное число символов, которое можно ввести в поле. Если этот атрибут не указывать, ограничений на ввод не будет.
Значением текстового поля должен быть только текст. Если, к примеру, поместить в него html-код, он будет отображаться как текст (а не так, как он выглядел бы в окне браузера). Но вот , выполненный Сергеем Бурылиным. Как ему это удалось - попробуйте разобраться сами.
- Текстовая область (text area):
Текстовые области удобно использовать для ввода большого количества текстовой информации
Код текстовой области выглядит следующим образом:
Здесь атрибут "wrap"
указывает на способ разрыва строки: если присвоить ему значение off
, вводимый текст будет "уходить" за пределы области
, в противном случае (on
, soft
или даже просто wrap
без присвоения) текст автоматически переносится на новую строку.
- Список:
Списки позволяют сделать единственный или множественный выбор из набора предлагаемых опций (options ).
Структрура HTML-кода, определяющего список, такова:
Коды списков, приведенных нами в качестве примеров, имеют вид:
| <select name="week
" size="7
"> <option value="1 ">Понедельник </option> <option value="2 ">Вторник </option> <option value="3 ">Среда </option> <option value="4 ">Четверг </option> <option value="5 ">Пятница </option> <option value="6 ">Суббота </option> <option value="7 ">Воскресенье </option> </select> Список с единственным выбором, показаны все имющиеся опции, ни одна не выделена. |
<select name="food
" size="4
" multiple> <option value="1 " selected>Пицца </option> <option value="2 ">Хот-дог </option> <option value="3 ">Шашлык </option> <option value="4 ">Мороженое </option> <option value="5 ">Шампанское </option> <option value="6 ">Ананас </option> <option value="7 ">Шоколад </option> <option value="8 ">Кофе </option> </select> Список с множественным выбором, показаны лишь 4 из 8-ми опций, первая опция выделена. |
- "Флажок" (Checkbox)
"Единичный" флажок создается с помощью кода:
Атрибут checked
указывает на то, что "флажок" по умолчанию будет отмеченным.
Часто используется сразу несколько "флажков", например:
| Укажите Ваши навыки:
<input type="checkbox" name="skill " value="1 " checked>HTML <input type="checkbox" name="skill " value="2 ">JavaScript <input type="checkbox" name="skill " value="3 ">ASP <input type="checkbox" name="skill " value="4 ">Perl <input type="checkbox" name="skill " value="5 ">PHP <input type="checkbox" name="skill " value="6 ">XML <input type="checkbox" name="skill " value="7 ">FLASH |
Укажите Ваши навыки:
HTML JavaScript ASP Perl PHP XML FLASH |
- "Радиокнопка" (Radiobutton)
"Единичная" радиокнопка создается с помощью кода:
| текст, который обычно помещается рядом с радиокнопкой
|
Атрибут checked
указывает на то, что радиокнопка по умолчанию будет отмеченной.
Часто используется сразу несколько радиокнопок, например:
| Укажите Ваши навыки:
<input type="radio" name="skill " value="1 " checked>HTML <input type="radio" name="skill " value="2 ">JavaScript <input type="radio" name="skill " value="3 ">ASP <input type="radio" name="skill " value="4 ">Perl <input type="radio" name="skill " value="5 ">PHP <input type="radio" name="skill " value="6 ">XML <input type="radio" name="skill " value="7 ">FLASH |
Укажите Ваши навыки:
HTML отправку данных на сервер . Такая кнопка создается с помощью кода: При нажатии кнопки submit данные передаются на сервер по адресу указанному в качестве значения атрибута action . Чтобы предусмотреть возможность сброса
всех введенных пользователем данных (и восстановления данных, указанных по умолчанию), используется кнопка reset
. Код ее выглядит следующим образом:
|
Форма – это объект БД, предназначенный для ввода и отображения информации. Формы позволяют выполнить проверку корректности данных при вводе, проводить вычисления, обеспечивает доступ к данным в связанных таблицах с помощью подчиненных форм.
Работа с формами может происходить в четырех режимах: в режиме Формы, в режиме Таблицы, в режиме Макета, в режиме Конструктора. Выбрать режим работы можно при помощи пиктограммы Режим группы Режимы вкладки ГЛАВНАЯ.
В режимах Формы и Таблицы можно осуществлять добавление, удаление и редактирование записей в таблице или в запросе, являющимся источником данных для форм.
В режиме Конструктора можно производить изменение внешнего вида формы, добавление и удаление элементов управления, разработку.
В режиме Макета можно изменять свойства полей, определять формат полей, изменить макет формы целиком, а также выполнить условное форматирование полей.
Виды форм.
В Access можно создать формы следующих видов:
Форма в столбец или полноэкранная форма;
Ленточная форма;
Табличная форма;
Форма главная / подчиненная;
Сводная таблица;
Форма – диаграмма или сводная диаграмма.
Форма в столбец представляет собой совокупность определенным образом расположенных полей ввода с соответствующими им метками и элементами управления. Чаще всего эта форма используется для ввода и редактирования данных.
Ленточная форма служит для отображения полей группы записей. Поля не обязательно располагаются в виде таблицы, однако для одного поля отводится столбец, а метки поля располагаются как заголовки столбцов.
Табличная форма отображает данные в режиме таблицы.
Форма главная/подчиненная представляет собой совокупность формы в столбец и табличной. Ее имеет смысл создавать при работе со связанными таблицами, в которых установлена связь типа «один-ко-многим».
Форма Сводная таблица выполняется мастером создания сводных таблиц Excel на основе таблиц и запросов Access (мастер сводных таблиц является объектом, внедренным в Access , чтобы использовать его в Access необходимо установить Excel ). Сводная таблица представляет собой перекрестную таблицу данных, в которой итоговые данные располагаются на пересечении строк и столбцов с текущими значениями параметров.
Форма с диаграммой. В Access в форму можно вставить диаграмму, созданную Microsoft Graph . Graph является внедряемым OLE приложением и может быть запущен из Access . С внедренной диаграммой можно работать так же, как и с любым объектом OLE .
Структуры формы.
Любая форма может включать следующие разделы:
- Заголовок формы – определяет верхнюю часть формы и может содержать текст, графику и другие элементы управления;
- Верхний колонтитул – раздел отображается только в режиме предварительного просмотра и обычно содержит заголовки столбцов;
- Область данных - определяет основную часть формы, содержащую поля, полученные из источника данных;
- Нижний колонтитул - раздел отображается только в режиме предварительного просмотра в нижней части экранной страницы и обычно содержит номер страницы, дату и т.д.;
- Примечание формы – отображается внизу последней экранной страницы формы.
Форма может содержать все разделы или некоторые из них.
Как и любой объект базы данных, форма имеет свойства. Значение этих свойств для всей формы, ее разделов или элементов управления задаются в окнах свойств, соответствующих объектов. Для отображения на экране окна свойств нужно нажать кнопку Свойства на панели инструментов Конструктор форм.
Окно свойств выделенного объекта содержит следующие вкладки :
Макет – с помощью этих свойств задается макет формы;
Данные - с помощью этих свойств задается источник данных;
События – содержит перечень свойств, связанных с объектом;
Другие – тип окна, в котором открываются форма или сообщение.
Все – перечень всех свойств.
Основные свойства формы:
Подпись – позволяет задать название формы, которое будет выводиться в области заголовка;
Режим по умолчанию – определяет режим открытия формы (простая, ленточная, табличная формы);
Допустимые режимы – свойство, которое определяет можно ли с помощью команд меню Вид переходить из режима формы в режим конструктора;
Свойства полосы прокрутки, область выделения, кнопки перехода, разделительные линии, кнопка оконного меню, размеров окна, кнопка закрытия, кнопка контекстной справки, тип границы – определяют, будут ли выводиться эти элементы в окно формы;
Свойства разрешить добавления, разрешить удаления, разрешить изменения - определяют, можно ли пользователю редактировать данные через форму. Эти свойства могут принимать значения Да/Нет;
Ввод данных - определяет режим открытия формы и принимает значения Да/Нет. Режим Да – открытие формы только для добавления новых записей. Режим Нет – просмотр существующих записей и добавление новых;
Блокировка записей – определяет способы блокировки записей в режиме многопользовательской работы с базой данных.
Для создания форм в Access используются следующие способы:
Пиктограмма Форма – при помощи которой можно создать форму одним щелчком мыши. Используя этого средство, все поля базового источника данных размещаются в форме. Можно сразу же начать работу с новой формы либо при необходимости изменить ее в режиме макета или конструктора;
Пиктограмма Разделенная форма - это новая возможность в Microsoft Office Access 2007, позволяющая одновременно отображать данные в двух представлениях - в режиме формы и в режиме таблицы. Эти два представления связаны с одним и тем же источником данных и всегда синхронизированы друг с другом. При выделении поля в одной части формы выделяется то же поле в другой части. Данные можно добавлять, изменять или удалять в каждой части формы (при условии, что источник записей допускает обновление, а параметры формы не запрещают такие действия);
Пиктограмма Пустая форма - позволяет создать пустую форму, если мастер или инструменты для создания форм не подходят. Таким образом, можно очень быстро построить форму, особенно если в ней будет лишь несколько полей;
Пиктограмма Несколько элементов - позволяет создать форму в которой записи отражаются в виде таблицы, при чем каждая запись занимает отдельную строку;
Мастер форм – программное средство, которое позволяет создавать структуру одного из трех стандартных типов формы в режиме диалога с разработчиком формы. При этом в форму вставляются выбранные пользователем поля из источника данных;
Конструктор форм – позволяет конструировать форму пользователем в окне конструктора форм.
Самым удобным способом создания новой формы является следующая технология: форма создается с использованием мастером форм, а затем дорабатывается в режиме конструктора или макета.
Источником данных формы являются одна или несколько связанных таблиц и/или запросов.
Элементом управления называют любой объект формы или отчета, который служит для вывода данных на экран, оформления или выполнения макрокоманд. Элементы управления могут быть связанными, вычисляемыми или свободными.
Связанный (присоединенный) элемент управления присоединен к полю базовой таблицы или запроса. При вводе значения в связанный элемент управления поле таблицы текущей записи автоматически обновляется. Поле таблицы является источником данных связанного элемента управления.
Одним из вариантов обработки формы может быть пересылка данных по электронной почте:
action="mailto:Aдpec@cepвep.домен"
С помощью атрибута method можно задать протокол для пересылки данных на сервер. Протокол GET используется по умолчанию, но в большинстве случаев он не удовлетворяет разработчиков, поэтому чаще используется протокол POST.
Атрибут enctype позволяет указать способ кодирования содержимого формы.
Форму заполняют разные пользователи, поэтому для нее предусмотрен атрибут, который позволяет определить список допустимых кодировок:
accept-charset="список кодировок"
Можно также определить список допустимых типов данных:
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):