Формы в HTML. Элементы формы
В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.
Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода . Эти виды взаимодействия включают в себя:
- регистрацию и вход на сайтах;
- ввод личной информации (имя, адрес, данные кредитной карты и др.);
- фильтрацию контента (с помощью выпадающих списков, флажков и др.);
- выполнение поиска;
- загрузку файлов.
Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:
- текстовые поля (для одной или нескольких строк);
- переключатели;
- флажки;
- выпадающие списки;
- виджеты для загрузки;
- кнопки отправки.
Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :
Элемент
Одним из вариантов обработки формы может быть пересылка данных по электронной почте:
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):
<Р>Строка для ввода критерия поиска
Этот элемент является контейнером для других элементов формы. Например можно объединить надпись и поле ввода:
Если элемент LABEL и другой элемент находятся отдельно, используется атрибут for, значение которого должно совпадать со значением атрибута id соответствующего элемента:
Для каждого элемента LABEL создается один элемент формы. Иногда элементы удобно распределить по ячейкам таблицы, обеспечив тем самым выравнивание данных в форме.
Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, атрибуты событий.
Форма государства - это структурный, территориальный и политический способ организации деятельности государства, который включает в себя форму правления, форму государственного устройства и форму государственно-политического режима.
Статья 1 Конституции РФ.
1. Российская Федерация - Россия есть демократическое федеративное правовое государство с республиканской формой правления.
2. Наименования Российская Федерация и Россия равнозначны.
Раскройте понятие, перечислите и опишите виды форм правления.
Форма правления - это способ организации верховной государственной власти и порядок ее образования.
1. Монархия - форма правления, при которой верховная государственная власть принадлежит одному лицу (монарху) и передается, как правило, по наследству.
· древневосточная (первая в истории человечества форма правления); древнеримская (Римская империя);
· феодальная (включает в себя: раннефеодальную, сословно-представительную и абсолютную монархии);
· конституционная, включающая в себя парламентарную и дуалистическую монархии.
2. Республика - форма правления, при которой власть принадлежит органам государственной власти, избираемой населением на определенный срок.
В зависимости от того, кто формирует правительство, кому оно подотчетно и подконтрольно, в литературе различают парламентские, президентские и смешанные республики.
Раскройте понятие и охарактеризуйте виды форм государственного устройства.
Форма государственного устройства - это внутреннее строение государства, способ его административно-территориального деления, обуславливающий определенные взаимоотношения органов всего государства с органами его составных частей.
1. Унитарное государство - это такое единое государственное образование, на территории которого действуют единые высшие органы государственной власти и управления, вооруженные силы, конституция, единое законодательство, судебная система и единое гражданство. Могут быть - централизованными, децентрализованными, национальными (Эстония, Япония) и многонациональными (Китай, Афганистан).
2. Федеративное государство - это такое государство, которое состоит из ряда государств или государственных образований, на территории которого действуют федеральные и республиканские (субъектов федерации) органы власти. Выделяют два вида федерации: административные (США, Мексика) и национальные (Югославия).
3. Конфедерация - это временный союз суверенных государств, который образуется для совместного решения политических, экономических или военных задач, не имеющий, как правило, единых органов власти и управления, единого бюджета и гражданства. Разновидностями конфедерации являются межгосударственные союзы, содружества и сообщества государств. Вместе с тем следует отличать конфедерации от коалиций, которые представляют собой временные политические или военные союзы двух и более государств, созданных для наступательных и оборонительных целей при наличии общего противника.
Раскройте понятие политического режима. Перечислите виды политических режимов, опишите их признаки.
Государственно-политический режим - это элемент формы государства, характеризующий совокупность приемов, методов, способов и средств осуществления государственной власти.
1. Демократический.
Признаки:
· господство закона;
· разделение властей;
· наличие у граждан реальных политических и социальных прав и свобод и их юридическая защищенность и гарантированность;
· выборность и сменяемость центральных и местных органов государственной власти, их подотчетность перед избирателями, гласность;
· наличие свободно формируемых политических партий;
· существование оппозиции, плюрализм и др.
2. Антидемократический (тоталитарный, авторитарный, фашистский и др.).
Признаки:
· господство беззакония и террора;
· отсутствие политического плюрализма;
· запрещение деятельности оппозиционных партий;
· отсутствие демократических прав и свобод граждан;
· отсутствие демократических выборов при формировании органов власти и др.
Раскройте понятие и опишите структуру политической системы общества.
Политическая система - это упорядоченная на основе права и иных социальных норм совокупность институтов (государственных органов, политических партий, движений, общественных организаций и т.п.) в рамках которой проходит политическая жизнь общества и осуществляется политическая власть (А.В. Малько).
Таким образом, политическая система общества представляет собой отражение политической жизни общества в целом.
Выделяют 5 структурных элементов политической системы:
1. Институционный (организационный) элемент является основным в политической системе, т.к. придает системе устойчивость, формирует ее нормативную основу и другие средства воздействия на общество. В данный элемент входят государственные органы, общественные объединения (организации, фонды, органы самодеятельности и т.п.) политические партии как специфический субъект и др.
2. Нормативный элемент включает в себя нормативные основы деятельности политической системы (политические нормы, содержащиеся в Уставах политических партий, нормы права, содержащиеся в Конституции, Федеральном законе «Об общественных объединениях» и др., политические обычаи и традиции (например, открытие первой сессии парламента старейшим депутатом);
3. Функциональный элемент раскрывает содержание конкретных действий и функционирования на практике данного элемента политической системы (например, политические действия - проведение митингов, шествий, демонстраций, пикетирования и др.; политические процессы - процесс формирования парламента, Правительства, общественного мнения и др.; акты реализации функций, присущих структурным элементам политической системы - фактическое выдвижение кандидата в выборные государственные органы).
4. Идеологический элемент включает в себя теории, представления, понятие об обществе и путях его развития, политическое сознание в обществе и др.
5. Коммуникативный элемент включает в себя все виды средств массовой информации и представляет собой те каналы, по которым до общества доводится информация о деятельности различных компонентов политической системы и решениях, принимаемых теми или иными органами.
При этом следует отметить, что указанные выше элементы политической системы рассматриваются в их единстве и взаимосвязи.
Существует и иная классификация структурных элементов политической системы, которая включает в себя следующие компоненты:
· политическая организация общества, включающая в себя государство, политические партии и движения, общественные организации, трудовые коллективы и т.п.;
· политическое сознание, характеризующее психологические и идеологические стороны политической власти и политической системы;
· социально-политические и правовые нормы, регулирующие политическую жизнь общества и процесс осуществления политической власти;
· политические отношения, складывающиеся между элементами системы по поводу политической власти;
· политическая практика, состоящая из политической деятельности и совокупного политического опыта.
Раскройте понятие и перечислите признаки государственной власти. Назовите отличия государственной власти от иных видов социальной власти.
Государственная власть - способность государства, его структур с помощью легитимных средств подчинять поведение отдельных индивидов, групп людей или всего общества общей (государственной) воле.
Признаки государственной власти:
· публичный характер;
· суверенитет;
· легитимность;
· легальность;
· единство;
· разделение властей;
· законность и др.
Отличие государственной власти от других ее видов - в наличии группы людей , которые властвуют, в чьих руках находится аппарат проведения в жизнь государственной воли.
Одним из важнейших свойств web-документов является возможность получения данных от клиентов и отправки их на сервер . Эта возможность обеспечивается с помощью так назваемых ФОРМ (FORMS ).
Таким образом,
Как выглядят HTML-формы?
Вот один из простейших примеров:
Анкета кандидата в члены EMICSЗвездочкой (* ) отмечены обязательные поля |
||
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
является обязательным (если, конечно, отправка данных на сервер предусмотрена), но не единственным атрибутом формы. О других атрибутах мы поговорим чуть позднее, а пока остановимся на основных элементах форм.
Элементы форм
Все элементы форм создаются тэгами, имеющими начало: , где значения атрибута 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
. Код ее выглядит следующим образом:
|