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

Ввод данных пользователем в формы HTML

Группы элементов формы

Неплохо бы было еще логически объединить то, что связано со сведениями о пользователе, и то, что связано с его мнением. Для такого группирования элементов форм в HTML 4.0 был введет тег <FIELDSET>. Все, что нахо дится между ним и его закрывающим тегом </FIELDSET>, будет обведено в рамку и озаглавлено так, как указано в теге <LEGEND>. Теги <FIELDSET> и <LEGEND> поддерживаются пока только в Internet Explorer версии 4 и выше, а браузер Netscape начал поддерживать их только в шестой версии. Кроме того, элементы <FIELDSET> пока не очень хорошо позиционируются на веб-страницах. Как вы увидите в следующем примере, для корректного центрирования их на странице (в Internet Explorer 5) нам пришлось поместить всю форму в центрированную таблицу и, кроме того, отдельно центрировать то, что расположено между каждой парой тегов <FIELDSET> и </FIELDSET>.

Тег <FIELDSET> можно употребить следующим образом:

<FIELDSET TITLE="Сведения о клиенте">
    <LEGEND ALIGN="left">Расскажите о себе</LEGEND>

После этого можно поместить несколько элементов формы и поставить закрывающий тег </FIELDSET>. В браузере Internet Explorer значение атрибута TITLE= выводится в качестве всплывающей подсказки при наведении мыши на содержимое элемента <FIELDSET>. Кстати, это относится также и к другим тегам, которые могут иметь атрибут TITLE=. Можно, например, установить его даже у элемента <BODY>. А то, что находится между тегами <LEGEND> и </LEGEND>, будет вынесено в заголовок рамки.

Аналогично, давайте создадим рамку для той части формы, в которую пользователь вводит свое мнение:

<FIELDSET TITLE="Ваше мнение">
    <LEGEND ALIGN=left>Ваше мнение</LEGEND>

Теперь давайте предоставим пользователю возможность выбора между вводом мнения в текстовое поле и указанием имени файла, в котором он это мнение описывает. Для указания имени файла, в принципе, подошло бы и обычное однострочное текстовое поле. Однако оно имело бы один недостаток: вводить имя файла пользователю приходилось бы только вручную.

Этот недостаток можно устранить, используя специальный тип тега <INPUT>. Если в этом теге установить атрибут TYPE="file", то пользователь увидит на экране текстовое поле для ввода имени файла, а рядом с ним будет расположена кнопка, при нажатии на которую откроется стандартное окно выбора файла. Имя выбранного файла будет автоматически введено в текстовое поле. Можно написать, например, так:

<LABEL FOR="Opinion-File">Введите имя файла с описанием вашего мнения:</LABEL>
<BR>
<INPUT TYPE="file" NAME="Opinion-File" SIZE="30">

Как видите, с помощью атрибута SIZE= здесь также можете задать ширину текстового поля.

Давайте посмотрим, что у нас получается в целом (как и в прошлый раз, мы приводим текст только для левой части страницы, все остальное остается прежним).

<DIV CLASS="lft">
    <H1>Ваш отзыв о наших услугах</H1>
    <DIV ALIGN="center">
        <TABLE WIDTH="75%">
            <TR>
                <TD>
                    <FORM ACTION="http://cgi.lentyay.corn/guest.cgi" METHOD="post">
                        <FIELDSET TITLE="Сведения о клиенте">
                            <LEGEND ALIGN="left">Расскажите о себе</LEGEND>
                            <DIV ALIGN="center">
                                <LABEL FOR="Name">Ваше имя:</LABEL>
                                <INPUT TYPE="text" NAME="Name" VALUE="АНОНИМ" SIZE="30">
                                <BR>
                                <BR>
                                <LABEL FOR="Age">Ваш возраст:</LABEL>
                                <SELECT NAME="Age" SIZE="1">
                                    <OPTION VALUE="10">Менее 20
                                        <OPTION VALUE="20">20&ndash;30
                                            <OPTION VALUE="30">30&ndash;40
                                                <OPTION VALUE="40">40&ndash;50
                                                    <OPTION VALUE="50">50&ndash;60
                                                        <OPTION VALUE="60">более 60</SELECT>
                                <BR>
                                <BR>
                                <LABEL FOR="Sex">Ваш пол:</LABEL>
                                <INPUT TYPE="radio" NAME="Sex" VALUE="M">Мужской
                                <INPUT TYPE="radio" NAME="Sex" VALUE="F">Женский
                                <BR>
                                <BR>
                                <LABEL FOR="Interestsl">Ваши интересы:
                                    <BR>
                                </LABEL>
                                <INPUT TYPE="checkbox" NAME="Interests1" VALUE=" Computers ">Компьютеры
                                <INPUT TYPE="checkbox" NAME="Interests2" VALUE="Sports">Спорт
                                <INPUT TYPE="checkbox" NAME="Interests3" VALUE="Art">Искусство
                                <INPUT TYPE="checkbox" NAME="Interests4" VALUE="Science">Наука
                            </DIV>
                        </FIELDSET>
                        <BR>
                        <FIELDSET TITLE="Ваше мнение">
                            <LEGEND ALIGN="left">Ваше мнение</LEGEND>
                            <DIV ALIGN="center">
                                <LABEL FOR="Option-File">Введите имя файла с описанием вашего мнения:</LABEL>
                                <BR>
                                <INPUT TYPE="file" NAME="Opinion-File" SIZE="30">
                                <BR>
                                <BR>
                                <LABEL FOR="Opinion-Text">Или просто выскажите свое мнение прямо здесь:</LABEL>
                                <BR>
                                <TEXTAREA COLS="30" ROWS="4" NAME="Opinion-Text" STYLE="vertical-align: middle;"></TEXTAREA>
                            </DIV>
                        </FIELDSET>
                        <BR>
                        <DIV ALIGN="center">
                            <INPUT TYPE="submit" VALUE="Отправить">
                            <INPUT TYPE="reset" VALUE="Очистить форму">
                        </DIV>
                    </FORM>
                </TD>
            </TR>
        </TABLE>
    </DIV>
</DIV>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.