Ввод данных пользователем в формы HTML
Однако лучше воспользоваться тегом <LABEL>, который был введен в Internet Explorer версии 4. Он гарантирует привязку метки к полю ввода. В нем нужно указать единственный атрибут FOR=, значение которого должно содержать имя поля ввода:
<LABEL FOR="Name">Ваше имя:</LABEL><INPUT TYPE="text" NAME="Name" VALUE="АНОНИМ" SIZE="30"><BR>Теперь давайте создадим многострочное текстовое поле для ввода мнения клиента об услугах фирмы. Для этого необходимо использовать тег <TEXTAREA>. В нем можно с помощью атрибутов COLS= и ROWS= определить количество символов в строке и число строк текстового поля:
<TEXTAREA COLS="30" ROWS="4" NAME="Opinion" STYLE="vertical-align: middle;"></TEXTAREA>Как видите, здесь мы также определили атрибут NAME=. А поскольку это текстовое поле является многострочным, мы применили еще и стилевое свойство vertical-align, чтобы “подсказка” пользователю расположилась по центру (по умолчанию она располагается внизу).
Кроме того, не забудьте поставить закрывающий тег </TEXTAREA>, поскольку все, что находится между открывающим и закрывающим тегами, будет трактоваться как содержимое текстового поля. Если не поставить закрывающий тег, все последующее содержимое веб-страницы окажется в текстовом поле, причем в виде исходного текста!
Теперь давайте добавим еще одну “традиционную” кнопку, при нажатии на которую все поля формы очищаются (или приобретают исходные значения, определенные атрибутом VALUE= – в данном случае при ее нажатии в поле Ваше имя появится запись Аноним). Такую кнопку можно создать с помощью тега <INPUT> с атрибутом <TYPE="reset">:
<INPUT TYPE="reset" VALUE="Очистить форму">Как и в случае с кнопкой Submit, значение VALUE= здесь определяет надпись на кнопке. Если этот атрибут не установлен, на кнопке будет написано: Reset. Давайте посмотрим, что v нас получается в целом.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Ваш отзыв</TITLE> <STYLE> BODY { background-color: #D2FFFF; color: #003737; background-image: url("Images\grad2.jpg"); background-position: right; background-repeat: repeat-y; } H1 { text-align: center } A:link, A:active, A:visited { color: #006A6A; } A:hover { font-weight: bold; text-decoration: none; } .hdr { position: absolute; left: 50px; top: 10px; text-align: center; font-family: OdessaScriptFWF, fantasy; font-size: 60px; font-weight: 900; width: 90%; height: 100px; letter-spacing: 0.05em; line-height: 100px; filter: shadows - border: 10px outset #003163; color: #3163CE; } .1ft { position: absolute; font-size: meduim; left: 10px; top: 160px; width: 160px; height: 400px; overflow-x: visible; } .Ink { border-width: thick; border-style: ridge; margin: 10px; padding: 5px; border-color: #319CFF; background-image: url("Images\backlnkl.jpg"); color: red; text-align: center; } .Ink A { text-decoration: none; color: white; } .logo { position: absolute; left: 150; top: 220; z-index: - 5; } </STYLE></HEAD> <BODY> <DIV CLASS="hdr">Фирма «ЛЕНТЯЙ»</DIV> <DIV CLASS="rght"> <DIV CLASS="lnk"> <A HREF="main.html">УСЛУГИ</A> </DIV> <DIV CLASS="lnk"> <A HREF="prices.html">ЦЕНЫ</A> </DIV> <DIV CLASS="lnk"> <A HREF="forml.html">ФОРМА ЗАКАЗА</A> </DIV> <DIV CLASS="lnk"> <A HREF="history.html">ИСТОРИЯ <SPAN STYLE="letter-spacing: - 3рх; ">КОМПАНИИ</SPAN></A> </DIV> <DIV CLASS="lnk">КНИГА ОТзЫВОВ</DIV> </DIV> <DIV CLASS="lft"> <H1>Ваш отзыв с наших услугах</H1> <DIV ALIGN="center"> <FORM ACTION="http://cgi.lentyay.corn/guest.cgi" METHOD="post"> <LABEL FOR="Name">Ваше имя:</LABEL> <INPUT TYPE="text" NAME="Name" VALUE="Аноним" SIZE="30"> <BR> <LABEL FOR="Opinion">Ваше мнение:</LABEL> <TEXTAREA COLS="30" ROWS="4" NAME="Opinion" STYLE="vertical-align: middle; "></TEXTAREA> <BR> <INPUT TYPE="submit" VALUE="Отправить"> <INPUT TYPE="reset" VALUE="Очистить форму"> </FORM> </DIV> </DIV> <IMG CLASS="logo" SRC="Imqes/logo6.gif" WIDTH="500" HEIGHT="346" BORDER="0"></BODY> </HTML>