Урок 9 Формы
advertisement
Урок 9 Формы Формы представляют собой важные элементы HTML-страниц, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может посылать комментарии по поводу посещения определенного узла, пересылать запросы, регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них, заполняя ее. Форма создается при помощи различных элементов и атрибутов, заключенных в элемент <form>. В этом уроке рассматриваются методы создания форм. Создание форм Формы предназначены для ввода информации. Все формы начинаются тегом <form> (от англ. form — форма) и завершаются тегом </form>. У формы могут быть атрибуты name, action, method, target. Атрибут name . Определяет имя формы и обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм. Атрибут action. Обязательный атрибут action задает URL-адрес программы, которая будет вызываться для обработки формы. Атрибут method . Определяет способ отправки параметров формы. Принимает значение get или post. В настоящее время использование метода get не рекомендуется. Атрибут target. Определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения self, parent, top, blank или явно указанное имя окна. Пример элементарной формы показан на рис. 9.1 (листинг 9.1). Имеющиеся на форме поля ввода задаются элементами <input>. Атрибут size регулирует длину поля ввода. Создание форм 187 Рис. 9.1. Веб-страница, содержащая элементарную форму k,“2,… 9.1. o!, ! “%ƒ=…, "K-“2!=…,/, “%!›=?L . …2=!…3" -%! 3 <html> <head> <title> ФОРМЫ</title> </head> <body> <form> <center><h3>МОЯ ПЕРВАЯ ФОРМА</h3> ПЕРВОЕ ПОЛЕ<input name="Первое Поле"size="40" /><br /> <input name="ВТОРОЕ ПОЛЕ"size="60" />ВТОРОЕ ПОЛЕ <br /> </center> </form> </body> </html> Создать форму легко, но трудно красиво выстроить все элементы. Эта проблема не имеет простого решения. Можно разместить поля ввода и раскрывающиеся списки в левой части страницы, а весь сопроводительный текст — справа. Поскольку длина полей ввода задается атрибутом size, можно выровнять строки по левому краю, а текст справа оставить не выровненным, как в большинстве документов. Такая форма выглядит аккуратнее. Пример такой формы показан на рис. 9.2 (листинг 9.2). Рис. 9.2. Форма с выровненными элементами 188 Урок 9. Формы k,“2,… 9.2. o!, ! “%ƒ=…, -%! / “ "/!%"………/ , . …2= , <html> <head> <title> ФОРМЫ</title> </head> <body> <form> <center><h2>КАКАЯ ФОРМА ВЫГЛЯДИТ ЛУЧШЕ?</h2> <table><tr><td> ПЕРВЫЙ <input name="ПЕРВЫЙ"size="20" /><br /> ПОСЛЕДНИЙ<input name="ПОСЛЕДНИЙ"size="20"><br> АДРЕС<input name="АДРЕС"size="20" /><br /> ГОРОД<input name="ГОРОД"size="20" /><br /> ОБЛАСТЬ<input name="ОБЛАСТЬ"size="20" /><br /> РАЙОН<input name="РАЙОН"size="20" /><br /></td> <td><h3>ИЛИ</h3></td> <td> <input name="ПЕРВЫЙ"size="20" /> ПЕРВЫЙ<br)> <input name="ПОСЛЕДНИЙ"size="20" /> ПОСЛЕДНИЙ<br/> <input name="АДРЕС"size="20" /> АДРЕС<br /> <input name="ГОРОД"size="20" /> ГОРОД<br /> <input name="ОБЛАСТЬ"size="20" /> ОБЛАСТЬ<br /> <input name="РАЙОН"size="20" /> РАЙОН</td> </tr></table></form></center> </body></html> Размещение на форме элементов управления Для создания полей ввода, с которыми мы познакомились в предыдущем разделе, и других элементов управления используется элемент <input> (от англ. input — ввод). Элемент имеет атрибуты name, size, checked, maxlength, src, type. Атрибут name. Определяет имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому впоследствии можно получить данные, введенные пользователем в это поле. Атрибут size. Определяет размер поля ввода в символах. Атрибут checked. Используется с флажками и переключателями. Он означает, что флажок или переключатель, имеющий этот атрибут, при открытии страницы будет установлен. Атрибут maxlength. Определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст его ввести. Не следует путать этот атрибут с атрибутом size , который определяет количество видимых в поле символов. Если Размещение на форме элементов управления 189 количество введенных символов окажется больше чем size, в поле появится возможность прокрутки. По умолчанию значение maxlength равно бесконечности. Атрибут src. Задает URL-адрес, указывающий на изображение (используется совместно с атрибутом image). Атрибут type. Определяет тип элемента управления. По умолчанию это однострочное поле ввода. Все остальные типы должны быть явно указаны. Значение checkbox превращает поле ввода во флажок, который используется для передачи в вызываемую программу простых логических значений (on или off ), заданных пользователем. Значение hidden скрывает элемент управления — он не отображается браузером и не дает пользователю возможность изменить присвоенное ему по умолчанию значение. Такой элемент управления используется для передачи в программу неизменной информации, например идентификатора пользователя или пароля. Значение image позволяет связать с именем элемента управления изображение. При щелчке мышью на таком изображении будет немедленно вызвана ассоциированная с формой программа. Значение password внешне не меняет поле ввода, но вводимое пользователем значение не отображается браузером на экране. Значение radio превращает поле ввода в переключатель, который позволяет выбрать одно значение из нескольких, задаваемых переключателями с разными значениями атрибута value, но с одинаковыми значениями атрибута name. В вызываемую программу будет передано значение name=value, причем value примет значение установленного переключателя. При установке одного переключателя все остальные автоматически сбрасываются. Значение reset превращает поле ввода в кнопку, при щелчке на которой все элементы управления формы примут значения, заданные для них по умолчанию. Значение submit превращает поле ввода в кнопку, при щелчке на которой будет вызвана ассоциированная с формой программа или произойдет переход по заданному URL-адресу. Значение text описывает однострочное поле ввода. Используйте атрибуты maxlength и size для определения максимальной длины вводимого значения в символах и размера поля ввода (по умолчанию 20 символов). Атрибут value. Позволяет присвоить элементу управления значение по умолчанию или значение, которое будет присвоено атрибуту name при уста- новке соответствующего переключателя (для типа переключателя данный атрибут обязателен). 190 Урок 9. Формы Пример формы с переключателями (type=radio) показан на рис. 9.3 (листинг 9.3). Рис. 9.3. Форма с переключателями k,“2,… 9.3. o!, ! “%ƒ=…, -%! / “ C!*"=2 , <html> <head><title>ПРИМЕР <body> <input type="radio" <input type="radio" <input type="radio" <input type="radio" </body> </html> ФОРМЫ С ПЕРЕКЛЮЧАТЕЛЯМИ</title></head> name="modem" name="modem" name="modem" name="modem" value="9600" checked /> 9600 бит/с <br /> value="14400" checked /> 14400 бит/с <br /> value="28800" checked /> 28800 бит/с <br /> value="56600" checked /> 56600 бит/с <br /> В листинге 9.4 представлен пример создания формы, содержащей кнопку отправки данных (type=submit). Сама форма показана на рис. 9.4. Рис. 9.4. Форма с кнопкой отправки k,“2,… 9.4. o!, ! “%ƒ=…, -%! / “ *…%C*%L %2C!="*, <html> <head> <title>АТРИБУТ submit</title> </head> <body> <form action="www.piter.ru" method="post"> <input size="40" name="text" value="Значение по умолчанию" /> <input type="submit" value="Отправка запроса" value="Опубликовать"/> </form> </body></html> Размещение на форме элементов управления 191 В отличие от переключателей в группе флажков (type=checkbox) с одинаковыми именами может быть установлено сколько угодно флажков. В листинге 9.5 приведен пример создания формы с флажками, причем, как показано на рис. 9.5, при открытии формы второй и третий флажки оказываются установленными, поскольку для них указан атрибут checked. Рис. 9.5. Форма с флажками k,“2,… 9.5. o!, ! “%ƒ=…, -%! / “ -=›*= , <html> <head><title>ФЛАЖКИ</title></head> <body bgcolor="#dc143c"> <form method="post" action ="www.piter.ru"> <input type="text" name="text" value="Значение по умолчанию" size="40" /> <input type="submit" value="Опубликовать" /> <br /> <input type="checkbox" name="comp" value="www" /> Всемирная паутина <br /> <input type="checkbox" name="comp" value="http"checked /> Hyper Text Transfer Protocol <br /> <input type="checkbox" name="comp" value="html"checked /> Hyper Text Markup Language </form> </body></html> В листинге 9.6 приведен пример создания формы с полем для ввода пароля (type=password). При вводе информации в такое поле она отображается в виде звездочек (рис. 9.6). Рис. 9.6. Форма с полем для ввода пароля 192 Урок 9. Формы k,“2,… 9.6. o!, ! “%ƒ=…, -%! / “ C% ""%= C=!% <html> <head><title>Ввод пароля </title></head> <body> <form method="post" action ="www.piter.ru"> <input type="password" name="text" value="Введите значение" size="40" maxlegth="40"/><br/></form> </body></html> Списки выбора Для создания списков на форме, позволяющих выбрать одно или несколько значений из множества возможных, используется элемент <select>. По умолчанию в поле списка отображается его первый элемент. Список создается с помощью элемента <option>. В листинге 9.7 представлен пример использования элемента <select> (рис. 9.7). Рис. 9.7. Веб-страница с раскрытым списком выбора k,“2,… 9.7. o!, ! “%ƒ=…, "K-“2!=…,/, “%!›=?L “C,“%* "/K%!= <html> <head><title>ФОРМЫ</title></head> <body> <h1 align="left">Устройства ввода-вывода компьютера</h1> <form> <select name="group"> <option> Клавиатура </option> <option> Мышь </option> <option> Монитор </option> <option> Принтер </option> Списки выбора 193 <option> Гибкий магнитный диск </option> <option> Cd-диск </option> <option> Dvd-диск </option> <option> Синхронизатор с карманным ПК </option></select> </form></body></html> Список выбора, создаваемый элементом <select>, не обязательно является однострочным. Количество одновременно видимых на экране элементов списка задается атрибутом size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Чтобы в списке одновременно можно было выбрать несколько элементов (с помощью клавиши Shift или Ctrl), применяется атрибут multiple, который задает максимальное количество одновременно выбранных элементов. Пример использования элемента <select> с атрибутами size и multiple показан на рис. 9.8 (листинг 9.8). Рис. 9.8. Многострочный список на форме k,“2,… 9.8. o!, ! “%ƒ=…, …%%“2!%…%% “C,“*= <html> <head><title> Элемент select, атрибут multiple </title></head> <body> <form> <select name="group" size="4" multiple="2"> <option> Запись на формный цилиндр </option> <option> Запись на форму </option> <option> Запись на фотоформу </option> <option> Печатная машина </option> <option> Прямая запись </option> </select></form></body></html> В элементе <option> обязательно надо указывать атрибут value. Только в этом случае программа, ассоциированная с формой, сможет определить, какой элемент списка выбран. Соответствующий пример показан на рис. 9.9 (листинг 9.9). 194 Урок 9. Формы Рис. 9.9. Список, в котором используется атрибут value k,“2,… 9.9. o!, ! “%ƒ=…, “C,“*=, " *%2%!% ,“C%ƒ32“ =2!,K32 value <html> <head><title> select.htm </title></head> <body> <form> Форматы графических файлов: <select name="GIF - Graphics Interchange Format"> <option selected value="Graphics Interchange Format"> GIF - Graphics Interchange Format</option> <option value="JPEG"> JPEG - Joint Photographic Expert Group</option> <option value="PNG">PNG - Portable Network Graphic </option> <option value="BMP">BMP - Bit Map - битовая карта </option> </select> </form> </body> </html> Многострочные текстовые поля Для создания на форме многострочных текстовых полей, позволяющих пользователю вводить большие объемы информации, служит элемент <textarea>. Этот элемент имеет атрибуты name, rows, cols. Атрибут name. Задает имя поля ввода. Атрибут rows. Задает высоту поля ввода в символах. Атрибут cols. Задает ширину поля ввода в символах. Для того чтобы в поле ввода по умолчанию при открытии формы выводился какой-либо текст, его необходимо вставить между элементами <textarea> и </textarea>. Пример использования элемента <textarea> показан на рис. 9.10 (листинг 9.10). Подведем итоги 195 Рис. 9.10. Форма с многострочным текстовым полем k,“2,… 9.10. o!, ! “%ƒ=…, -%! / “ …%%“2!%…/ 2*“2%"/ C% <html><head><title>Элемент textarea </title></head> <body><form> <textarea name="Глоссарий" rows="10" cols="50"> URL Uniform Resource Locator - унифицированный указатель ресурса Стандартный способ адресации файлов в WWW EPS Encapsulated PostScript Формат, позволяющий сохранять графические изображения и переносить их из одного приложения в другое. </textarea> </form></body></html> Подведем итоги В этом уроке было рассказано, как создавать формы, позволяющие разработчикам интерактивно взаимодействовать с посетителями своих страниц. Такое взаимодействие реализуется с помощью элементов управления, таких как однострочные и многострочные поля ввода, флажки, переключатели, кнопки, раскрывающиеся и прокручивающиеся списки. Для создания форм используется элемент <form>, для создания элементов управления — элемент <input>, для создания списков — элемент <select>, для создания многострочных полей ввода — элемент <textarea>.
