HighStar


Формы

Так что же это вообще за штука такая, формы? Скажу вам сразу – формы они разными бывают. Я бы даже сказала нескольких типов и можно идти к ним разными путями. Итак:

А теперь вопрос на засыпку. Какой тег нужен для формы? Чтобы было написано английскими буковками, а понятно было и по-русски? Ну? Кто тут самый умный? Ну, конечно же! Этот тег <FORM>, который, как и положено серьезному тегу имеет парный, закрывающийся тег </FORM>. Вот между этими тегами мы и будем рисовать разные формочки.

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

Для строительства форм могут использоваться три тега: <TEXTAREA>, <SELECT> и <INPUT>. Все они должны иметь обязательный атрибут NAME, определяющий характер информации. Рассмотрим все эти теги поближе.

Textarea

TEXTAREA - определяет поле, в которое посетитель может вводить какую-то информацию.

Чтобы построить такое поле, нужны два уже давным-давно известных нам атрибута Rows, который определяет высоту этого поля (говоря проще - число строк), а также атрибуть Cols, который отвечает за ширину этого поля (длину строки), ну и атрибут Name, о котором я упомянула чуть выше.

А вот и первая наша форма с использованием поля:

<FORM>
<TEXTAREA name="comments" rows=5 cols=60>
</TEXTAREA>
</FORM>

И вот что получилось:

Можно еще ввести какой-то текст по умолчанию, чтобы не голое поле было, а подсказка что там писать, ну типа этого:

<FORM>
<TEXTAREA name="comments" rows=5 cols=60>
Напишите тут какая я красивая
</TEXTAREA>
</FORM>

И будьте уверены, ваши посетители поймут намек и напишут что они думают по этому поводу:

Так, с полями разобрались, идем дальше.

Select

SELECT - благодаря этому тегу можно выбрать какой-то один пунктик из нескольких. У этого тега имеются в наличии следующие атрибуты:

А вот и примерчики:

<FORM>
  <SELECT name="krasota">
    <OPTION selected value="Красивая">Красивая
    <OPTION selected value="Так себе">Так себе
    <OPTION selected value="Могла быть и получше">Могла быть и получше
    <OPTION selected value="Хуже некуда">Хуже некуда
  <OPTION selected value="Страшнее смерти">Страшнее смерти
  </SELECT>
</FORM>

Как видите, я не указала тут размер SIZE, а потому размер окошка получился высотой в одну строчку, что, в прочем, не мешает сделать пользователю правильный выбор!

И если он нажмет на стрелочку, то может узнать, какой же у него есть выбор, который не так уж и страшен!

А теперь побалуемся с размерами. Укажем размер size=4:

<FORM>
  <SELECT name="krasota" size=4>
    <OPTION selected value="Красивая">Красивая
    <OPTION selected value="Так себе">Так себе
    <OPTION selected value="Могла быть и получше">Могла быть и получше
    <OPTION selected value="Хуже некуда">Хуже некуда
  <OPTION selected value="Страшнее смерти">Страшнее смерти
  </SELECT>
</FORM>

Как видим, окошко удлинилось до четырех строчек, недостающая опция (а по мне так ее лучше вообще б не было) - оказывается скрытой за полосой прокрутки:

Input

INPUT - ответственен за некоторые функции, такие, как например: ввод только одной строчки информации, установка и сброс флажков, нажатие кнопок для отправки формы и выбор переключателя.

У этого тега есть атрибуты: Name, Size, Maxlenght (максимальное число символов, которое можно ввести в поле), Value, Checked (включенный по умолчанию флажок или переключатель) и Type, о котором сейчас поговорим поподробней.

Input может принимать значения: Text, Password, Checkbox, Radio, Reset и Submit

А теперь по примерчику на каждое значение.

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

Action

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

<FORM action="mailto:info@dikarka.ru">
  <h4>Отправьте письмо!</h4>
    <TEXTAREA name="comments" rows=5 cols=30>
      Напишите тут какая я красивая
    </TEXTAREA> <br><br>
    <SELECT name="krasota" size=4>
      <OPTION selected value="Красивая">Красивая
      <OPTION selected value="Так себе">Так себе
      <OPTION selected value="Могла быть и получше">Могла быть и получше
      <OPTION selected value="Хуже некуда">Хуже некуда
      <OPTION selected value="Страшнее смерти">Страшнее смерти
    </SELECT>
<br><br>
  <B>Введите ваше имя и фамилию: <br>
    <INPUT TYPE="text" NAME="family" SIZE="20" MAXLENGTH="25"> <br>
      Введите секретное слово: <br>
    <INPUT TYPE="password" NAME="secret" SIZE="15" MAXLENGTH="20"> <br>
    <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1">
      Вы хотите грабить банк <br>
    <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2">
      Вы хотите грабить награбленное <br>
    <INPUT TYPE="checkbox" NAME="checkbox3" VALUE="checkbox_value3" CHECKED>
      Вы - честный человек и этим все сказано! <br><br>
    <INPUT TYPE="reset" VALUE="А теперь сотри что написал!"> <br><br>
    <INPUT TYPE=image NAME=name src="send.jpg">
</FORM>

И вот что мы увидим в браузере:

Отправьте письмо!





Введите ваше имя и фамилию:

Введите секретное слово:

Вы хотите грабить банк
Вы хотите грабить награбленное
Вы - честный человек и этим все сказано!



Все вроде понятно кроме того, как все это использовать, да? Так вот она - грусть. Обрабатывается это все программой GGI, которая никак не входит в рассмотрение этого урока. С помощюью протокола HTTP передаются данные на сервер, там они обрабатываются с помощью программы GGI.

Ну а я, чтобы вас как-то утешить сообщу как можно данные прислать на ваш почтовый ящик. Обратите внимание на строчку:

FORM action="mailto:info@dikarka.ru"

Замените приведенный электронный адрес своим и будьте уверены, что все, что о вас подумали придет аккуратно в ваш почтовый ящик. Однако, если почтовая программа клиента не настроена должным образом, то и тут она не сработает.

Вот на этой грустной ноте позвольте и откланяться до следующего урока.