Wmaster - лучший журнал для вебмастеров июнь 2003 [006]
   на главную     web mastering 
   в номере    

Автор: Левин Константин
Источник:
www.ritmon.narod.ru 
Создаём HTML-формы  

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

Тэги <form></form>

Всё описание HTML-формы располагается внутри тэгов <form></form>.  Закрывающий тэг </form> никогда не несёт в себе какой-либо информации, а вот открывающий заслуживает дополнительного рассмотрения. Рассмотрим синтаксис этого тэга: <form method="метод" action="имя_сценария"> Атрибут Method может принимать значения GET или POST. А атрибут action представляет собой URL  какого-либо сценария, выполняющего действия в соответствии с заполненной формой.

Тэг <input> и его атрибуты

Тэг <input> имеет несколько атрибутов. Вот основные из них: <input type="тип поля" value="значение" name="имя"> Где name приримает любое уникальное имя в пределах одной формы; любое поле ввода должно иметь имя, для последующего обрабатывания данных из этого поля сценарием. Value - это значение по умолчанию данного поля. Атрибут type может принимать значения text, hidden, password, checkbox, radio, reset, submit. Остановимся на каждом из них поподробнее. После описания данных типов, мы рассмотрим всё на примерах.

Text - указывает браузеру, что нужно отобразить поле ввода. Значение атрибута value здесь будет указывать первоначальное значение данного поля. Также здесь могут присутствовать два дополнительных атрибута, это size и maxlenght. Size определяет длину поля, а maxleght задаёт максимальное количество символов, которое может ввести пользователь.

Hidden - этот тип текстового поля браузер на отображает. Нужен он для скрытия от посетителя каких-либо данных.

Password - этот тип поля отображается аналогично текстовому, только все введённые в нём символы будут закрыты звёздочками, для того, чтобы никто не мог подсмотреть пароль, вводимый вами.

Checkbox - браузер отображает этот тип поля квадратом, в котором можно поставить флажок. По умолчанию value данного поля стоит ON, но если поставить флажок в это поле, то value примет значение checked.

Radio - несколько похоже на checkbox, но только одно из нескольких полей radio, в отличии от checkbox, может быть включено.

Submit - отображает кнопку, при нажатии на которую все данные из формы отправляются сценарию, указанному в атрибуте action тэга <form>.

Reset - при нажатии на эту кнопку, вся введённая информация в форму онулируется.

Тэги <textarea></textarea>

Тэг <textarea> определяет многострочную область ввода. Этот тэг имеет также несколько атрибутов. Вот пример: <textarea name="имя" rows="10" cols="20">Этот текст будет находится в области ввода, данного типа, пользователь может изменить этот текст</textarea> Атрибуты rows и cols определяют высоту и длину соответственно. "имя" - уникальное имя в пределах одной формы.

Тэги <select></select>

Эти тэги создают список, каждый из вариантов которого задаётся тэгом <option>. Тэг <select> может нести в себе атрибуты size, name и multiple. Думаю с size и name всё понятно, а вот c multiple, наверное не очень. Итак, этот атрибут задаёт режим при котором пользователь будет выбирать что-то из списка. Если этот атрибут присутствует, то пользователь может выбрать несколько значений из списка, а если же он опущен,  то можно выбрать только одно значение.

Чтобы всё было более понятно, давайте рассмотрим всё на примерах:

Создаём страницу и пишем в неё данный код:

<html>
<head><title>Анкета</title>
</head>
<body>
<h3 align=center>Анкета</h3>

<form action=script.php method=post>

<input type=hidden name=hidden value="Это скрытый текст">
<b>Введите пожалуйста пороль:</b>
<input name=pass type=password>
<b>Заполните следующие данные пожалуйста:</b><br>
Фамилия <input type=text size=14 name=fam><br>
Имя<input type=text size=14 name=name><br>
Отчество<input type=text size=14 name=ot>
<b>Сколько вы имеете судимостей:</b><br>
<select>
<option>10
<option>20
<option>30
</select><p>
<b>Сколько вам лет?</b><br>
<input name=1 type=radio name=1>От 1 до 10<br>
<input name=1 type=radio name=2>От 10 до 18<br>
<input name=1 type=radio name=3>От 18 до 30<br>
<input name=1 type=radio name=4>От 30 до 50<br>
<input name=1 type=radio name=5>От 50 до 100<br>
<input name=1 type=radio name=6>От 100 до 200<br><p>
<b>Наличие хронических заболеваний:</b>
<input type=checkbox><br><p>
<b>Особые примечания:</b><br>
<textarea name=texta rows=4 cols=30>
</textarea>
<input type=submit value=Всё> <input type=reset value=заново>
</form>

</body></html>

А вот чего получится:

Анкета

Введите пароль:
Фамилия
Имя
Отчество
Количество судимостей:

Сколько вам лет?
от 1 до 10
от 10 до 18
от 18 до 30
от 30 до 50
от 50 до 100
от 100 до 200

Наличие хронических заболеваний:

Особые отметки:

HTML-формы и css.

В хтмл-формах также могут активно использоваться и css. Применение css значительно украшает форму, помогая вэбмастеру максимально приблизить её внешний вид к дизайну сайта. Итак, рассмотрим это на примере. Например мы хотим создать стильную панель поиска для сайта, для этого пишем в страницу такой код:

<form method="POST" action="search.php">

Поиск по сайту: <input type="text" name="whatdoreplace" size="25" style='BORDER-RIGHT: #3E9EBB 1px solid; BORDER-TOP: #3E9EBB 1px solid; BORDER-LEFT: #3E9EBB 1px solid; COLOR: #000000; BORDER-BOTTOM: #3E9EBB 1px solid; BACKGROUND-COLOR: RED
'>
<INPUT TYPE=radio name=where value=foto >фото
<INPUT TYPE=radio name=where value=mp3>mp3


<input type="submit" value="поиск" name="search" style='BORDER-RIGHT: #3E9EBB 1px solid; BORDER-TOP: #3E9EBB 1px solid; BORDER-LEFT: #3E9EBB 1px solid; COLOR: #F1F1F1; BORDER-BOTTOM: #3E9EBB 1px solid; BACKGROUND-COLOR: RED
'></FORM>


  А вот результат:

Поиск по сайту: фото mp3

Можете поэкспериментировать и сделать лучше -  ваше право, я показал только принцип использования css в HTML-формах.На этом у меня всё, и, если хотите, заходите на мой сайт, где изложены ещё и другие статьи.



  Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.wmaster.ru и все имена, ссылки авторов обязательны.
© Copyright Wmaster Design Group  2002. 

 
    
      Главная
     Авторам
     Журнал Protoplex
     Форум
      Рассылки
     WWW.DESIGN.ST/udio
 
    
   Природные цвета на web-сайте

 
    
    Карта сайта: нужна ли она?

    Больной вопрос – раскрутка сайта

    Keywords для начинающих

    Apache http server
    - тестируем сайт на дому.


   С чем едят SSI?

   Создаём HTML-формы

   Обмен ссылками - как выбирать сайты

    Рассылка как способ раскрутки

    Эффект буквицы

 
    
    CGI-скрипты на C++

    Раскрутка сайта, поисковики и...
    mod_rewrite


   Пишем перекодировщик translita
    в кириллицу и обратно на PHP.


 
    
    Ключевые запросы в поисковых
    системах на основе статистики
    Ру-нета


    Зачем нужна регистрация
    в каталогах через 1ps.ru


    Веб-хостинг: кто, где,
    когда и почему


    Google и тематика сайта