Объекты, скрипты и другие средства, чтобы оживить наш документ.
Ступенька 46-ая. Итак, на нашу елку (html) мы можем повесить шарики и игрушки (объекты - картинки, музыка, фильмы и т.д.), можем приладить электрические гирлянды и другую мишуру (CSS), но также мы можем внедрить в нашу елку целый инородный механизм - скрипты - которые заставят нашу елочку плясать, петь, и делать, что нам угодно. Скрипт - это некий механизм, программа, специальная программа для веб. Как объекты и CSS, скрипты не являются частью html, это другие технологии, которые мы привязываем к нашему документу при помощи специальных тэгов или их атрибутов. Скрипты (программы) бывают как простыми (выпадение нового окна без тулбаров и меню, выпадающее меню, кнопки "назад-вперед" и т.д), так и сложными (гостевая книга, счетчик, форум, голосование, чат и т.д.). Подробнее о скриптах, где их взять, как с ними обращаться, где найти учебную литературу по скриптам, и все остальное расскажет вам раздел Программирование на нашем сайте. Моя же задача в рамках данного учебника научить вас некоторым способам внедрения скриптов в наш html-документ. Итак, как и в случае с CSS код скрипта может внедряться непосредственно в код вашего html-документа при помощи специального тэга SCRIPT:
|
|
|
<html> <head> <title>Документ со скриптом</title> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> |
Атрибут type определяет тип содержимого (язык скрипта, в нашем примере указано, что будет использоваться Javascript). Однако, скрипт может быть вынесен и во внешний файл, из которого он будет подгружаться. А значит, надо указать путь к этому файлу, при помощи атрибута src:
|
|
|
<html> <head> <title>Документ со скриптом</title> <script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> |
Вы, наверное, уже обратили внимание, что из тела документа я не убрала html-код для внедрения скрипта. Это не ошибка, это может быть часть скрипта, без которой он не будет работать. Или же это может быть еще один скрипт, который мы внедрили в наш документ (т.е. в итоге получили два скрипта на один html-документ). Кроме того, для внедрения скрипта в наш html-документ, мы можем использовать специальные атрибуты, которые могут употребляться почти со всеми тэгами.
|
|
|
<html> <head> <title>Документ со скриптом</title> </head> <body> <a name="ist"></a> <a href="ist2.html#ist" onclick='open("big.html", "displayWindow1", "width=780, height=540, status=no, toolbar=no, menubar=no");'><img src="small.gif"></a> </body> </html> |
Итак, полужирным шрифтом в нашем примере выделен код скрипта, который отвечает за открытие нового окна определенных размеров без меню и тулбара при нажатии на ссылку, в которую, собственно, наш скрипт и внедрен. Скрипт внедрен в тэг <A> при помощи специального атрибута onclick - указывающего, что при одиночном нажатии на ссылку (или объект, или кнопку) - произойдет какое-то событие, какое именно, зависит от скрипта, который мы внедрили в наш документ, в нашем случае это открытие нового окна. Кроме атрибута onclick существет еще много специальных атрибутов, каких именно и с какими тэгами они употребляются вам расскажет спецификация по HTML. О скриптах и программировании вы узнаете в разделе Программирование. А о других возможностях html - на следующей ступеньке :)
Формы.
Ступенька
47-ая.
В этой главе мы начнем разговор
о формах. Каждый из вас наверняка, как
пользователь интернет, хоть раз да видел
или заполнял какую-либо форму. Вот как
она выглядит:
Не
пытайтесь нажимать на кнопки и ставить
курсор на поля формы, это картинка :)
Все вы знаете, что формы создаются
средствами html - это верно. Однако, это
служит возникновению одного большого
заблуждения: многие считают, что
достаточно научится создавать формы
средствами html, чтобы у них на сайте
появилась, например, гостевая книга -
это не верно.
Форма - это лишь
каркас. При помощи html мы лишь определяем,
что тут у нас будет поле формы, а вот тут
у нас будет кнопка, а на кнопке будет
такая надпись, и т.д. Однако, чтобы при
нажатии на кнопку формы ваше сообщение
добавилось в гостевую книгу нужна иная
технология - нужна некая программа,
скрипт, который мы должны привязать к
нашей форме.
Подробнее о скриптах
и с чем их едят вы можете почитать в
разделе Программирование
на нашем сайте. А мы же с вами будем
учиться в нашем учебнике только тому,
как размечать формы средствами html.
Формы вводятся в документ при
помощи тега <form></form>:
|
|
|
<form> </form> |
Данные из формы могут быть отправлены на обработку к какому-либо скрипту (путь к которому надо, конечно же, указать):
|
|
|
<form action="http://www.mysite.ru/cgi-bin/guestbook/"> </form> |
Или на какой-либо почтовый сервер (к вам на е-майл):
|
|
|
<form action="mailto:vasya@mail.ru"> </form> |
Как видите, пока что все просто и понятно.
|
|
Главная / Html / Учебник по Html. Ступенька 48-ая. |
|
|
|
Формы.
Ступенька 48-ая. Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты. Есть два варианта изучения форм: 1 - рассмотреть все элементы форм подряд, 2 - рассмотреть создание форм на конкретных примерах. Мы с вами пойдем по второму пути и начнем с такой вот формы: В данной форме присутствуют следующие элементы: поле для ввода некой информации (имя), поле для ввода текста (комментарий), кнопка отправки и кнопка сброса информации. Давайте представим, что наш хостер (компания, предоставившая нам место под страничку) не дает нам возможности использовать скрипты, поэтому мы не можем привязать данную форму к скрипту гостевой книги, чтобы при нажатии на кнопку отправки данные из формы сразу же добавились на наш сайт. Однако, мы хотим, чтобы наш посетитель мог отправить нам свой отзыв, поэтому мы укажем в этой форме, чтобы данные из нее отправлялись на наш е-майл, как это делать, мы уже знаем:
|
|
|
<form action="mailto:vasya@mail.ru"> </form> |
Теперь введем в эту конструкцию элементы формы. Многие элементы формы создаются при помощи тега <INPUT>. Тип элемента мы определяем атрибутами этого тега. Итак, создадим поле для ввода некой информации, в нашем случае имени человека, заполняющего форму.
|
|
|
<form action="mailto:vasya@mail.ru"> <input type=text name=firstname> </form> |
Итак, тег <INPUT>, как мы знаем, создает элемент формы. Какой именно элемент - мы определили при помощи атрибута type, задав ему значение text. Type=text - создает элемент для ввода текста из одной строки. Вот такой:
|
|
|
Начало формы
Конец формы |
Name - имя элемента, обязательный атрибут. Кроме обязательных атрибутов type и name, элемент формы может иметь и другие полезные атрибуты, для поля ввода текста (и не только него) это value - значение по умолчанию, size - длинна поля для ввода текста (измеряется в печатных символах, по умолчанию = 20), maxlength - определяет максимальное число символов, вводимых пользователем в поле формы.
|
|
|
<form action="mailto:vasya@mail.ru"> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"> </form> |
Все это выглядит вот так:
|
|
|
Начало формы
Конец формы |
Итак, поле стало длиннее, т.к. мы ввели для него size="40". Пользователь не сможет напечатать в этом поле больше 20-ти символов (maxlength="20"), а value подсказывает для непонятливых, что именно нужно ввести в данном поле. Вообще-то для поля ввода текста value устанавливать необязательно, даже не желательно, некоторых посетителей раздражает необходимость стирать информацию, установленную вами по умолчанию. Теперь введем в нашу форму следующий элемент: поле для ввода информации, комментариев.
|
|
|
Начало формы
Конец формы |
Такое поле вводится при помощи тега <TEXTAREA></TEXTAREA>. <TEXTAREA> - создает элемент для многострочного ввода текста:
|
|
|
<form action="mailto:vasya@mail.ru"> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> <textarea name="comments"></textarea> </form> |
Разберемся: name - как вы уже знаете, обязательный атрибут, поэтому мы его ввели (куда бы мы делись). Чтобы расположить элементы формы друг под другом, мы ввели уже знакомый вам тег <br>. Вообще, как располагаются элементы формы относительно друг друга вы можете определять уже при помощи знакомых вам тегов и атрибутов. Используйте их, не стесняйтесь. Хотите - можете расположить форму в таблице, где каждый элемент формы будет находится в отдельной ячейке. Хотите введите поясняющий текст с картинками (или без):
|
|
|
<form action="mailto:vasya@mail.ru"> Ваше имя:<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:vasya@mail.ru"> Ваше имя:<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:vasya@mail.ru"> Ваше имя:<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:vasya@mail.ru"> Ваше имя:<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:vasya@mail.ru"> Ваше имя:<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:vasya@mail.ru" 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, и закончим наш урок, имея на руках готовую форму, содержимое которой, после ее заполнения пользователем и нажатием на кнопку отправки (ОК), будет отослано вам на е-майл.
|
|
Главная / Html / Учебник по Html. Ступенька 49-ая. |
|
|
|
Формы.
Ступенька 49-ая. В этой главе мы будем разбираться с формой поиска, но мы не будем создавать ее с нуля, мы возьмем готовую форму и поучимся разбирать готовую форму для наших целей. Форма у нас будет не простая. Форму поиска мы возьмем с Яндекса. Эта поисковая система позволяет вам делать поиск по вашему сайту через нее, но для этого нужно, чтобы ваш сайт был зарегистрирован в Яндексе, и поисковая система уже знала все, или почти все страницы вашего сайта. Не обязательно на вашем сайте использовать форму от Яндекса, другие поисковики тоже вам дают возможность осуществлять поиск по вашему сайту через них, однако, мне милее Яндексовский поиск, если вы со мной не согласны, то потом можете зайти на сайты других поисковых систем и взять у них коды их форм. Если ваш хостер вам дает возможность устанавливать скрипты на вашем сайте, то вы можете скачать готовый скрипт с готовой формой и установить его, но мы сейчас с вами не разбираем процесс установки скрипта, а разбираем построение форм, опять же, именно поэтому форма от Яндекса как нельзя лучше подходит нам для нашего урока. Вот так наша форма выглядит:
Начало формы
Конец формы
На первый взгляд тут всего два элемента формы (кнопка и строка для ввода текста), и форма кажется простой. Однако, все несколько сложнее, чем кажется. Посмотрите на код нашей формы:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="Народные сайты"> </form> |
Не пугайтесь, конечно, как я и обещала, все немного сложнее, чем кажется на первый взгляд, но не так страшно, как вы подумали. Давайте начнем разбор формы:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> </form> |
Конечно же, начнем разбирать с основного, с тега <FORM>. Есть тег открывающий, есть тег закрывающий. Все в порядке, все понятно. Теперь посмотрим на атрибуты тега <FORM>, они нам тоже все знакомы: action - указывает куда будут отправлены на обработку данные из формы, в нашем случае action=http://www.yandex.ru:8081/yandsearch - а значит данные из формы уйдут на обработку к скрипту, который располагается на сайте поисковой системы Яндекс, а именно по адресу - http://www.yandex.ru:8081/yandsearch. Name - имя формы, обязательный атрибут. Разработчик задал имя форме - web, мы его менять не будем, чтобы не случилось ошибок при обработке формы. Method - говорит КАК будут обработаны данные из формы. В отличие от прошлой главы, в данной форме используется метод GET. Разницу между GET и POST мы рассмотрим чуть позже. Но не смотря на то, что мы откладываем разговор об атрибуте method, вам пока что в данном коде формы должно быть все ясно. Давайте разбираться дальше:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> </form> |
Этот элемент формы вам тоже знаком, type=text, а значит мы имеем дело со строкой для ввода текста. С ней тоже все в порядке, и все ее атрибуты вам знакомы: name - имя элемента (обязательно), size - размер (длинна поля), value - значение по умолчанию - не задано, но мы можем вписать что-нибудь свое для атрибута value, например, value="поиск по сайту", и последний атрибут maxlength - максимальное количество символов, которое сможет ввести ваш посетитель в поле для ввода текста. Что ж, опять ничего страшного и ничего незнакомого. Вам все должно быть понятно, поэтому перейдем к следующему элементу формы:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> </form> |
Ну, тут совсем все просто: type=submit - говорит нам, что это кнопка для отправки информации, при нажатии на которую информация уйдет на обработку к скрипту, и будет произведен поиск по заданным словам. Value - надпись на кнопке. Вот видите! А вы боялись! А мы уже с вами половину формы разобрали :) Но продолжим:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> </form> |
А вот теперь мы добрались до непонятного нам. Хотя, почему же не понятного. Раз <INPUT>, то значит это какой-то элемент формы. Name - имя элемента, уникальное, обязательное. Value - значение, type - тип элемента формы. Осталось понять, что же за тип элемента такой hidden, а это такой особый скрытый (невидимый глазу), но нужный управляющий элемент. В нашем случае мы указали для скрипта, который будет обрабатывать нашу форму, что поиск будет осуществляться по сайту http://narod.ru. Пользователю не обязательно видеть эту информацию и ему не нужно ее изменять, поэтому мы скрыли элемент. Опять же ничего сложного. Разбираемся дальше:
|
|
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch"> <input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="ETO_NAROD"> </form> |
Ну, тут уж вас не удивишь и не испугаешь совсем. Еще одно скрытое поле, которое должно содержать название вашего сайта (имя сервера). Весьма несложная форма получилась, при внимательном рассмотрении. Мы выучили с вами еще один тип элемента формы, а заодно закрепили наши знания, полученные ранее. Теперь же поговорим с вами об атрибуте method для тега <FORM>. Как я уже упоминала, атрибут method указывает, КАК будут обработанны данные из формы. Атрибут method может принимать только два значения GET и POST. Если мы указываем method=get, это значит, что action + все значения (value) элементов формы будут сплюсованы в один большой URL, и отправлены в таком виде на обработку к скрипту. Вот такой URL:
|
|
|
action?name=value&name=value&name=value. |
Давайте, рассмотрим это на конкретном примере нашей формы для поиска, первое слагаемое мы знаем: action = http://www.yandex.ru:8081/yandsearch. Второе слагаемое - это слово, которые вы введете в текстовое поле для поиска, допустим, это слово "HTML", и к тому же прибаляются значения скрытых полей форм. Значит, URL, который уйдет на обработку к скрипту будет таким:
|
|
|
http://www.yandex.ru:8081/yandsearch?text=HTML&serverurl=http://narod.ru&server_name=ETO_NAROD |
Т.е., запрос уходит ввиде URL (http://www.yandex.ru:8081/yandsearch) + "хвост". Если же вы используете метод POST, то набор данных формы включается в тело формы и в таком виде (как блок отдельной информации) отправляется на обработку к скрипту. Это уже немножко посложнее, но я полагаю, что вы это вполне освоите. По крайней мере, я надеюсь, что вы не слишком испугались и у вас хватит сил на пару последних глав о формах, где мы доразбираем оставшиеся типы элементов формы.
Формы.
Ступенька 50-ая. В этой главе мы будем создавать форму посложнее - форму опроса. Допустим, вы ведущий популярного сайта о кино. Ваш спонсор предлагает вам разместить у вас на сайте опрос, чтобы выяснить, какие фильмы и актеров предпочитают люди, которые любят смотреть кино. В качестве приза - одному из заполнивших анкету достанется путешествие в выбранную им страну. Вот такую анкету вы предложите заполнить вашим посетителям:
|
|
|
Начало формы Ф.И.О.
Вы:
Мужчина Конец формы |
Женщина
Какие
фильмы вы любите
смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные
Из
этих актеров вам больше нравится:
В
какую страну вы хотели бы поехать?
Ваш
е-майл:
В этой анкете много для вас незнакомых элементов формы, но есть и уже знакомые вам. Давайте для начала создадим их, а затем я познакомлю вас с остальными. Что мы уже знаем? Мы знаем, как форма вводится в документ:
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> </form> |
Name - обязательный элемент, имя формы. Method - как будет обрабатываться наша форма. Action - путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса. Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> <b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"> </form> |
Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля). Пока что у нас с вами получилась такая форма:
|
|
|
Начало формы Ф.И.О. Ваш е-майл: Конец формы |
Как видите, нам еще далеко до конечного результата. Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script"> <b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"><br><br> <input type=submit value="Отправить анкету"><input type=reset value="Отмена"> </form> |
Type - тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value - надписи на кнопках.
|
|
|
Начало формы Ф.И.О. Ваш е-майл: Конец формы |
Больше знакомых нам элементов в данной форме нет. Поэтому приятный процесс вспоминания проденного ранее закончен, и начинается обучение. Начнем мы с "переключателей":
|
|
|
Начало формы Вы: Мужчина Женщина Конец формы |
Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ - ИЛИ. Или он - мужчина, или она - женщина, и то и другое выбрать не получится. А теперь разберем код, который мы должны ввести в нашу форму:
|
|
|
<b>Вы:</b> Мужчина<input type=radio name="sex" value="man"> Женщина<input type=radio name="sex" value="woman"> <br><br> |
Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега <INPUT>, type для которого мы указываем radio (type=radio). Name - обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) - должно быть обязательно разным. Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках":
|
|
|
Начало формы Какие фильмы вы любите смотреть? фантастику боевики приключенческие мелодрамы документальные Конец формы |
Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ). Но давайте посмотрим код для этого элемента формы и разберемся в нем:
|
|
|
<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes"> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
Итак, как мы видим, во всем виноват знакомый нам тег <INPUT>, только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое. Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:
|
|
|
<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes" checked> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":
|
|
|
Начало формы Какие
фильмы вы любите
смотреть?
фантастику
боевики
Конец формы |
приключенческие
мелодрамы
документальные
Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое. Когда мы разобрались с "переключателями" и "флажками", перейдем к следующему незнакомому нам элементу в нашей форме:
|
|
|
Начало формы В какую страну вы хотели бы поехать? Конец формы |
Знакомьтесь, господа, это - выпадающий список. Этот весьма удобный элемент можно использовать не только в опросах для выбора чего-либо, очень часто его используют в качестве дополнительного меню на сайтах для быстрого перехода в какой-либо раздел-подраздел сайта.
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy">Италия <option value="australia">Австралия </select> <br><br> Конец формы |
Итак, выпадающий список вводится при помощи тега <SELECT></SELECT>. Каждый пункт выпадающего списка вводится при помощи тега <OPTION>. Name - мы задаем только для тега <SELECT>, и оно относится ко всему списку. Value - мы задаем для каждого тега <OPTION> (пункта списка). По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега <OPTION> выбрать другой пункт по умолчанию:
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy" selected>Италия <option value="australia">Австралия </select> <br><br> Конец формы |
Получим следующее:
|
|
|
Начало формы В какую страну вы хотели бы поехать? Конец формы |
Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега <OPTGROUP></OPTGROUP>:
|
|
|
Начало формы <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <OPTGROUP label="Европа"> <option value="italy">Италия <option value="france">Франция </OPTGROUP> <OPTGROUP label="Другие"> <option value="USA">США <option value="england">Англия <option value="australia">Австралия </OPTGROUP> </select> <br><br> Конец формы |
Результат (нажмите на список):
|
|
|
Начало формы В какую страну вы хотели бы поехать? Конец формы |
Вот и все премудрости с выпадающем списком. А значит нам в этом уроке осталось разобрать последний незнакомый нам элемент нашей формы:
|
|
|
Начало формы Из этих актеров вам больше нравится: Конец формы |
Это прокручивающийся список. Создается он также, как и выпадающий, код абсолютно идентичный, только добавляется один незаметный, но важный атрибут, который делает выпадающий список прокручивающимся:
|
|
|
<b>Из этих актеров вам больше нравится:</b><br> <select name="actor"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега <SELECT>, то выпадающий список превратится в прокручивающийся:
|
|
|
<b>Из этих актеров вам больше нравится:</b><br> <select name="actor" size="4"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
Волшебство, да и только :) Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки. Вот мы и разобрали все незнакомые вам элементы нашей формы, можете смело добавить их в код вашей формы, посмотреть, что же получилось в итоге, и точно ли получилось, а затем переходить к следующему уроку, где мы проведем последний наш разговор о формах.