Элементы формы. Определение элементов формы. Общие атрибуты тегов

• Текстовое поле (text field):

(Мы только что видели их в нашем примере)

Текстовое поле определяет код:

Здесь

• name - имя поля (впоследствии мы узнаем, как к элементам форм можно обращаться просто по имени);
• value - то, что будет записано в текстовое поле "по умолчанию", как только документ появится в окне браузера;
• align - этот атрибут "отвечает" за расположение текстового поля; он не является специфическим для элементов форм и (как и в других тэгах) может принимать значения: left , right , center ;
• size - длина поля в символах;
• maxlength - максимальное число символов, которое можно ввести в поле. Если этот атрибут не указывать, ограничений на ввод не будет.

Значением текстового поля должен быть только текст. Если, к примеру, поместить в него html-код, он будет отображаться как текст (а не так, как он выглядел бы в окне браузера). Но вот , выполненный Сергеем Бурылиным. Как ему это удалось - попробуйте разобраться сами.

• Текстовая область (text area):

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

Код текстовой области выглядит следующим образом:

Здесь атрибут "wrap" указывает на способ разрыва строки: если присвоить ему значение off , вводимый текст будет "уходить" за пределы области , в противном случае (on , soft или даже просто wrap без присвоения) текст автоматически переносится на новую строку.

• Список:

Списки позволяют сделать единственный или множественный выбор из набора предлагаемых опций (options ).

Структрура HTML-кода, определяющего список, такова:

Коды списков, приведенных нами в качестве примеров, имеют вид:

• "Флажок" (Checkbox)

"Единичный" флажок создается с помощью кода:

Атрибут checked указывает на то, что "флажок" по умолчанию будет отмеченным.

Часто используется сразу несколько "флажков", например:

• "Радиокнопка" (Radiobutton)

"Единичная" радиокнопка создается с помощью кода:

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

Часто используется сразу несколько радиокнопок, например:

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

Работа с формами может происходить в четырех режимах: в режиме Формы, в режиме Таблицы, в режиме Макета, в режиме Конструктора. Выбрать режим работы можно при помощи пиктограммы Режим группы Режимы вкладки ГЛАВНАЯ.

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

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

В режиме Макета можно изменять свойства полей, определять формат полей, изменить макет формы целиком, а также выполнить условное форматирование полей.

Виды форм.

В Access можно создать формы следующих видов:

Форма в столбец или полноэкранная форма;

Ленточная форма;

Табличная форма;

Форма главная / подчиненная;

Сводная таблица;

Форма – диаграмма или сводная диаграмма.

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

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

Табличная форма отображает данные в режиме таблицы.

Форма главная/подчиненная представляет собой совокуп­ность формы в столбец и табличной. Ее имеет смысл создавать при работе со связанными таблицами, в которых установлена связь типа «один-ко-многим».

Форма Сводная таблица выполняется мастером создания сводных таблиц Excel на основе таблиц и запросов Access (мастер сводных таблиц является объектом, внедренным в Access , чтобы использовать его в Access необходимо установить Excel ). Сводная таблица представляет собой перекрестную таблицу данных, в которой итоговые данные располагаются на пересечении строк и столбцов с текущими значениями параметров.

Форма с диаграммой. В Access в форму можно вставить диаграмму, созданную Microsoft Graph . Graph является внедряемым OLE приложением и может быть запущен из Access . С внедренной диаграммой можно работать так же, как и с любым объектом OLE .

Структуры формы.

Любая форма может включать следующие разделы:

- Заголовок формы – определяет верхнюю часть формы и может содержать текст, графику и другие элементы управления;

- Верхний колонтитул – раздел отображается только в режиме предварительного просмотра и обычно содержит заголовки столбцов;

- Область данных - определяет основную часть формы, содержащую поля, полученные из источника данных;

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

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

Форма может содержать все разделы или некоторые из них.

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

Окно свойств выделенного объекта содержит следующие вкладки :

Макет – с помощью этих свойств задается макет формы;

Данные - с помощью этих свойств задается источник данных;

События – содержит перечень свойств, связанных с объектом;

Другие – тип окна, в котором открываются форма или сообщение.

Все – перечень всех свойств.

Основные свойства формы:

Подпись – позволяет задать название формы, которое будет выводиться в области заголовка;

Режим по умолчанию – определяет режим открытия формы (простая, ленточная, табличная формы);

Допустимые режимы – свойство, которое определяет можно ли с помощью команд меню Вид переходить из режима формы в режим конструктора;

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

Свойства разрешить добавления, разрешить удаления, разрешить изменения - определяют, можно ли пользователю редактировать данные через форму. Эти свойства могут принимать значения Да/Нет;

Ввод данных - определяет режим открытия формы и принимает значения Да/Нет. Режим Да – открытие формы только для добавления новых записей. Режим Нет – просмотр существующих записей и добавление новых;

Блокировка записей – определяет способы блокировки записей в режиме многопользовательской работы с базой данных.

Для создания форм в Access используются следующие способы:

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

Пиктограмма Разделенная форма - это новая возможность в Microsoft Office Access 2007, позволяющая одновременно отображать данные в двух представлениях - в режиме формы и в режиме таблицы. Эти два представления связаны с одним и тем же источником данных и всегда синхронизированы друг с другом. При выделении поля в одной части формы выделяется то же поле в другой части. Данные можно добавлять, изменять или удалять в каждой части формы (при условии, что источник записей допускает обновление, а параметры формы не запрещают такие действия);

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

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

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

Конструктор форм – позволяет конструировать форму пользователем в окне конструктора форм.

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

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

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

Связанный (присоединенный) элемент управления присоединен к полю базовой таблицы или запроса. При вводе значения в связанный элемент управления поле таблицы текущей записи автоматически обновляется. Поле таблицы является источником данных связанного элемента управления.

Элементы формы HTML – это элементарные объекты, из которых мы создаем графический интерфейс пользователя программы на JavaScript.

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

И наконец, четвертый столбец таблицы предоставляет краткое описание каждого элемента и наиболее важный или наиболее часто применяемый обработчик события для этого типа элемента.

Подробно различные типы элементов описаны в части IV «Справочник по клиентскому Java-
Script». Хотя для каждого типа элементов формы имеется отдельная справочная страница, обратите внимание, что большинство элементов создаются с помощью тега HTML и на самом деле все являются объектами Input. На странице «Input» «Справочника по клиентскому JavaScript» перечислены возможности, общие для всех этих элементов, а страницы части IV, относящиеся к отдельным типам, содержат специфические сведения о работе с конкретным типом элементов формы.

Обратите внимание, что имена «Button», «Checkbox» и т. д. из первого столбца таблицы могут не соответствовать реальным объектам в клиентской реализации JavaScript и что стандарт DOM не определяет какие-либо интерфейсы с этими именами. Тем не менее каждый из типов элементов формы имеет свой особенный внешний вид и поведение, и полезно, по крайней мере в «Справочнике по клиентскому JavaScript», рассматривать их как отдельные типы. В «Справочнике по W3C DOM» (часть V) вы найдете материал о формах и их элементах в разделах «HTMLFormElement», «HTMLInputElement », «HTMLTextAreaElement», «HTMLSelectElement» и «HTMLOptionElement ».Теперь, взглянув на различные типы элементов формы и теги HTML, применяемые для их создания, посмотрим на код HTML из примера 15.1, использованный для создания формы. Хотя большую часть примера занимает HTML, в нем также содержится код Java-Script, в котором определены обработчики событий каждого из элементов формы. Вы заметите, что обработчики событий не определяются как атрибуты HTML. Здесь ими являются функции JavaScript, присваиваемые свойствам объектов из массива elements формы. Все обработчики событий вызывают функцию report(), содержащую код, который работает с разными элементами формы.

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

Пример 15.1. Форма HTML, содержащая все виды элементов

Она вызывается из различных обработчиков.
function report(element, event) {
var elmtname = element.name;
if ((element.type == "select-one") || (element.type == "select-multiple")){
value = " ";
for(var i = 0; i value += element.options[i].value + " ";
}
else if (element.type == "textarea") value = "...";
else value = element.value;
var msg = event + ": " + elmtname + " (" + value + ")\n";
var t = element.form.textarea;
t.value = t.value + msg;
}
// Эта функция добавляет к каждому элементу в форме набор обработчиков событий.
// Она не проверяет, поддерживается ли в этом элементе данный обработчик,
// добавляются все обработчики событий. Обратите внимание, что обработчики событий
// вызывают приведенную выше функцию report(). Заметьте, что мы определяем
// обработчики событий, присваивая функцию свойствам объектов JavaScript, а не
// присваивая строки атрибутам HTML-элементов.
function addhandlers(f) {
// Цикл по всем элементам формы
for(var i = 0; i var e = f.elements[i];
e.onclick = function() { report(this, "Click"); }
e.onchange = function() { report(this, "Change"); }
e.onfocus = function() { report(this, "Focus"); }
e.onblur = function() { report(this, "Blur"); }
e.onselect = function() { report(this, "Select"); }
}
// Определяем несколько особых обработчиков событий для трех кнопок:
f.clearbutton.onclick = function() {
this.form.textarea.value=""; report(this,"Click");
}
f.submitbutton.onclick = function () {
report(this, "Click"); return false;
}
f.resetbutton.onclick = function() {
this.form.reset(); report(this, "Click"); return false;
}
}
// И наконец, активизируем нашу форму, добавляя все возможные
// обработчики событий!
addhandlers(document.everything);

Представляет собой одностроковое текстовое поле (рис. 1), физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность - с помощью атрибута VALUE.

Рис. 1. Элемент формы TEXT

Примером использования данного элемента в коде HTML может служить следующая строка:

TYPE="PASSWORD"

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

Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» - «не отмечено» (рис. 2).

Рис. 2. Элемент формы CHECKBOX

Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента-состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.

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

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

Рис. 3. Элемент формы RADIO

Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME.

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

<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст

Отображает обыкновенную кнопку (рис. 4), нажатие на которую приводит к какому-либо действию сервера.

Рис. 4. Элемент формы BUTTON

С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.

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

TYPE="SUBMIT"

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

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

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

TYPE="FILE"

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

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

TYPE="IMAGE"

Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка «не вписывается» в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге (см. урок 5), в том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.

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

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

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

Однако с помощью тега можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество символов, используется самостоятельный тег , формирующий на экране одноименный элемент формы (рис. 5).</p> <p><img src='https://i0.wp.com/studepedia.org/img/baza1/1408111755156097.files/image033.jpg' height="41" width="185" loading=lazy></p> <p>Рис. 5. Элемент <a href="/settings/formy-v-html-html-teg-textarea-mnogostrochnyi-tekst-atributy-formy---teg.html">формы TEXTAREA</a></p> <p>Синтаксис записи <a href="/settings/mnogostrochnyi-tekst-vvod-dannyh-polya-formy---teg-atributy-formy--.html">данного тега</a> выглядит следующим образом:</p> <p><TEXTAREA МАМЕ="имя элемента" ROWS-""целое число" СOLS="целое число"></p> <p>Текст, выводимый в текстовом поле по умолчанию

С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.

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

</p> <p>Введите сюда текст сообщения</p> <p>

Для создания меню выбора в форме (рис. 6) web-мастер может воспользоваться тегом .

Рис. 6. Элемент формы SELECT

Синтаксис записи данного тега в общем виде выглядит так:

Пункт 1

Пункт 2

Пункт 3

OPTION VALUE="Пункт N">Пункт N

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

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

<Р АLIGN ="CENTER">Пожалуйста, укажите ваш город

OPTION VALUE="a">Санкт-Петербург

OPTION VALUE="b">Mocква

Екатеринбург

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .

До появления HTML5 веб-формы представляли собой набор нескольких элементов

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

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

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

1. Элемент

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

2. Группировка элементов формы

Элемент

Каждой группе элементов можно присвоить название с помощью элемента

, который идет сразу за тегом

. Название группы проявляется слева в верхней границе

. Например, если в элементе

хранится контактная информация:

Контактная информация

Имя *

E-mail

Рис. 2. Группировка элементов формы с помощью

Таблица 2. Атрибуты тега

Атрибут	Значение / описание
disabled	Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form	в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name	Определяет имя , которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .

3. Создание полей формы

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

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .

Таблица 3. Атрибуты тега

Атрибут	Значение / описание
accept	Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc" audio/* — разрешает загрузку аудиофайлов video/* — разрешает загрузку видеофайлов image/* — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов.
alt	Определяет альтернативный текст для изображений, указывается только для .
autocomplete	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: on — означает, что поле не защищено, и его значение можно сохранять и извлекать, off — отключает автозаполнение для полей форм.
autofocus	Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked	Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form	Значение атрибута должно быть равно атрибуту id элемента в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
formaction	Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype	Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты: application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX) multipart/form-data — символы не кодируются text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod	Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты: get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение post — данные формы отправляются в виде http-запроса.
formnovalidate	Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget	Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы. _parent – загружает ответ в родительский фрейм _top – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем.
height	Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, . Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
list	Является ссылкой на элемент
max	Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength	Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min	Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple	Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name	Определяет имя, которое будет использоваться для доступа к элементу , к примеру, в таблицах стилей css. Является аналогом атрибута id .
pattern	Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder	Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly	Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required	Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size	Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src	Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля .
step	Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type	button — создает кнопку.
	checkbox — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
	color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
	date — позволяет вводить дату в формате дд.мм.гггг. День рождения:
	datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм. День рождения — день и время:
	email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail:
	file — позволяет загружать файлы с компьютера пользователя. Выберите файл:
	hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
	image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
	month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
	number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5):
	password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль:
	radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец:
	range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
	reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
	search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск:
	submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
	text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
	time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время:
	url — поле предназначено для указания URL-адресов. Главная страница:
	week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю:
value	Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width	Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты тега <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> autofocus </td> <td>Устанавливает фокус на нужном начальном текстовом поле автоматически. </td> </tr><tr><td> cols </td> <td>Устанавливает ширину через количество символов. Если пользователь вводит <a href="/services/primery-populyarnyh-napravlenii-veb-dizaina-bolshie-razmery-bukv-v-tekstah.html">больше текста</a>, появляется полоса прокрутки. </td> </tr><tr><td> disabled </td> <td>Отключает возможность редактирования и копирования содержимого поля. </td> </tr><tr><td> form </td> <td>Значение атрибута должно быть равно значению атрибута id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле. </td> </tr><tr><td> maxlength </td> <td>Значение атрибута задает максимальное число символов для ввода в поле. </td> </tr><tr><td> name </td> <td>Задает имя текстового поля. </td> </tr><tr><td> placeholder </td> <td>Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение. </td> </tr><tr><td> readonly </td> <td>Отключает возможность редактирования содержимого поля. </td> </tr><tr><td> required </td> <td>Выводит сообщение о том, что данное поле является обязательным для заполнения. </td> </tr><tr><td> rows </td> <td>Указывает число, которое означает, сколько строк должно отображаться в текстовой области. </td> </tr><tr><td> wrap </td> <td>Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard , то должно указываться значение <a href="/internet/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html.html">атрибута cols</a> . </td> </tr></table><h3>5. Раскрывающийся список</h3> <p>Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select> . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.</p> <p>Для добавления в список пунктов используются элементы <option>...</option> , которые располагаются внутри <select> .</p> <p>Для систематизации списков применяется элемент <optgroup>...</optgroup> , который создает заголовки в списках.</p> <p>Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.</p> <table class="t3"> Таблица 5. Атрибуты тега <select> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> autofocus </td> <td>Устанавливает автоматический фокус на элементе при загрузке страницы. </td> </tr><tr><td> disabled </td> <td>Отключает раскрывающийся список. </td> </tr><tr><td> form </td> <td>Определяет форму, которой принадлежит <a href="/phone/chernyi-spisok-vk-chto-daet-instrukciya-kak-dobavit-v-chernyi-spisok-v.html">данный список</a>. В качестве значения атрибута указывается идентификатор формы. </td> </tr><tr><td> multiple </td> <td>Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой <a href="/internet/komanda-sootvetstvuyushchaya-klaviaturnoi-kombinacii-ctrl-f.html">клавишу Ctrl</a> . </td> </tr><tr><td> name </td> <td>Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка. </td> </tr><tr><td> required </td> <td>Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы. </td> </tr><tr><td> size </td> <td>Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом. </td> </tr></table><h3>6. Надписи к полям формы</h3> <p>Надписи к элементам формы создаются с помощью элемента <label>...</label> . Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <!-- с указанием атрибута for --> <label for="comments">Когда вы <a href="/services/besplatnyi-optimizator-kompyutera-comodo-system-utilities-opisanie-kogda-vy.html">последний раз</a> летали на самолете?</label> <textarea id="comments">

Кошка

7. Кнопки

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

Для корректного отображения элемента

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

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

Таблица 9. Атрибуты тега

Атрибут	Значение / описание
autofocus	Устанавливает фокус на кнопке при загрузке страницы.
disabled	Отключает кнопку, делая ее некликабельной.
form	Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction	Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype	Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения: application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы. multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod	Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения: get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate	Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget	Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента . _blank — загружает ответ в новое окно/вкладку _self — загружает ответ в то же окно (значение по умолчанию) _parent — загружает ответ в родительский фрейм _top — загружает ответ во весь экран framename — загружает ответ во фрейм с указанным именем.
name	Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type	Определяет тип кнопки. Возможные значения: button — кликабельная кнопка reset — кнопка сброса, возвращает первоначальное значение submit — кнопка для отправки данных формы.
value	Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

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

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