Ступенька 48-ая

Формы.

Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты.

Есть два варианта изучения форм: 1 - рассмотреть все элементы форм подряд, 2 - рассмотреть создание форм на конкретных примерах. Мы с вами пойдем по второму пути и начнем с такой вот формы:

В данной форме присутствуют следующие элементы: поле для ввода некой информации (имя), поле для ввода текста (комментарий), кнопка отправки и кнопка сброса информации.

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

<form action="mailto:[email protected]"> </form>

Теперь введем в эту конструкцию элементы формы. Многие элементы формы создаются при помощи тега <INPUT>. Тип элемента мы определяем атрибутами этого тега.

Итак, создадим поле для ввода некой информации, в нашем случае имени человека, заполняющего форму.

<form action="mailto:[email protected]"> <input type=text name=firstname> </form>

Итак, тег <INPUT>, как мы знаем, создает элемент формы. Какой именно элемент - мы определили при помощи атрибута type, задав ему значение text. Type=text - создает элемент для ввода текста из одной строки. Вот такой:

Начало формы   Конец формы

Name - имя элемента, обязательный атрибут.

Кроме обязательных атрибутов type и name, элемент формы может иметь и другие полезные атрибуты, для поля ввода текста (и не только него) это value - значение по умолчанию, size - длинна поля для ввода текста (измеряется в печатных символах, по умолчанию = 20), maxlength - определяет максимальное число символов, вводимых пользователем в поле формы.

<form action="mailto:[email protected]"> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"> </form>

Все это выглядит вот так:

Начало формы   Конец формы

Итак, поле стало длиннее, т.к. мы ввели для него size="40". Пользователь не сможет напечатать в этом поле больше 20-ти символов (maxlength="20"), а value подсказывает для непонятливых, что именно нужно ввести в данном поле. Вообще-то для поля ввода текста value устанавливать необязательно, даже не желательно, некоторых посетителей раздражает необходимость стирать информацию, установленную вами по умолчанию.

Теперь введем в нашу форму следующий элемент: поле для ввода информации, комментариев.

Начало формы Конец формы

Такое поле вводится при помощи тега <TEXTAREA></TEXTAREA>. <TEXTAREA> - создает элемент для многострочного ввода текста:

<form action="mailto:[email protected]"> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> <textarea name="comments"></textarea> </form>

Разберемся: name - как вы уже знаете, обязательный атрибут, поэтому мы его ввели (куда бы мы делись). Чтобы расположить элементы формы друг под другом, мы ввели уже знакомый вам тег <br>. Вообще, как располагаются элементы формы относительно друг друга вы можете определять уже при помощи знакомых вам тегов и атрибутов. Используйте их, не стесняйтесь. Хотите - можете расположить форму в таблице, где каждый элемент формы будет находится в отдельной ячейке. Хотите введите поясняющий текст с картинками (или без):

<form action="mailto:[email protected]"> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea name="comments"></textarea> </form>

Вот, что получим:

Начало формы Ваше имя: Ваш комментарий: Конец формы

Но мы немного отвлеклись, а ведь мы еще не договорили о <TEXTAREA> и его атрибутах. Что мы можем с ним сделать? Указать высоту поля (rows = количество строк), указать ширину поля (cols = количество печатных символов в строке), ввести некий текст, который будет отображен в форме (<TEXTAREA>текст по умолчанию</TEXTAREA>).

<form action="mailto:[email protected]"> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea> </form>

Результат:

Начало формы Ваше имя: Ваш комментарий: Конец формы

Итак, часть работы по созданию нашей формы мы проделали, осталось ввести кнопки, а то не порядок, когда и нажать не на что:)

В нашу форму мы будем вводить два типа кнопок: кнопку отправки и кнопку сброса. Есть еще и третий тип кнопок, для которых спецификацией по умолчанию значение не определено. Какое событие происходит при нажатии на такую кнопку - определяет создатель формы при помощи какого-либо скрипта. Этот тип кнопки мы с вами рассматривать не будем, если вы увлечетесь программированием или кодингом серьезно - то, как я полагаю, вы сами разберетесь, что к чему с этим третьим типом кнопки. Для создания типичных форм - он вам не нужен.

Итак, кнопка для отправки информации (к вам на е-майл или к скрипту на обработку) создается при помощи уже знакомого вам тега <INPUT> и его атрибута type.

<form action="mailto:[email protected]"> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit> </form>

Результат:

Начало формы Ваше имя: Ваш комментарий: Конец формы

Как вы видите, для кнопок атрибут name не обязателен, поэтому мы его не вводим.

Кнопка сброса информации создается аналогично. Только для type мы вводим не значение submit, а reset:

<form action="mailto:[email protected]"> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit> <input type=reset> </form>

Результат:

Начало формы Ваше имя: Ваш комментарий: Конец формы

Стандартные надписи на копках мы можете заменить на свои при помощи уже знакомого вам атрибута value:

<form action="mailto:[email protected]"> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit value="ОК"> <input type=reset value="Отмена"> </form>

Результат:

Начало формы Ваше имя: Ваш комментарий: Конец формы

Лирическое отступление: многие читатели справшивают меня, а как изменить вид кнопок или полей, т.е., например, сделать кнопку оранжевого цвета. Отвечаю: при помощи CSS. Что это такое и с чем его едят мы с вами рассматривали. Поскольку CSS - технология не имеющая к HTML отношения, то в учебнике я не буду рассматривать конкретный код изменения цвета кнопок и полей формы, однако, вы можете найти учебник по CSS и освоить эту технологию, в том числе понять, а как же сделать кнопки оранжевыми:)

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

<form action="mailto:[email protected]" method=post> Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit value="ОК"> <input type=reset value="Отмена"> </form>

Method - определяет метод отправки данных из формы (к скрипту или на почтовый сервер). Возможные значения: get или post. Подробнее о method и его значениях, о разнице между ними, мы поговорим в следующей главе. А сейчас просто укажем для нашей формы method=post, и закончим наш урок, имея на руках готовую форму, содержимое которой, после ее заполнения пользователем и нажатием на кнопку отправки (ОК), будет отослано вам на е-майл.

Дата добавления: 2014-12-27