Здравствуйте, гость ( Вход | Регистрация )



Гостевой доступ к форуму из Москвы: Телефоны: +7(495)7859696,7376201,7376233,7868796,7390241 Login: demo Password: demo
> Веб Мастер, Вырезки
Metallica
сообщение Dec 9 2006, 13:16
Сообщение #1


Oбиженный жизнью заморыш
Group Icon

Группа: Administrators
Сообщений: 2 136
Регистрация: 4-August 06
Из: Матрица
Пользователь №: 504
Имя: TONY MONTANO
Настроение: KILL EM ALL
Заходит на форум с гостевика или полного инета.



Создаём HTML-формы

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

Тэги <form></form>

Всё описание HTML-формы располагается внутри тэгов <form></form>. Закрывающий тэг </form> никогда не несёт в себе какой-либо информации, а вот открывающий заслуживает дополнительного рассмотрения. Рассмотрим синтаксис этого тэга: <form method="метод" action="имя_сценария"> Атрибут Method может принимать значения GET или POST. А атрибут action представляет собой URL какого-либо сценария, выполняющего действия в соответствии с заполненной формой.

Тэг <input> и его атрибуты

Тэг <input> имеет несколько атрибутов. Вот основные из них: <input type="тип поля" value="значение" name="имя"> Где name приримает любое уникальное имя в пределах одной формы; любое поле ввода должно иметь имя, для последующего обрабатывания данных из этого поля сценарием. Value - это значение по умолчанию данного поля. Атрибут type может принимать значения text, hidden, password, checkbox, radio, reset, submit. Остановимся на каждом из них поподробнее. После описания данных типов, мы рассмотрим всё на примерах.

Text - указывает браузеру, что нужно отобразить поле ввода. Значение атрибута value здесь будет указывать первоначальное значение данного поля. Также здесь могут присутствовать два дополнительных атрибута, это size и maxlenght. Size определяет длину поля, а maxleght задаёт максимальное количество символов, которое может ввести пользователь.

Hidden - этот тип текстового поля браузер на отображает. Нужен он для скрытия от посетителя каких-либо данных.

Password - этот тип поля отображается аналогично текстовому, только все введённые в нём символы будут закрыты звёздочками, для того, чтобы никто не мог подсмотреть пароль, вводимый вами.

Checkbox - браузер отображает этот тип поля квадратом, в котором можно поставить флажок. По умолчанию value данного поля стоит ON, но если поставить флажок в это поле, то value примет значение checked.

Radio - несколько похоже на checkbox, но только одно из нескольких полей radio, в отличии от checkbox, может быть включено.

Submit - отображает кнопку, при нажатии на которую все данные из формы отправляются сценарию, указанному в атрибуте action тэга <form>.

Reset - при нажатии на эту кнопку, вся введённая информация в форму онулируется.

Тэги <textarea></textarea>

Тэг <textarea> определяет многострочную область ввода. Этот тэг имеет также несколько атрибутов. Вот пример: <textarea name="имя" rows="10" cols="20">Этот текст будет находится в области ввода, данного типа, пользователь может изменить этот текст</textarea> Атрибуты rows и cols определяют высоту и длину соответственно. "имя" - уникальное имя в пределах одной формы.

Тэги <select></select>

Эти тэги создают список, каждый из вариантов которого задаётся тэгом <option>. Тэг <select> может нести в себе атрибуты size, name и multiple. Думаю с size и name всё понятно, а вот c multiple, наверное не очень. Итак, этот атрибут задаёт режим при котором пользователь будет выбирать что-то из списка. Если этот атрибут присутствует, то пользователь может выбрать несколько значений из списка, а если же он опущен, то можно выбрать только одно значение.

Чтобы всё было более понятно, давайте рассмотрим всё на примерах:

Создаём страницу и пишем в неё данный код:

<html>
<head><title>Анкета</title>
</head>
<body>
<h3 align=center>Анкета</h3>

<form action=script.php method=post>

<input type=hidden name=hidden value="Это скрытый текст">
<b>Введите пожалуйста пороль:</b>
<input name=pass type=password>
<b>Заполните следующие данные пожалуйста:</b><br>
Фамилия <input type=text size=14 name=fam><br>
Имя<input type=text size=14 name=name><br>
Отчество<input type=text size=14 name=ot>
<b>Сколько вы имеете судимостей:</b><br>
<select>
<option>10
<option>20
<option>30
</select><p>
<b>Сколько вам лет?</b><br>
<input name=1 type=radio name=1>От 1 до 10<br>
<input name=1 type=radio name=2>От 10 до 18<br>
<input name=1 type=radio name=3>От 18 до 30<br>
<input name=1 type=radio name=4>От 30 до 50<br>
<input name=1 type=radio name=5>От 50 до 100<br>
<input name=1 type=radio name=6>От 100 до 200<br><p>
<b>Наличие хронических заболеваний:</b>
<input type=checkbox><br><p>
<b>Особые примечания:</b><br>
<textarea name=texta rows=4 cols=30>
</textarea>
<input type=submit value=Всё> <input type=reset value=заново>
</form>

</body></html>

А вот чего получится:

Анкета
Введите пароль:
Фамилия
Имя
Отчество
Количество судимостей:
102030

Сколько вам лет?
от 1 до 10
от 10 до 18
от 18 до 30
от 30 до 50
от 50 до 100
от 100 до 200


Наличие хронических заболеваний:


Особые отметки:



HTML-формы и css.

В хтмл-формах также могут активно использоваться и css. Применение css значительно украшает форму, помогая вэбмастеру максимально приблизить её внешний вид к дизайну сайта. Итак, рассмотрим это на примере. Например мы хотим создать стильную панель поиска для сайта, для этого пишем в страницу такой код:

<form method="POST" action="search.php">

Поиск по сайту: <input type="text" name="whatdoreplace" size="25" style='BORDER-RIGHT: #3E9EBB 1px solid; BORDER-TOP: #3E9EBB 1px solid; BORDER-LEFT: #3E9EBB 1px solid; COLOR: #000000; BORDER-BOTTOM: #3E9EBB 1px solid; BACKGROUND-COLOR: RED
'>
<INPUT TYPE=radio name=where value=foto >фото
<INPUT TYPE=radio name=where value=mp3>mp3


<input type="submit" value="поиск" name="search" style='BORDER-RIGHT: #3E9EBB 1px solid; BORDER-TOP: #3E9EBB 1px solid; BORDER-LEFT: #3E9EBB 1px solid; COLOR: #F1F1F1; BORDER-BOTTOM: #3E9EBB 1px solid; BACKGROUND-COLOR: RED
'></FORM>







Сообщение отредактировал Metallica - Dec 12 2006, 15:41


--------------------
Самые лучшие отзывы обо мне : [лопатой мозги вправить ], [Oбиженный жизнью заморыш],[ грубый и туповатый] , [не хватает интеллекта смотреть на мир шире. И все враги.], [озлобленный мальчик, помешанный на «членах» ] , [узколобость и шовинизм - это к имбецилам и другим болезням]
Пользователь offlineПрофайлОтправить личное сообщение
Вернуться к началу страницы
+Цитировать сообщение
 
ОтветитьСоздать новую тему
Ответов
Metallica
сообщение Dec 11 2006, 09:53
Сообщение #2


Oбиженный жизнью заморыш
Group Icon

Группа: Administrators
Сообщений: 2 136
Регистрация: 4-August 06
Из: Матрица
Пользователь №: 504
Имя: TONY MONTANO
Настроение: KILL EM ALL
Заходит на форум с гостевика или полного инета.



HTML форма как средство достижения интерактивности


В настоящее время в сети существует не мало красивых и к тому же наполненных полезной информацией страничек. Но зачастую им не хватает интерактивности. Что же мы подразумеваем под этим термином? В первую очередь - это возможность диалога с посетителями, наличие обратной связи. Ведь даже такая простая форма проявления интерактивности как анкетирование, на своем ресурсе, позволяет узнать нам мнения и пожелания посетителей, а грамотное использование полученной информации позволит улучшить свой ресурс, и как следствие увеличить количество постоянных посетителей. А уж, какие дополнительные возможности открываются с организацией форумов, гостевых книг, досок объявлений, систем поиска. И так, Вы решили сделать свой сайт интерактивным. Какими же средствами достигается интерактивность сайта? Вот об этом и пойдет речь в данной статье.

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

откуда Вы узнали о нашем ресурсе (варианты ответов: поисковая система, баннерная реклама, периодическое издание, другое);

пол (варианты ответов: мужской, женский);

возраст;

предложения по улучшению ресурса.

Теперь наступил момент расположить эти вопросы на своей страничке, для этого необходимо создать HTML форму. Вот о формах как о главном инструменте интерактивности и поговорим. Формально форма - это все то, что находиться между тэгами <FORM> и </FORM>. И что же там находиться, спросите Вы. Отвечаю, формы могут содержать практически все существующие приемы HTML разметки, включая такие виды полей форм, как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню. Но обо всем по порядку. Рассмотрим форму с нашими вопросами, вот возможный вариант HTML разметки для нашей формы:

<form action="mailto: mail@kuku.ru" method="POST"><br><br>
<b><font color="#000080">Откуда Вы узнали о данном ресурсе </font></b><br><br>
<input type="radio" value="s1" checked name="lin">поисковая система <br>
<input type="radio" name="lin" value="s2">баннерная реклама<br>
<input type="radio" name="lin" value="s3">пресса<br>
<input type="radio" name="lin" value="s4">другое<br>
<br><br><b><font color="#000080">Ваш пол</font></b><br>
<br><input type="radio" name="pol" value="p5" checked>мужской<br>
<input type="radio" name="pol" value="p6">женский<br>
<br><br><b><font color="#000080">Ваш возраст</font></b><br>
<input name="T1" size="5"><br>
<br><br><b><font color="#000080">Ваши предложения по улучшению ресурса</font></b><br>
<br><textarea rows="4" name="S1" cols="50">предложения</textarea><br>
<br><br> <br><br>
<input TYPE="SUBMIT" VALUE="отправить"> <br>
</form>

Как Вы уже поняли, форма начинается с тэга <FORM>, который имеет свои специфические атрибуты, в данном случае это: ACTION и METHOD. В атрибуте ACTION задает URL CGI скрипта, который будет обрабатывать данные формы. В нашем случае запись "mailto: mail@kuku.ru" говорит о том, что данные формы будут отправлены по электронной почте на адрес mail@kuku.ru с использованием почтовой программы установленной на компьютере посетителя. Такой способ отправки форм используется крайне редко, так как многие посетители не захотят засвечивать свой почтовый ящик. Но, учитывая отсутствие у нас на данный момент CGI скрипта, рассматриваемый вариант является единственно возможным и самым простым, если не считать возможности использования скриптов на других серверах. Об этом мы поговорим позже. Атрибут METHOD указывает на метод посылки данных форм GET или POST. При отправке данных методом GET отправляемые данные будут болтаться в адресной строке браузера, а при отправке методом POST они будут скрыты от Ваших глаз. Помимо указанных атрибутов существует также атрибут ENCTYPE, который указывает механизм, используемый для кодирования содержимого формы, по умолчанию используется /x-www-form-url-кодирование. Изменять значение данного атрибута не рекомендуется за исключением случая, когда форма используется для загрузки файлов (upload).

С заголовком кое-как разобрались. Теперь рассмотрим элементы применяемые внутри формы, а именно:

INPUT - текстовое одностроковое поле, поля пароля, переключатели, радиокнопки, кнопки установки и перезагрузки, скрытые поля, кнопки выгрузки файла, кнопки изображений и т.д.;

TEXTAREA - многострочное текстовое поле;

SELECT - меню единичного или множественного выбора.

Остановимся кратко на каждом элементе.
Текстовое одностроковое поле. Его запись в общем случае имеет вид:
<INPUT [type="text"] name="textName" value="textValue" size=число>.
Данное поле применяется очень часто, поэтому тип "text" служит для атрибута INPUT по умолчанию, его не надо каждый раз указывать. Имя поля, задаваемое атрибутом name, является обязательным. Значение поля по умолчанию задается атрибутом value. Атрибут size позволяет задать размер поля. В нашей форме текстовое поле используется для запроса возраста посетителя.

Поле ввода пароля(password).
<INPUT type="password" name="passName" size=число value="passValue">
Очень похоже на текстовое одностроковое поле, отличается лишь тем, что вместо символов в нем отображаются символы '*'. Служит для ввода пользователем пароля.

Переключатель(checkbox).
<INPUT type="checkbox" name="checkboxname" value="checkboxValue" [checked]>
Если надо что-то подписать, то текст подписи необходимо писать рядом с переключателем. Переключатель может быть сразу выбранным, если указан атрибут checked. Если value не указано, то значение по умолчанию "on". Передается только в том случае, когда выбран.

Радио-кнопка(radio).
<INPUT type="radio" name="radioName" value="radioVal1" [checked]>
Отличие радио-кнопки от checkbox в том, что их может быть несколько с одинаковым параметром name, но с разными value, из них передается только та, что выбрана. Одна из них может быть выбрана по умолчанию, для этого должен быть установлен атрибут checked. В нашей форме используется для получения ответа на вопрос: "откуда Вы узнали о нашем ресурсе?".

Кнопка (Submit).
<INPUT type="submit" name="submitName" value="Отправить Форму">
Данная кнопка, предназначена для передачи (отправки) формы. Сама не передается, а служит только для управления. Текст на ней задается атрибутом value.

Существует также возможность установить кнопку для очистки полей формы, кнопка - "Reset". При ее нажатии всем измененным элементам возвращается значение по умолчанию. Она задается следующей строкой: <INPUT type="reset" name="resetName" value="Очистить">

Часто применяемым является также текстовое многострочное поле - TEXTAREA. Вот его синтаксис:
<TEXTAREA name="textareaName" rows="число" cols="число" wrap="hard" |"soft">TextToEdit</TEXTAREA>
Размеры в строках и столбцах для этого поля задаются атрибутами rows и cols. Значения атрибута wrap "hard" и "soft" -означают соответственно мягкую или жесткую разбивку на строки (в большинстве случаев его можно не указывать). В нашей форме данное поле используется для сбора предложений посетителей.

Осталось рассмотреть последний элемент SELECT (меню единичного или множественного выбора).
<SELECT name="SelectName" size=число [multiple]>
<OPTION value="optionValue1" [selected]>Опция 1
<OPTION value="optionValue2" [selected]>Опция 2
<OPTION value="optionValue3" [selected]>Опция 3
.....
<OPTION value="optionValueN" [selected]>Опция N
</SELECT>


Данный элемент позволяет задать список, позволяющий выбрать одну или несколько опций из списка. Если атрибут multiple не указан, то создается простой выпадающий список, в котором можно выбрать только одну из опций. Его значение всегда передается, т.к. всегда хоть одно выбрано. Если указан атрибут multiple, то можно указать размер видимой части списка атрибутом size (Если опций больше появится скроллинг). И к тому же появится возможность одновременного выбора нескольких опций.

Ну, вот наша HTML форма почти готова остается только дописать в конце тэг </FORM>. Дописываем. Готово! Теперь разместим ее на нужной страничке нашего, вернее Вашего, сайта и будем ожидать ответов. Как было сказано выше, недостатком нашей формы является то, что данные посылаются с использованием почтовой программы установленной на компьютере посетителя. Что бы исправить этот недостаток можно написать свой скрипт на PHP или Perl, расположить его на своем сервере, а в атрибуте ACTION указать URL скрипта. Но если у Вас нет желания писать скрипт или Вы пользуетесь бесплатным хостингом который не позволяет Вам использовать скрипты, я посоветую воспользоваться сервисом по сбору форм на http://msform.hut.ru , там же Вы увидите пример формы позволяющей организовать прием от посетителей файлов (например фотографии).





--------------------
Самые лучшие отзывы обо мне : [лопатой мозги вправить ], [Oбиженный жизнью заморыш],[ грубый и туповатый] , [не хватает интеллекта смотреть на мир шире. И все враги.], [озлобленный мальчик, помешанный на «членах» ] , [узколобость и шовинизм - это к имбецилам и другим болезням]
Пользователь offlineПрофайлОтправить личное сообщение
Вернуться к началу страницы
+Цитировать сообщение

Сообщений в этой теме
Metallica   Веб Мастер   Dec 9 2006, 13:16
Metallica   Основы удобства пользователя на сайте. --------...   Dec 9 2006, 22:50
Metallica   Расстановка ключевых слов внутри сайта: забытые ме...   Dec 10 2006, 11:15
Metallica   Как найти лучший платный хостинг Десятки хостинг...   Dec 10 2006, 16:16
Metallica   Создание баннера в Swish 2.0 Итак, начнём с того...   Dec 10 2006, 21:47
Metallica   CHMOD Каждый дизайнер рано или поздно сталкиваетс...   Dec 10 2006, 22:37
Metallica   Небаннерные методы рекламы партнерских программ ...   Dec 11 2006, 13:36
Metallica   Выбираем платный хостинг С каждым днем платные хо...   Dec 11 2006, 19:49
Metallica   Маленькая партнёрская программа каждому Представ...   Dec 12 2006, 00:08
Metallica   С чем едят SSI? Очень часто в последнее время с...   Dec 12 2006, 11:05
Metallica   ExBB - мечта: Форум на php без использования БД ...   Dec 12 2006, 12:58
Metallica   Карта сайта: нужна ли она? Любая человеческая ...   Dec 12 2006, 15:23
Lightsinner   прочитай правила еще раз, дружок, особенно про рек...   Dec 12 2006, 15:29
Metallica   необходимое для web-дизайнера Редактор: Co...   Dec 14 2006, 10:59
interactiv   :D а мож лучше блокнотик.. а вообще ф топку ес...   Dec 14 2006, 15:18
dron   круто ты забазал, лучше скажи как мои сайты улучши...   Dec 14 2006, 15:57
Metallica   круто ты забазал, лучше скажи как мои сайты улучш...   Dec 14 2006, 17:00
PINguin   \\\круто ты забазал, лучше скажи ка...   Jan 5 2007, 02:50
DavidVox   Есть конкретные технологии веб-программирования, н...   Apr 23 2018, 02:00
Tier   Исмольник 2.0?   Apr 23 2018, 08:28
Metallica   :D откопали ))) ну а что альфа к примеру по ...   Apr 23 2018, 09:24
ismolnik   Даёшь следующий урок программирования!   May 25 2018, 12:39


ОтветитьСоздать новую тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 

- Текстовая версия Сейчас: 16th January 2021 - 04:51
 
     
Rambler's Top100 службы мониторинга серверов
Gentoo Powered Lighttpd Powered