---

Разделы На главную Работа менеджера Команда менеджера Обучение менеджера Полномочия менеджера Стиль менеджера Эффективность менеджера Софт для менеджера Менеджер - софт

---

Формы по шагам

ACTION

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер (пример2.1). В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.
Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Блокированные поля

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

Текстовое поле	Многострочное текстовое поле
	Не печалься, друг мой нежный, будет нам еще с тобой.
Кнопка	Флажки
Список	Переключатели
Пиво Кофе Чай

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

Цвет фона многострочного текста

Аналогично, цвет фона меняется и у многострочного текста (тег ). <textarea style="background: цвет">...
В примере 19.2 показан способ изменения цвета текста и фона поля.

Цвет фона списка

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

Цвет группы в списке

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




Пункт 1.1

Пункт 1.1





Пункт 2.1

Пункт 2.1




В примере 19.4 показан один из способов изменения цвета группы списка.

Цвет отдельных пунктов списка

Для выделения цветом желаемых пунктов меню стилевое свойство background следует установить для тега .


Название пункта


В примере 19.5 показано создание списка из трех разноцветных пунктов, цвет для которых установлен через стилевые классы.

Цвет списка

Вначале рассмотрим, как изменить цвет всего списка целиком. Синтаксис следующий.


Пункт 1

Пункт 2

Пункт 3


В примере 19.3 показано, как установить цвет фона и текста списка.

ENCTYPE

Устанавливает тип данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (), следует определить параметр enctype как multipart/form-data (пример2.3). Допускается также устанавливать сразу несколько значений, разделяя их запятыми.

GET

Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары "имя=значение" присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в "Избранное" браузера, а также менять значения параметров прямо в адресной строке.

Горячие клавиши

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

Группирование элементов списка

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

Закуска Барская

Раки, фаршированные по-царски

Биточки в горшочке





Галушки славянские

Пампушки украинские

Жаркое по-харьковски

Результат данного примера показан ниже.
Закуска Барская
Раки, фаршированные по-царски
Биточки в горшочке
Галушки славянские Пампушки украинские Жаркое по-харьковски
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Использование глобальных переменных

Каждому элементу формы, у которого есть уникальное имя, заданное параметром name, сопоставлена переменная с тем же именем (со знаком доллара впереди). Так, в примере 20.1 показано создание формы с текстовым полем username. Поскольку для тега

не указан параметр action, данные формы будут отправлены на эту же самую страницу. Код PHP проверяет, установлено ли какое-либо значение у переменной $username и если да, то выводит его в окне браузера.

Кнопка RESET

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


Надпись на кнопке
В примере 7.4 показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».

Кнопка SUBMIT

Для отправки данных на сервер предназначена специальная кнопка SUBMIT. Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.
Синтаксис создания кнопки SUBMIT зависит от используемого тега или .


Надпись на кнопке
Параметры такие же, что и у обычных кнопок (пример7.3).

Массивы $_GET и $_POST

Существуют аналогичные массивы для хранения данных переданных через метод GET или POST — соответственно, $_GET и $_POST. Они имеют более короткую форму записи и скорее по этой причине применяются довольно часто. Принцип работы с этими массивами достаточно прост. Если в форме используется метод GET, то для получения значения элемента формы достаточно указать $_GET["имя поля"], где имя определяется параметром name.
В примере 20.3 показано использование массива $_POST для получения данных формы.

Массивы $HTTP_GET_VARS и $HTTP_POST_VARS

Для доступа к данным формы, переданной через метод GET или POST, используются специальные массивы, соответственно, $HTTP_GET_VARS и $HTTP_POST_VARS. Например, имя поля формы, заданное параметром name, называется lorana, тогда для получения значения этого поля используется запись $HTTP_GET_VARS["lorana"]. Это будет в том случае, если параметр method тега равен значению GET или вообще отсутствует, поскольку по умолчанию значение атрибута method равно GET. Аналогично обстоит дело и с методом POST.
В примере 20.2 показано, как получать данные формы и выводить их в окне браузера.

METHOD

Метод сообщает серверу о цели запроса. Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

MULTIPLE

Наличие параметра multiple сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.

Чебурашка Крокодил Гена Шапокляк Крыса Лариса		Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Параметр size отсутствует	Параметр size равен 1

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

NAME

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

NAME

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

Параметры тега

Тег также имеет параметры, влияющие на вид списка, они представлены далее.

Параметры тега Рассмотрим параметры тега , с помощью которых можно изменять вид и представление списка.

Поля только для чтения

Поля формы можно не только блокировать, но и делать их только для чтения. В этом случае доступ к ним сохраняется, но изменять значения, заданные по умолчанию, нельзя. Разумеется, речь идет только о текстовых полях, где требуется вводить текст. Выделять и копировать его можно, но изменить не получится.
Для установки режима «только для чтения» используется параметр readonly, он добавляется к тегу или . На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся. Атрибут readonly на другие элементы формы не действует.<br> Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».<br> Обычное текстовое поле<br> Поле только для чтения<br> В примере 17.2 показано создание поля для чтения.<br><br> <h1>POST</h1> Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д. (пример2.4).<br><br> <h1>Добавление формы в документ</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br> <form name="form1"><br><br> Здесь размещаются элементы формы<br> <input type="submit"><br><br> </form> <br> <form name="form2"><br><br> Здесь размещаются элементы формы<br> <input type="submit"><br><br> </form> <br> </body><br><br> </html><br> В данном примере показано добавление двух разных форм. При нажатии на кнопку SUBMIT данные текущей формы отправляются на сервер, а остальные формы на веб-странице никак не будут обработаны.<br>Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Список множественного выбора</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form action="handler.php"><br><br> <select name="select" size="3" multiple><br><br> <option selected value="s1">Чебурашка</option><br><br> <option value="s2">Крокодил Гена</option><br><br> <option value="s3">Шапокляк</option><br><br> <option value="s4">Крыса Лариса</option><br><br> </select><br><br> <input type="submit" value="Отправить"> <br><br> </form><br><br> </body><br><br> </html><br><br> <h1>Использование списка</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form action="handler.php"><br><br> <b>Выбери персонажа</b><br><br> <select name="hero"><br><br> <option value="s1">Чебурашка</option><br><br> <option value="s2" selected>Крокодил Гена</option><br><br> <option value="s3">Шапокляк</option><br><br> <option value="s3">Крыса Лариса</option><br><br> </select> <br><br> <input type="submit" value="Отправить"><br><br> </form><br><br> </body><br><br> </html><br> В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.<br><b>Выбери персонажа</b><br><br> Чебурашка<br> Крокодил Гена<br> Шапокляк<br> Крыса Лариса<br><br> <h1>Использование скрытого поля</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form action="handler.php" method="POST"><br><br> <b>Напишите любимое слово (никакие данные не будут передаваться на сервер!):</b><br><br> <input type="text" size="25" name="word"><br><br> <input type="hidden" name=UserName value="Vasya"><br><br> <input type="hidden" name="password" value="pupkin"><br><br> <input type="submit" value="Отправить"><br><br> </form> <br><br> </body><br><br> </html><br> В данном примере показано создание двух скрытых полей, одно из них носит имя UserName и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в параметре action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.<br> Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Кнопка с изображением</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form action="handler.php"><br><br> <b>Введите ваше имя:</b><br><br> <input type="text" size="35"><br><br> <input type="image" src="/images/imgbutton.gif" width="91" height="25" align="middle" alt="Отправить форму на сервер"><br><br> </form> <br><br> </body><br><br> </html><br> Результат данного примера показан ниже.<br> <b>Введите ваше имя:</b><br><br> Перед использованием указанного поля требуется подготовить изображение в графическом редакторе. <br> Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Создание поля для отправки файла</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form enctype="multipart/form-data" method="POST"><br><br> <b>Укажите файл для отправки на сервер:</b><br><br> <input type="file" size="30"><br><br> <input type="submit" value="Отправить"><br><br> </form> <br><br> </body><br><br> </html><br> Результат данного примера показан ниже.<br><b>Укажите файл для отправки на сервер:</b><br><br> Параметр формы enctype="multipart/form-data" нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу. <br> Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью метода POST, как показано в примере.<br> Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Использование параметра tabindex</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <head> <link rel="canonical" href="https://www.e-lave.ru//index.htm"/><br><br> <br><br> </head><br> <body><br><br> <form name="bio" method="POST" action="handler.php"><br><br> <table width="100%" cellspacing="0" cellpadding="4"><br><br> <tr valign="top"> <br><br> <td width="50%">Ваше имя:<br> <input name="name" type="text" tabindex="1" size="30"> <br><br> </td><br><br> <td>Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30"> <br><br> </td><br><br> </tr><br><br> <tr valign="top"><br><br> <td>Телефон:<br><br> <input name="tel" type="text" tabindex="2" size="30"> </td><br><br> <td>Пол:<br><br> <select name="gender" tabindex="4"><br><br> <option selected>Мужской</option><br><br> <option>Женский</option><br><br> <option>Гермафродит</option><br><br> </select></td><br><br> </tr><br><br> </table><br><br> </form><br><br> </body><br><br> </html><br><br> Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.<br> <table border=1><br> <tr> <td>Ваше имя:<br> </td> <td>Фамилия:<br> </td> </tr> <tr> <td>Телефон:<br><br> <td> <td>Пол:<br><br> Мужской<br> Женский<br> Гермафродит<br> <td> </tr> </table><br> Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Синтаксис тега <LABEL></h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br> <form><br><br> <input type="radio" name="psi" id="radio1"><label for="radio1">Импритинг</label><br><br> <input type="radio" name="psi" id="radio2"><label for="radio2">Реимпритинг</label><br><br> </form><br> </body><br><br> </html><br> Результат данного примера показан ниже.<br>Импритинг<br> Реимпритинг<br> Обязательно требуется, чтобы имя идентификатора (id) и значение параметра for совпадали. Именно в этом случае и осуществляется связь между текстом и элементом формы. Причем, не имеет значение, насколько близко они располагаются между собой на веб-странице. При нажатии на текст в окне браузера происходит переход к элементу формы. Исключением является браузер Opera, который игнорирует эту особенность, и переход при активизации текста не реализовывает.<br> Чтобы понять, в чем же удобство применения тега <LABEL>, рассмотрим пример, где в форму добавлены два флажка. Описание к одному флажку будет задано как обычный текст, а ко второму — с использованием <LABEL> (пример 15.2).<br><br> <h1>Использование тега <LABEL></h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br> <form><br><br> <input type="checkbox" id="t1"> Поставьте галочку<br><br> <input type="checkbox" id="t2"> <label for="t2">Нажмите на этот текст, чтобы поставить галочку</label><br><br> </form><br> </body><br><br> </html><br> Результат данного примера показан ниже.<br> Поставьте галочку<br><br> Нажмите на этот текст, чтобы поставить галочку<br> В первой строке, чтобы активизировать флажок, надо щелкнуть на него самого. Во второй строке активным элементом является и текст, при нажатии на который курсором мыши, можно устанавливать или снимать галочку. Вот и вся разница. <br> Польза от применения тега <LABEL> не особенно велика, но следует учитывать, что в операционных системах активация переключателей и флажков происходит при щелчке по тексту возле них. А следовательно, такой подход более привычен и понятен пользователям сайтов. <br><br> <h1>Использование параметра accesskey</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br> <form><br><br> <input type="checkbox" id="t1"><label for="t1" accesskey="q">Нажмите <Alt>+<q>, чтобы активировать переключатель</label><br><br> </form><br> </body><br><br> </html><br> Результат данного примера показан ниже. <br>Нажмите <Alt>+<q>, чтобы активировать переключатель<br> Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer. Кроме того, некоторые горячие клавиши уже используются браузером для своих целей. <br>Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Использование тега <FIELDSET></h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br><br> <form><br><br> <fieldset><br><br> <b>Работа со временем</b><br><br> <input type="checkbox" value="t1"> Создание пунктуальности (никогда не будете никуда опаздывать).<br><br> <input type="checkbox" value="t2"> Излечение от пунктуальности (никогда никуда не будете торопиться).<br><br> <input type="checkbox" value="t3"> Изменение восприятия времени. <br><br> </fieldset><br><br> </form><br><br> </body><br><br> </html><br> Результат выполнения данного примера показан ниже.<br><b>Работа со временем</b><br><br> Создание пунктуальности (никогда не будете никуда опаздывать).<br><br> Излечение от пунктуальности (никогда никуда не будете торопиться).<br><br> Изменение восприятия времени.<br> Чтобы добавить к рамке специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, вроде <B>, <I>, <SUP>, <SUB>, а также стили (пример 16.2). <br><br> <h1>Использование тега <LEGEND></h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <body><br> <form><br><br> <fieldset><br><br> <legend style="font-weight: bold">Изменение убеждений</legend><br><br> <input type="checkbox value="t1"> Изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).<br><br> <input type="checkbox" value="t2"> Изменение веры в непогрешимость любимой партии.<br><br> <input type="checkbox" value="t3"> Убеждение в том, что инопланетяне существуют.<br><br> <input type="checkbox" value="t4"> Выбор политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).<br><br> <input type="checkbox" value="t5"> Повышение веры в собственные способности.<br><br> </fieldset><br><br> </form><br> </body><br><br> </html><br> Любые пробелы в теге <LEGEND> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела  .<br> При использовании тегов <FIELDSET> и <LEGEND> учтите, что они работают в браузерах Internet Explorer 4, Netscape 6, Opera 5 и старше. Также результат работы в разных браузерах будет несколько различаться, как показано на рис. 16.1— 16.3.<br> <div style="text-align:center;"><img src="image/02161.gif" alt="Использование тега <LEGEND>"></div><br> Рис. 16.1. Отображение в браузере Internet Explorer 6<br> <div style="text-align:center;"><img src="image/02162.gif" alt="Использование тега <LEGEND>"></div><br> Рис. 16.2. Браузер Netscape 7<br> <div style="text-align:center;"><img src="image/02163.gif" alt="Использование тега <LEGEND>"></div><br> Рис. 16.3. Браузер Opera 7<br> Из рисунков видно, что для браузера Internet Explorer рамка получается цветная и с закругленными углами. Для остальных браузеров цвет рамки по умолчанию черный, а цвет заголовка совпадает с цветом текста. Кроме того, Opera "забывает" о полях вокруг текста, из-за чего текст "налипает" на рамку. Цвет рамки группы поменять не удастся, а вот отступы вокруг текста и цвет заголовка изменяются с помощью стилей (пример 16.3).<br><br> <h1>Изменение вида заголовка</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <head> <link rel="canonical" href="https://www.e-lave.ru//index.htm"/><br><br> <style type="text/css"><br><br> FIELDSET {<br><br> padding: 10px /* Поля вокруг группы */<br><br> }<br> LEGEND {<br><br> color: red /* Цвет заголовка группы */<br><br> }<br><br> </style><br><br> </head><br><br> <body> <br> <form><br><br> <fieldset><br><br> <legend>Пробуждение обаяния </legend><br><br> ...<br><br> </fieldset><br><br> </form> <br> </body> <br><br> </html> <br> В примере отступы устанавливаются с помощью параметра padding, а цвет заголовка через атрибут color.<br> Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Использование блокирования поля</h1> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br><br> <html><br><br> <head> <link rel="canonical" href="https://www.e-lave.ru//index.htm"/><br><br> <script><br><br> function agreeForm(f) {<br> // Если поставлен флажок, снимаем блокирование кнопки<br><br> if (f.agree.checked) f.submit.disabled = 0<br> // В противном случае вновь блокируем кнопку<br><br> else f.submit.disabled = 1<br> }<br><br> </script><br><br> </head><br><br> <body> <br> <form><br><br> <textarea cols="30" rows="4" readonly><br><br> Типовой договор<br> Отдаю свою душу, а взамен получаю здоровье и бессмертие. <br><br>

Я согласен со всеми условиями

Результат данного примера показан ниже.
function agreeForm(f) {
if (f.agree.checked) f.submit.disabled = 0 else f.submit.disabled = 1
}
Типовой договор
Отдаю свою душу, а взамен получаю здоровье и бессмертие.
Я согласен со всеми условиями

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».
Для блокирования поля используется параметр disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его, как показано в примере17.1.
Замечание
В некоторых случаях можно встретить запись disabled="disabled" или disabled="true". Она также работает, но имеет скорее отношение к XHTML. Впрочем, в HTML такая форма тоже действует.

Использование параметра readonly

Обычное текстовое поле

Поле только для чтения

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Изменение ширины текстового поля

Поиск:

В данном примере ширина текстового поля устанавливается равной 200 пикселов.
Поиск:
Замечание
Если ширина одновременно задается с помощью параметра size и стилей, то значение size будет проигнорировано и ширина примет значение, указанное через стили.

Размеры многострочного текста

<br><br>

В данном примере ширина многострочного текстового поля установлена как 100%, и занимает всю отведенную область, а высота равна 200 пикселов.

Ширина кнопок

Результат данного примера показан ниже. Заметим, что вид кнопок в разных браузерах может различаться между собой, при равной их ширине.
Замечание
Если заданная ширина кнопки меньше текста надписи, тогда текст будет обрезан с правого края.

Ширина списка

Выберите блюдо



Мчади

Када на мацони

Пахлава

Чурчхелла

Кчуч

Лилибдж

Результат данного примера показан ниже.
Выберите блюдо

Мчади
Када на мацони
Пахлава
Чурчхелла
Кчуч
Лилибдж
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Изменение цвета некоторых полей формы

Текстовое поле	Кнопка
Переключатели	Флажки

Результат данного примера показан ниже.

Текстовое поле	Кнопка
Переключатели	Флажки

Замечание Браузеры Netscape и Firefox не изменяют цвет фона у переключателей и флажков.

Фон у поля с многострочным текстом

<br><br> Введите ваш комментарий<br><br>

Результат данного примера показан ниже.
Введите ваш комментарий

Цвет фона списка

Аметист

Бирюза

Жадеит

Сердолик

Результат данного примера показан ниже. Обратите внимание, что выделенный пункт имеет системный цвет фона.
Аметист
Бирюза
Жадеит
Сердолик

Цвет фона и текста группы списка

Закуска Барская

Раки, фаршированные по-царски

Биточки в горшочке




Галушки славянские

Пампушки украинские

Жаркое по-харьковски

Результат данного примера показан ниже.
Закуска Барская
Раки, фаршированные по-царски
Биточки в горшочке
Галушки славянские
Пампушки украинские
Жаркое по-харьковски

Цвет элементов списка

Камни

Алмаз

Изумруд

Рубин

Результат данного примера показан ниже.
.diamond { color: #66f } .emerald { background: #3baf17; color: #fff } .ruby { background: #d31c1c; color: #fff }
Камни
Алмаз
Изумруд
Рубин
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Указание обработчика формы

...

В качестве обработчика можно указать также адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM (пример 2.2).

Отправка формы на адрес электронной почты

...

Изменение типа данных формы

...

Использование метода POST

...

Замечание
Хотя параметры тегов, в том числе и

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

Обращение к данным формы по их имени

Имя:

Открытие результатов обработчика формы в новом окне

...

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Использование глобальных переменных

// Функция isset проверяет, присвоено ли переменной $username какое-либо значение

if (isset($username)) {
// Выводим текст

echo "Привет, $username";
}
else {

?>

Введите ваше имя:

}

?>



В данном примере вначале идет проверка на существование значения переменной $username с помощью функции isset. Если какое-либо значение присвоено, оно будет выведено, в противном случае отображается форма, где требуется ввести имя пользователя.
Замечание
В настройках PHP (файл php.ini) можно запретить работу с глобальными переменными (register_globals = Off), в таком случае указанный пример не будет работать должным образом. Желательно вообще обходиться без глобальных переменных, что делается обычно в целях безопасности.

Получение данных через метод GET

if (isset($HTTP_GET_VARS["drink"])) {
echo "Вы предпочитаете пить " . $HTTP_GET_VARS["drink"];
}
else {

?>

Что вы предпочитаете пить?




Пиво

Чай

Кофе

Молоко

}

?>



В данном примере создается группа переключателей, значение у которых определяется параметром value тега , а имя— парметром name. Выбранный пользователем вариант получаем через массив $HTTP_GET_VARS["drink"], где drink — это имя переключателя.

Получение данных через метод POST

if (isset($_POST["test"])) {
$answer = $_POST["test"];

if ($answer == "a4") echo "Правильный ответ.";

else echo "Вы ошиблись с ответом";
}
else {

?>

Какой тег указан неверно?




DT

DFN

DEL

DD


DL

}

?>



Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Текстовое поле

Как ваше имя?

В результате получим следующее.
Как ваше имя?

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Поле для пароля

Логин:

Пароль:

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

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Многострочный текст

Введите ваш отзыв:

Результат данного примера показан ниже.
Введите ваш отзыв:

Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Добавление кнопки

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

Кнопка с рисунком
В примере 7.2 показано создание кнопки с текстом и рисунком.

Кнопки, созданные с помощью тега

Кнопка с текстом

Кнопка с рисунком









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

Кнопка для отправки данных на сервер

...

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, на кнопке автоматически появится надпись «Подача запроса» для русской версии браузера Internet Explorer, «Отправить запрос» для русской версии Firefox или «Submit Query» для Netscape.

Кнопка для очистки формы

Значение кнопки RESET никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать параметр value, на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Создание переключателей

Какое у вас состояние разума?

Не дзен

Дзен

Полный дзен

В результате получим следующее.
Какое у вас состояние разума?

Не дзен

Дзен

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

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

Создание флажков

С какими операционными системами вы знакомы?

Windows 95/98

Windows 2000

System X


Linux


X3-DOS

В результате получим следующее.
С какими операционными системами вы знакомы?

Windows 95/98

Windows 2000

System X
Linux

X3-DOS
Информация взята с сайта

Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу

SELECTED

Делает текущий пункт списка выделенным. Если у тега добавлен параметр multiple, то можно выделять более одного пункта.

Добавление формы

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

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

Кнопку отправки данных формы на сервер (кнопка SUBMIT).

Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега или другим, допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки SUBMIT, происходит запуск обработчика формы, которая получает введенную в форме информацию, а дальше делает с ней то, что предполагал разработчик. В качестве обработчика формы обычно выступает CGI-программа, заданная параметром action тега

. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки— PHP, Perl, С++.
Для указания браузеру где начинается и заканчивается форма, используется контейнер . Между открывающим и закрывающим тегами и

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

Поле со списком

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

Пункт 1

Пункт 2

Пункт 3


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

Чебурашка Крокодил Гена Шапокляк Крыса Лариса		Выберите героя Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Список множественного выбора	Раскрывающийся список

Скрытое поле

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

Параметры перечислены в табл.11.1.
Табл. 11.1. Параметры скрытого поля
Параметр
Описание

name	Имя поля для его идентификации обработчиком формы.
value	Значение поля, определяющее, какая информация будет отправлена на сервер.

Пример использования скрытых полей приведен в примере 11.1.

Поле с изображением

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

.
Изображение в форме создается следующим образом.

Параметры перечислены в табл.12.1.
Табл. 12.1. Параметры поля с изображением
Параметр
Описание

align	Определяет выравнивание изображения.
alt	Альтернативный текст для кнопки с изображением.
border	Толщина рамки вокруг изображения в пикселах.
name	Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы.

Хотя по своему назначению указанное поле похоже на кнопку SUBMIT, его параметры совпадают с параметрами тега , который добавляет изображение на веб-страницу.
В примере 12.1 показано использование поля с изображением.

Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле. Такой элемент формы отображается как текстовое поле, рядом с которой располагается кнопка Обзор (Browse... для английской версии Netscape или Choose в браузере Opera). При нажатии на эту кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.
Синтаксис поля для отправки файла следующий.

Параметры перечислены в табл.13.1.
Табл. 13.1. Параметры поля для отправки файла
Параметр
Описание

size	Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле.
name	Имя поля, используется для его идентификации обработчиком формы.

Создание поля для отправки файла показано в примере 13.1.

Переход между полями с помощью табуляции

При достаточно большом количестве полей формы, которые необходимо заполнить, переходить между ними с помощью курсора мыши становится утомительно. При этом требуется навести курсор на соответствующее поле, нажать кнопку мыши, и только после этого вводить нужное значение. Как альтернатива, используется клавиша , которая позволяет быстро переключать фокус с одного поля на другое. Параметр tabindex определяет последовательность перехода между полями при нажатии на .
Замечание
Фокусом называется активность поля, иными словами, поле доступно для того, чтобы в него вводили информацию или использовали какое другое действие. Например, кнопки, флажки, переключатели можно активизировать с помощью пробела.
Следующие поля формы (теги) могут иметь параметр tabindex:

, , , . В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз. <br><br> <h1>Применение тега LABEL</h1> Тег <LABEL> связывает текст с определенным элементом формы. Такая связь необходима, чтобы изменять значение переключателей и флажков при нажатии курсором мыши на текст. Кроме того, с помощью тега <LABEL> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.<br> Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример15.1). <br><br> <h1>Разделение формы на группы</h1> При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (пример16.1). <br><br> <h1>Блокирование элементов формы</h1> У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных,— блокирование (disabled) и только для чтения (readonly). <br><br> <h1>Изменение ширины поля</h1> Обычно ширина текстового поля регулируется параметром size тега <INPUT>, но в большинстве случаев это не удобно, поскольку на размер в таком случае влияет выбор браузера, его параметры, настройки операционной системы и т.д. Чтобы установить заданную ширину поля лучше использовать стили, в частности, ширина изменяется с помощью свойства width. <br><br> <h1>Цвет фона элементов формы</h1> Для изменения фона под элементами формы используется универсальный стилевой атрибут background или его производный параметр background-color. Для элементов, которые образованы с помощью тега <INPUT>, в общем случае синтаксис для изменения цвета фона будет следующий.<br> <input type="..." style="background: цвет"><br> Не обязательно стиль указывать внутри тега, более правильным вариантом будет вынести его в таблицу глобальных стилей, как показано в примере19.1.<br><br> <h1>Параметры формы</h1> Каждая форма характеризуется некоторыми параметрами, которые указываются в теге <FORM>. Эти параметры задают имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики.<br><br> <h1>Получение данных формы</h1> Рассказ о формах был бы не полным, если не затронуть вопрос, что же делать с данными дальше, после того, как они введены пользователем и отправлены на сервер. Там информация уже анализируется и сохраняется в случае необходимости. Централизованное хранение данных на сервере, например в базе данных, позволяет организовывать множество интересных вещей— от обычных опросов до сложных форумов.<br> В качестве обработчика формы может выступать любой серверный язык программирования — Perl, Си, Python, PHP и т.д. В дальнейшем рассмотрим манипуляции с данными формы при помощи PHP, как одном из наиболее популярных и доступных языков.<br><br> <h1>Элементы форм</h1> Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д. В табл. 3.1 представлены различные элементы форм.<br> <table border=1><br> Табл. 3.1. Элементы форм<br> <tr> Название<br> Описание<br> Пример<br> </tr> <tr> <td>Однострочное текстовое поле</td> <td>Предназначено для ввода строки символов с помощью клавиатуры. </td> <td></td> </tr> <tr> <td>Поле для пароля</td> <td>Обычное текстовое поле, но отличается тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.</td> <td></td> </tr> <tr> <td>Многострочный текст</td> <td>Область, в которой можно вводить несколько строк текста.</td> <td></td> </tr> <tr> <td>Кнопка</td> <td>Элемент формы, на который нужно нажимать.</td> <td></td> </tr> <tr> <td>Кнопка SUBMIT</td> <td>После нажатия на эту кнопку данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега FORM.</td> <td></td> </tr> <tr> <td>Кнопка RESET</td> <td>При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.</td> <td></td> </tr> <tr> <td>Переключатели (radiobutton)</td> <td>Используются для выбора одного варианта из предложенных. </td> <td> </td> </tr> <tr> <td>Флажки (checkbox)</td> <td>Используются для выбора двух и более вариантов из предложенных.</td> <td> </td> </tr> <tr> <td>Поле со списком</td> <td>Предназначен для выбора одного или нескольких значений из списка.</td> <td>Чай<br> Кофе<br> Пиво<br> <td> </tr> <tr> <td>Скрытое поле</td> <td>Скрытое поле не отображается на странице и прячет свое содержимое от пользователя.</td> <td> </td> </tr> <tr> <td>Поле с изображением</td> <td>Аналогично по действию кнопке Submit, но представляют собой рисунок.</td> <td><div style="text-align:center;"><img src="image/imgbutton.gif" alt="Элементы форм"></div></td> </tr> <tr> <td>Отправка файла</td> <td>Создает поле для ввода имени файла, который пересылается на сервер.</td> <td></td> </tr> </table><br> Каждый элемент формы имеет свои собственные параметры, которые влияют на его вид. <br>Информация взята с сайта <br><br> Copyright © 2005 <b>Влад Мержевич</b>, по всем вопросам пишите по адресу<br><br> <h1>Однострочное текстовое поле</h1> Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.<br><input type="text" параметры><br> Параметры поля перечислены в табл.4.1.<br> <table border=1><br> Табл. 4.1. Параметры однострочного текстового поля<br> <tr> Параметр<br> Описание<br> </tr> <tr> <td>size</td> <td>Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.</td> </tr> <tr> <td>maxlength</td> <td>Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля. </td> </tr> <tr> <td>name</td> <td>Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.</td> </tr> <tr> <td>value</td> <td>Начальный текст, содержащий в поле.</td> </tr> </table><br> Создание текстового поля с разными параметрами показано в примере 4.1.<br><br> <h1>Поле для пароля</h1> Поле для пароля — обычное текстовое поле, но отличается от него тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль. Синтаксис создания следующий.<br> <input type="password" параметры><br> Параметры поля перечислены в табл.5.1.<br> <table border=1><br> Табл. 5.1. Параметры поля с паролем<br> <tr> Параметр<br> Описание<br> </tr> <tr> <td>size</td> <td>Ширина текстового поля, которое определяется числом звездочек моноширинного шрифта. </td> </tr> <tr> <td>maxlength</td> <td>Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля. </td> </tr> <tr> <td>name</td> <td>Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.</td> </tr> <tr> <td>value</td> <td>Начальный текст, содержащий в поле. Этот текст не отображается и заменяется звездочками. </td> </tr> </table><br> Создание поля для пароля показано в примере 5.1.<br><br> <h1>Многострочный текст</h1> Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.<br> Синтаксис создания следующий.<br> <textarea параметры><br><br> текст<br><br>
Между тегами и можно поместить любой текст, который будет отображаться внутри поля.
Допустимые параметры перечислены в табл.6.1.

Табл. 6.1. Параметры многострочного текста
Параметр
Описание

cols	Ширина поля в символах.
disabled	Блокирует доступ и изменение элемента.
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly	Устанавливает, что поле не может изменяться пользователем.
rows	Высота поля в строках текста.
wrap	Параметры переноса строк.

Создание поля многострочного текста показано в примере 6.1.

Кнопки

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

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

Параметры кнопки перечислены в табл.7.1.
Табл. 7.1. Параметры кнопок
Параметр
Описание

name	Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Создание текстового поля с разными параметрами показано в примере 7.1.

Переключатели

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

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

Создание группы переключателей показано в примере 8.1.

Флажки

Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.
Параметры флажков перечислены в табл.9.1.
Табл. 9.1. Параметры флажков
Параметр
Описание

checked	Предварительное выделение флажка.
name	Имя флажка для его идентификации обработчиком формы.
value	Задает, какое значение будет отправлено на сервер.

Использование флажков показано в примере 9.1.

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

Кроме ширины можно задавать и высоту поля через свойство height. Для многострочного поля синтаксис изменения размеров будет следующий.
<br><br> ... <br><br>
В примере 18.2 показано, как устанавливать размеры для этого поля.

Ширина кнопок

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

В примере 18.3 показано, как изменить ширину кнопки.

Ширина однострочного текстового поля

Для изменения ширины однострочного текстового поля используется следующий синтаксис.

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

Ширина списка

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


...


В примере 18.4 показано, как изменить ширину списка.

SIZE

Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.

TARGET

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. Зарезервированные имена следующие (пример2.6).
_blank — загружает страницу в новое окно браузера.

_self — загружает страницу в текущее окно.

_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.

_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

VALUE

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается параметром name тега , а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.
Создание списка показано в примере 10.2.



---

---