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



Гостевой доступ к форуму из Москвы: Телефоны: +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 12 2006, 15:23
Сообщение #2


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

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



Карта сайта: нужна ли она?


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

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

Отсюда следует первое важное заключение, многократно подтвержденное практикой: "Наличие карты сайта - следствие многоуровневой системы навигации". Поэтому в данном случае целесообразность разработки карты сайта зависит именно от того, насколько сложной структурой обладает система навигации.

Многоуровневая навигация
Мы нередко встречаем веб-сайты, использующие двух-, трех- и более уровневую вложенность навигационного меню. В большинстве случаев такой подход продиктован большим объемом информации, который необходимо донести до потенциального клиента или пользователя - причем, в простой и понятной форме. Один из вариантов - разбить конкретный информационный раздел на несколько частей, присвоив им соответствующие наименования и смысловую направленность. Это второй уровень навигации. Теперь попробуем усложнить ситуацию. Допустим, у нас есть раздел "Контакты", который включает в себя еще три подраздела: "Телефоны", "Карта проезда" и "Обратная связь". Последний, в свою очередь, содержит ссылки на почтовую форму, форум и ICQ-аккаунт менеджера-консультанта. Таким образом, получается третий уровень навигации. В ряде случаев вложенность может быть гораздо больше (например, в описании товаров и/или услуг: "Товары > Программное обеспечение > Freeware > Интернет-приложения > Почта" и т.п.), что приводит к добавлению дополнительных пунктов навигационного меню.

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

Навигационная "крошка"

Присутствие в верхней части окна браузера (в видимой посетителю части экрана) гипертекстовой навигационной строки, например:
» Почта » Интернет-приложения » Freeware » Программное обеспечение » Товары


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

Дублирование верхних уровней меню и остальных разделов первого уровня

Совмещение навигационной "крошки" (возможности быстро перемещаться между уровнями навигации родительского раздела) и остальных пунктов навигационного меню первого уровня, например:

» Почта » Интернет-приложения » Freeware » Программное обеспечение » Товары

ДРУГИЕ РАЗДЕЛЫ: Услуги :: Прайс-лист :: Заказ online :: Помощь :: Контакты


Запутанная навигация
Второе (не менее важное) заключение можно сделать с помощью следующего примера. Существует некий абстрактный сайт, который содержит три раздела: "Товары", "Услуги" и "Заказ online". При определенных обстоятельствах вспомогательные подразделы, входящие в состав названных разделов первого уровня, могут пересекаться и более того - дублировать друг друга:

Раздел "Товары":
Раздел "Услуги":
Раздел "Заказ online":

» Общая информация
» Каталог товаров
» Прайс-лист
» Бланк заказа
» Общая информация
» Каталог услуг
» Прайс-лист
» Бланк заказа
» Каталог товаров и услуг
» Корзина
» Оформление заказа


При таком построении системы навигации посетитель может запутаться в предназначении тех или иных пунктов меню, схожих по смыслу, но логически относящихся к разным разделам первого уровня. Подобная запутанная структура меню, конечно, не делает чести разработчикам, однако, надо признать, что в ряде случаев такое пересечение может быть вызвано различными соображениями или требованиями, обсуждение которых находится за пределами компетенции исполнителя Интернет-проекта (например, пожелание заказчика, требование инвестора и пр.).

Отсюда можно сделать второе важное заключение относительно целесообразности присутствия карты сайта: "Наличие карты сайта - следствие запутанной системы навигации".

Обобщая сказанное выше, можно сделать следующий вывод: присутствие карты сайта может быть обусловлено двумя характерными особенностями структуры навигационного меню: многоуровневым строением и дублирующимися (пересекающимися) пунктами меню смежных разделов. В иных ситуациях карта сайта абсолютно не нужна и только отвлекает внимание посетителя, который ищет в разделе "Карта сайта" дополнительную функциональность.

Приведем простой практический пример, иллюстрирующий данное утверждение. Навигационное меню официального веб-сайта петербургской строительной компании "Экострой" содержит следующие разделы (в скобках указаны разделы второго уровня): "Услуги" ("Поставка комплектующих", "Экспертиза проекта", "Разработка проекта", "Строительно-монтажные работы", "Шеф-монтаж", "Оформить заявку"), "Фасады" ("Общая информация", "Вентилируемые фасады", "Мокрые" фасады"), "Мансарды", "Строительный магазин", "Полезная информация" ("Теплофизика", "Разное", "Интернет-ссылки"), "Вопросы и ответы". Как видно, структура меню достаточно простая, пересекающихся пунктов меню нет, уровень вложенности минимальный. Помимо этого, навигация построена по технологии Dynamic HTML и представляет собой открывающиеся перечни ссылок при наведении курсора на раздел первого уровня. Также предусмотрено постоянное присутствие навигационной "крошки". Все это позволяет посетителю быстро перемещаться по всем пунктам меню из любой точки сайта. Однако, несмотря на высокую функциональность и гибкость навигационного меню, на сайте есть раздел "Карта сайта", содержание которого на 95% повторяет совокупность пунктов меню всех вместе взятых разделов, доступных пользователю без перезагрузки страниц проекта (оставшиеся 5% частично компенсируют недостаточность карты сайта некими дополнениями отдельно взятых разделов). В целом, реализация карты сайта выполнена на чрезвычайно низком уровне и не может удовлетворять потребности посетителей в функциональности (согласно статистике сервера, "Карта сайта" входит в тройку наиболее посещаемых разделов).

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




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


--------------------
Самые лучшие отзывы обо мне : [лопатой мозги вправить ], [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   HTML форма как средство достижения интерактивности...   Dec 11 2006, 09:53
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
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


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

 

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