Создание форм на Web
advertisement
Создание форм на Web-страницах Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты. Рассмотрим создание форм на конкретных примерах. Однако сначала вспомним с чего собственно начинается сама HTML- страничка. 1. Откройте БЛОКНОТ и создайте файл forma.html 2. В этом фале создайте структуру HTML документа: 3. В дальнейшей части урока все предлагаемые коды записываются в теле документа, т.е. между тегами <body> код </body> 4. Применив тег <title>, задайте своей страничке название «ФОРМА» 5. Далее постепенно добавляя элементы кода, выделенные жирным шрифтом, создайте следующие формы Форма №1 Тренировочная Начнем с такой вот формы: В данной форме присутствуют следующие элементы: поле для ввода некой информации (имя), поле для ввода текста (комментарий), кнопка отправки и кнопка сброса информации. Любая форма в HTML-документе объявляется тегом <form> и им же закрывается </form> Теперь введем в эту конструкцию элементы формы. Многие элементы формы создаются при помощи тега <INPUT>. Тип элемента мы определяем атрибутами этого тега. Итак, создадим поле для ввода некой информации, в нашем случае имени человека, заполняющего форму. (1) Чтобы наш посетитель мог отправить нам свой отзыв, поэтому мы укажем в этой форме, чтобы данные из нее отправлялись на наш е-майл, делается это с помощью атрибута тега <form> — action (см. скриншот 1). Итак, тег <INPUT>, как мы знаем, создает элемент формы. Какой именно элемент мы определили при помощи атрибута type, задав ему значение text. Type=text создает элемент для ввода текста из одной строки. Вот такой: Name - имя элемента, обязательный атрибут. Кроме обязательных атрибутов type и name, элемент формы может иметь и другие полезные атрибуты, для поля ввода текста (и не только него) это value - значение по умолчанию, size - длинна поля для ввода текста (измеряется в печатных символах, по умолчанию = 20), maxlength - определяет максимальное число символов, вводимых пользователем в поле формы Итак, поле стало длиннее, т.к. мы ввели для него size="40". Пользователь не сможет напечатать в этом поле больше 20-ти символов (maxlength="20"), а value подсказывает для непонятливых, что именно нужно ввести в данном поле. Вообще-то для поля ввода текста value устанавливать необязательно, даже не желательно, некоторых посетителей раздражает необходимость стирать информацию, установленную вами по умолчанию. Теперь введем в нашу форму следующий элемент: поле для ввода информации, комментариев. Такое поле вводится при помощи тега <TEXTAREA></TEXTAREA>. <TEXTAREA> - создает элемент для многострочного ввода текста: Должно получиться следующее: Разберемся: name - как вы уже знаете, обязательный атрибут, поэтому мы его ввели (куда бы мы делись). Чтобы расположить элементы формы друг под другом, мы ввели уже знакомый вам тег <br>. Вообще, как располагаются элементы формы относительно друг друга вы можете определять уже при помощи знакомых вам тегов и атрибутов. Используйте их, не стесняйтесь. Хотите - можете расположить форму в таблице, где каждый элемент формы будет находится в отдельной ячейке. Хотите введите поясняющий текст с картинками (или без): Что же еще мы можем сделать с тегом <TEXTAREA>? Указать высоту поля (rows = количество строк), указать ширину поля (cols = количество печатных символов в строке), ввести некий текст, который будет отображен в форме (<TEXTAREA>текст по умолчанию</TEXTAREA>). Итак, часть работы по созданию нашей формы мы проделали, осталось ввести кнопки, а то не порядок, когда и нажать не на что :) В нашу форму мы будем вводить два типа кнопок: кнопку отправки и кнопку сброса. Есть еще и третий тип кнопок, для которых спецификацией по умолчанию значение не определено. Какое событие происходит при нажатии на такую кнопку - определяет создатель формы при помощи какого-либо скрипта. Этот тип кнопки мы с вами рассматривать не будем, если вы увлечетесь программированием или кодингом серьезно - то, как я полагаю, вы сами разберетесь, что к чему с этим третьим типом кнопки. Для создания типичных форм - он вам не нужен. Итак, кнопка для отправки информации (к вам на е-майл или к скрипту на обработку) создается при помощи уже знакомого вам тега <INPUT> и его атрибута type. Как вы видите, для кнопок атрибут name не обязателен, поэтому мы его не вводим. Кнопка сброса информации создается аналогично. Только для type мы вводим не значение submit, а reset: Стандартные надписи на копках мы можете заменить на свои при помощи уже знакомого вам атрибута value: И наконец укажем один жизненно важный атрибут (method), без которого форма не будет работать. Method - определяет метод отправки данных из формы (к скрипту или на почтовый сервер). Возможные значения: get или post. Укажем для нашей формы method=post, И вот мы имеем на руках готовую форму, содержимое которой, после ее заполнения пользователем и нажатием на кнопку отправки (ОК), будет отослано вам на е-майл.: Форма № 2 Контрольная. Создайте регистрационную форму для заполнения данными участника научной конференции:
