Авторское право © WWW : Балбесов нет: Компьютерная графика
Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !
Название статьи , Опубликовано Статьи » Уроки » Веб-дизайн » Добавляем HTML формы на ваш сайт
26 июня 2009 02:34

Итак, вы решили, что пришла пора начать взаимодействовать с вашими пользователями. Вы устали от этого одностороннего движения – вы говорите, они слушают. Вы хотите реально слышать, что есть сказать у ваших пользователей. Чтобы сделать это, вам нужно будет предоставить людям способ вводить информацию. Таким образом, вам понадобится форма HTML (тем не менее, чтобы обрабатывать эту информацию вы должны будете применить какой-либо скрипт, на ко¬торый может уйти еще один урок).

Хорошая форма!

Как и все остальное в HTML, формы действительно легко освоить: просто добавьте несколько тегов в ваш любимый текстовый редактор и все готово. Вот, взгляните:

Эти теги будут служить основой каждой формы, которую вы создадите. Здесь нет ничего сложного: просто открытие и закрытие тегов

, которые содержат внутренности формы. Обратите внимание, что у открывающего тега есть три атрибута: action, method, and name. Мы поговорим про method чуть позже, а теперь давайте разберемся с двумя остальными.

Вам всегда будет нужен атрибут action. Почему? Потому что вам нужно, чтобы ваша форма делала что-либо. Сама по себе форма собирает информацию; вам понадобиться программа, которая работает внутри формы. Атрибут action укажет на скрипт, который обработает введенную информацию.

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

А теперь давайте перейдем к атрибуту method и самому простому элементу формы, неизменно популярному текстовому полю.

Простейшая форма с текстовым полем

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

А вот форма из кода показанного выше.

Вот так вот. Чтобы получилось такое текстовое поле, просто вставьте тег внутри тега

. Атрибут type, который был установлен как текстовый, как раз то, что делает эту форму текстовым полем. Также сюда включено значение, которое заполняет текстовое поле словами "my box" (пользователь может удалить эту надпись, печатая что-либо поверх ее). Атрибут size указывает ширину текстового поля на странице, а атрибут maxlength ограничивает максимальное число символов, которые может ввести пользователь. Просто попробуйте ввести 26 символов в это поле. Могу поспорить.

Если вы посмотрите на кнопку Submit, вы увидите, что тут код довольно схожий. Когда атрибут type равен submit, браузер отобразит кнопку. А текст в атрибуте value выступает названием кнопки.

Если вы хотите дать вашим пользователям больше пространства, достаточно использовать тег textarea:

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

Значение по умолчанию ставится здесь.

Теперь, когда мы изучили основы, давайте поподробнее рассмотрим открывающий тег

.

Выбор метода: Get или Post

Мы уже знаем, что атрибут формы action посылает информацию, введенную пользователем скрипту, который затем считывает ее. Есть два способа выполнить эту задачу - через "get" или "post".

Для начала давайте поговорим про get. Наверное, лучший способ объяснить, как работает get, это показать на примере. Я хочу, чтобы вы ввели какую-либо информацию в форму снизу и затем нажали кнопку Submit.

После загрузки следующей страницы, взгляните на ее адрес в вашем браузере. Вы должны заметить, что после имени страницы идет знак вопроса. Затем следует имя текстового поля ("thebox"), знак равно и текст, который вы ввели. Эта часть адреса называется querystring (строка запроса).

Итак, используя get, значения полей формы передаются в querystring в парах вида "имя=значение". Пробелы заменяются %20, каждый элемент поля отделен знаком &. Сразу после того, как вы передали информацию в querystring, CGI скрипт, JavaScript или же ASP скрипт могут ей воспользоваться.

Get используется повсеместно потому что он может предложить одну очень полезную функцию: когда пользователи сохраняют страницу в закладки они также сохраняют и querystrings. Такие сайты как Amazon используют querystring только по этой причине; таким образом, вы можете сохранить страницу, затем вернуться и купить книгу. Но это также влечет и потенциальные проблемы. В некоторых случаях вам, возможно, не захочется показывать данные передаваемые формой. В таком случае, вам придется использовать метод "post". При помощи post, информация все также может быть использована любым скриптом, которым вы пользуетесь, но она не видна пользователю и не может быть сохранена в его закладках.

Теперь, когда вы познакомились с методами, давайте закончим изучением различных видов элементов формы.

Селективные кнопки, флаговые кнопки и многое другое

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


 
 
 
    

 
    
 
    Checkbox 1 here

 
    Checkbox 2 here

... дает следующую форму:

Обратите внимание, что после того как вы нажмете Take a Look, имя и значение элемента hidden передается в querystring. Пользователи не будут знать о присутствии скрытых значений (если только они не посмотрят на исходный код страницы), и они не смогут изменять значения скрытых элементов.

Флаговые кнопки это отдельная история. Если во флаговой кнопке поставлен флажок, имя и значение чекбокса передаются в querystring. Если флажка не стоит, не передается ничего. Включите слово "checked" в элемент, чтобы флажки стояли по умолчанию.

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

В коде, приведенном снизу, обратите внимание на три элемента вида radio, и каждый из этих элементов имеет одинаковое имя (radios). В этот список можно добавить столько radio, сколько нужно. Если вы хотите, чтобы какое-либо из значений было изначально выбрано, вставьте в тег слово checked.

Код: 


 

 
    This is radio button 1

 
    This is radio button 2

 
    This is radio button 3

Форма:

При использовании выпадающего списка, нам придется окружить варианты выбора тегами

На данном этапе вы уже должны понимать большинство происходящих вещей. Вот еще несколько моментов, оставшихся нетронутыми.

Сначала, атрибут size в теге select, который указывает число вариантов, которые будут доступны в форме. Пользователь будет использовать полосу прокрутки, чтобы дойти до всех вариантов. Включая слово multiple в тег select, мы разрешаем пользователю выбирать более одного варианта, пользователю надо лишь зажать клавишу ctrl на PC или Command на Mac при выборе нескольких вариантов. Если мы не добавим слово multiple, пользователь сможет выбрать лишь один вариант за раз.

Еще несколько советов

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

Выберите предмет и нажмите на обезьянку для отправки:

Как мы поместили эту обезьяну на кнопку Submit? Что ж, вот код формы:

Видите? Просто поменяйте атрибут type с submit на image и вставьте GIF Изображение. Теперь все готово.

И наконец, если у вас очень длинная форма, и вы хотите предоставить вашим пользователям возможность очистить отмеченные ими элементы, можно добавить кнопку Reset. Если вы введете какую-либо информацию в текстовое поле снизу, а затем кликните на кнопку Reset, вы увидите, как это работает

Вот код этой формы:

Вот в общем-то и все. Теперб вы знаете практически все что нужно, чтобы добавить форму на ваш сайт. Что еще? Еще вам нужно что-нибудь на другом конце, что обрабатывало бы информацию, поступающую вам.

Вот и все ребята! Теперь это лишь вопрос времени, прежде чем пользователи потянутся и коснутся вас через ваш веб-сайт.

Источник статьи: www.webmonkey.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

URL / WWW
http://balbesof.net/article/a-126.html