Иллюстрированный самоучитель по созданию сайтов

Ввод данных пользователем в формы 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">Фирма&nbsp;&laquo;ЛЕНТЯЙ&raquo;</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>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.

Автоэвакуаторы с манипулятором. Манипулятор автоэвакуатор.