Добавляем HTML формы на ваш сайт

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

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

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

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

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

 <form action="nextpage.html" method="get" name="myform">
 
    <input type="text" value="my box" name="thebox" align="top"
 maxlength="25" size="40"><br>
 
    <input type="submit" value="Take a Look" align="middle">
 
 </form>

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

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

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

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

<form>
 
    <textarea cols=25 rows=6>The default value goes here.</textarea>
 
 </form>

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

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

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

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

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

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

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

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

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

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

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

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

 
 <form action="nextpage3.html" method="get" name="form2">
 
    <input type="hidden" name="hiddenvalue" value="hiddenstuff"><br>
 
    <input type="Checkbox" name="check1" value="yup" checked>
 
    <b>Checkbox 1 here</b><br><input type="Checkbox" name="check2" value="yup">
 
    <b>Checkbox 2 here</b><br><input type="Submit" value="Take a Look" align="MIDDLE">
 
 </form>

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

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

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

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

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

Код:

 <form action="nextpage3.html" method="get" name="form3">
 
    <input type="radio" name="radios" value="radio1" checked><b>This is radio button 1</b><br>
 
    <input type="radio" name="radios" value="radio2"><b>This is radio button 2</b><br>
 
    <input type="radio" name="radios" value="radio3"><b>This is radio button 3</b><br>
 
    <input type="Submit" value="Take a Look" align="MIDDLE">
 
 </form>

Форма:

При использовании выпадающего списка, нам придется окружить варианты выбора тегами <select>. Просмотрите код снизу, чтобы понять как это работает. Обратите внимание, что текст, который виден пользователю не имеет никакого отношения к значениям, передаваемым в querystring. Как всегда, передается именно value attribute.

Код:

 <form>
 
     <select name="pulldown">
 
         <option value="1">pulldown item 1</option>
 
         <option value="2">pulldown item 2</option>
 
     </select><br>
 
     <input type="Submit" value="Take a Look" align="MIDDLE">
 
 </form>

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

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

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

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

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

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

<form action="nextpage4.html" method="get" name="form3">
 
     <select name="menu" size="3" multiple>
 
         <option value="1">menu item 1</option>
 
         <option value="2">menu item 2</option>
 
         <option value="3">menu item 3</option>
 
         <option value="4">menu item 4</option>
 
     </select>
 
     <input type="image" alt="The Monkey" src="http://www.wired.com/images/archivetuff/smallmonkey.gif">
 
 </form>

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

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

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

 <form action="nextpage4.html" method="get" name="form1">
 
     <input type="Text" value="" name="thebox" size="40" maxlength="25"><br>
 
     <input type="reset" name="mybutton" value="Reset">
 
 </form>

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

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

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

Оцените, пожалуйста, эту статью:

Читать комментарии [10] на форуме.