Наша кнопка
Скачать красивые рипы сайтов ucoz и на заказ


Реклама на UC
]]> ]]>
Популярные статьи
Архив новостей
Декабрь 2012 (7)
Ноябрь 2012 (11)
Октябрь 2012 (7)
Сентябрь 2012 (1)
Июль 2012 (1)
Июнь 2012 (2)
 Все категории:
Опрос
Оцените новый шаблон!
 
Это интересно
]]>
загрузка...
]]>
РЕКЛАМА
]]> ]]>
ИНТЕРЕСНОЕ
ПОСЛЕДНИЕ ОТВЕТЫ С ФОРУМА

 Новые рипы сайтов, и шаблоны для ucoz. » Статьи вебмастеру » Формы HTML | Урок №2 (Уроки создания сайтов)

UCOZ-COPY.RU

Интересное

]]>
загрузка...
]]>
Распечатать

Формы HTML | Урок №2 (Уроки создания сайтов) скачать бесплатно

Формы HTML | Урок №2 (Уроки создания сайтов)

 

Для получения данных которые вводит пользователь на веб-страницах, в html используются специальные формы введенных данных. Заметьте, если вы создаёте страницу на чистом html, то использовать формы нет смысла. Формы передают данные в программы которые их обрабатывают, в нашем случае эти программы будут создаваться на языке программирования php. При работе с формами, вам как php программисту, потребуется получать информацию из html форм, а это значит что вам очень важно знать как эти формы создавать.

Текстовые элементы:
Большинство элементов форм, предназначенные для передачи текстовых данных от пользователя в программу. На рис. 4.1 изображены четыре основных элемента формы для введения текстовых данных.



Рис 4.1 Текстовые элементы форм

Исходные тексты, с помощью которого была создана эта страница выглядит так.

<html>

<head>
  <title></title>
</head>
<body>
<h1>Елементы форм на uCoz-Copy.Ru</h1>
<form method="post">
Поле на uCoz-Copy.Ru:<br /><input name="pole" type="text">
<br />
Поле на uCoz-Copy.Ru:<br /><textarea name="area" rows="6" cols="25"></textarea>
<br />
Поле на uCoz-Copy.Ru (пароль*):<br /><input name="password" type="password">
<br />
Скрытое поле, которое не отображается:<input name="hidden" type="hidden" value="">
</form>
</body>

</html>


Любой элемент формы предусматривающий взаимосвязь с пользователем, должен быть расположен между тегами . Чаще используется элемент , который может принимать различные виды через присвоение значения его атрибута type.
Создаем текстовое поле
Самым простым элементов ввода данных - есть простое текстовое поле. Для его создания я использовал следующий код.

<input name="pole" type="text">


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

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

Простое скрытое поле создается следующим образом.

<input name="hidden" type="hidden" value="приховане значення">


Створюємо елементи вибору
Необхідність вводити текст у текстові поля для вводу, може досить ускладнити заповнення форми. Досвідчені програмісти намагаються завжди використовувати елементи форми які дозволяються обрати одне із запропонованих значень.

Формы HTML | Урок №2 (Уроки создания сайтов)



Рис. 4.2. Элементы выбора.
Создаем флажки
Первым из элементов выбора мы рассмотрим флажки. Обычно флажок выглядит как галочка, которую можно поставить в специально отведенном для нее месте. Рядом, как правило, располагается какой-либо текст.

Флажок может быть отмечен или неотмеченный. Флажки изображенные на рис. 4.2 были созданы с помощью следующего кода.

<input name="сheckbox1" type="checkbox" value="один">
<input name="сheckbox2" type="checkbox" value="два">
<input name="сheckbox3" type="checkbox" value="три">


Флажок - это элемент выбора типа checkbox. Флажок может иметь атрибут value, но в отличие от других элементов этот атрибут для флажком обычно не используется. Текст, находящийся рядом с флажками, является обычным текстом.

Флажки применяются тогда, когда возможен выбор любой комбинации элементов. Пользователь может отметить любые флажки, или не заметить ни одного. Несмотря на то что флажки могут быть расположены друг возле друга, они являются полностью независимыми элементами, и выбор одного никак не влияет на другой. Если вы хотите чтобы пользователь выбрал лишь один конкретный вариант, который исключает все остальные варианты, вам следует воспользоваться другим элементом выбора, который называется «переключатель».

Создаем переключатели
Переключатели (их еще называют «радиокнопки» и «кнопками выбора вариантов») используются тогда, когда нужно что-бы пользователь выбрал лишь один из предложенных вариантов. В html переключатели работают так, что когда вы выбираете один из них, то все остальные автоматически отключаются. Таким образом обеспечивается возможность выбрать только один из предложенных вариантов. Переключатели являются групповыми элементами, и в отличие от флажком, они являются зависимыми друг от друга тогда, если они сгруппированы. Для того чтобы сгруппировать переключатели, нужно присвоить ихним атрибутам name одинаково значение.

Следующий код демонстрирует сгруппированы переключатели.

<input name="radio" type="radio" value="101.1" >
<input name="radio" type="radio" value="103.5" >
<input name="radio" type="radio" value="106.1" >


Заметьте что-бы во всех этих переключателях, атрибут name имеет значение radio. Соответственно если бы это были настоящие кнопки радиоприемника, то вы бы не смогли одновременно прослушивать несколько радиочастот. Вы можете выбрать или частоту 101.1 или 103.5 или 106.1. Сгруппированы переключатели работают как одно целое, и когда вы выберете один из них, все остальные выключаются. В программу попадает только то значение переключателя, на котором был сделан выбор.

Создаем выпадающие списки

Выпадающие списки являются одними из часто используемых элементов выбора. Их особенность в том, что-бы пользователь видит элменты выбора только тогда, когда он будет в процессе выбора. Это бывает очень полезно тогда, когда на экране не хватает свободного места, или вы не хотите перегружать интерфейс. Выпадающие списки создаются с помощью двух различных элементов. Главным является элемент select, который может содержать множество элементов option (вспомните теги образующих нумерованные и ненумерованные списки, в них похожий принцип построения с выпадающим списком).

Следующий код поможет вам разобраться в построении выпадающих списков.

<select size="1" name="select">
  <option value="value1">Item1</option>
  <option value="value2">Item2</option>
  <option value="value3">Item3</option>
  <option value="value4">Item4</option>
</select>


В элемента select, есть атрибут name. А в элементов option есть атрибуты value. В программу попадет лишь то значение value, элемент которого будет выбран в выпадающем списке. Заметьте, что значение атрибута value не отображается на странице, пользователь будет видеть только тот текст, находящийся между элементами .

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

Следующий код демонстрирует создание списка с множественным выбором.

<select  name="list" size="7" multiple>
  <option value="value1">Item1</option>
  <option value="value2">Item2</option>
  <option value="value3">Item3</option>
  <option value="value4">Item4</option>
  <option value="value5">Item5</option>
  <option value="value7">Item6</option>
  <option value="value7">Item7</option>
</select>


Цей код виглядає схожим на код випадаючого списку, але в елементі select є деякі відмінності. За допомогою атрибуту size, я вказав що список завжди буде займати сім рядків по висоті. Також особливістю такого списку є те, що користувач може обрати більше ніж один варіант, якщо в елементі select було використано ключове слово multiple. Такий список є корисним тоді, коли ви хочете щоб коистувач бачив одразу усі варіанти вибору.
Додаємо кнопки
Кнопки являються дуже важливим елментом форм. Користувач звик натискати на кнопки, якщо він хоче щоб відбулася якась дія.

Кожна із кнопок створена як варіант елемента input, але завдяки атрибуту type, у всіх цих кнопок різна дія. Код що покладений в основу сторінки демонстрації кнопок, наглядно показує яким чином можна створювати кнопки всередині форм.

<html>
<head>
  <title></title>
</head>
<body>
<h1>Демонстрация использования кнопок на uCoz-Copy.Ru</h1>
<form>
<textarea name="area" rows="6" cols="25">Змините этот текст на свой и нажмите на
кнопку reset, если вы хотите увидеть какая у неё работа</textarea><br />
<input type="button" value="Button"> <br />
<input type="reset" value="Reset"> <br />
<input type="submit" value="Send">
</form>
</body>
</html>


Кнопка с типом button, обычно используется при программировании на стороне клиента. Кнопка reset, возвращает страницу в ее исходное состояние. Кнопка submit, без всякого сомнения является очень важным элементом программирования на стороне сервера. С помощью этой кнопки, обеспечивается связь между формами и вашими программами. Когда пользователь заполнил все поля формы, он нажимает на кнопку Send, которая имеет тип submit. После сие действия, с данных в элементах формы формируется пакет данных, который отправляется на обработку серверу.

Формы HTML | Урок №2 (Уроки создания сайтов)

Быстрый поиск: формы html ...
  Статьи вебмастеру | Просмотров: 2852 | 23-08-2011, 16:02

Советуем скачать бесплатно


Если вы хотите что то добавить к статье «Формы HTML | Урок №2 (Уроки создания сайтов)» или просто поделиться своими впечатлениями о скачанном в общей категории «Статьи вебмастеру», то можете это сделать в блоке "Комментарии" ниже.
Будьте пожалуйста предельно корректны и взаимовежливы. Спам на нашем сайте наказуем!

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:



Добавление комментария

Имя:*
E-Mail:*
Вопрос:
2+2=
Ответ:*
Введите код: *


РЕКЛАМА
Профиль
Привет гость
noavatar
Логин:
Пароль:

Реклама на UC
]]> ]]>
Мини чат

ПРОЕКТ no-problems . ucoz . net
Раскрутка сайтов, общение, приятная команда, всё для ucoz'a советы и многое другое
Хосты 100+
ИДЕТ НАБОР В КОМАНДУ САЙТА!
Пишите мне на сайте пользователь Linus
no-problems . ucoz . net
Ни каких проблем со скачиванием нету!!! wassat
Как скачать шаблоны, пожалуйста, помогите
Всем привет)))
Привет
Приветствую всех! :)
Спасибо, присоединяйтесь, к нашей дружной команде wassat
Да сайт грамотный winked
классный сайт)
Для добавления необходима авторизация.
Календарь
«    Март 2013    »
Пн Вт Ср Чт Пт Сб Вс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Топ пользователей
lelik 30 декабря 2010
ICQ: -Не указано-
Новостей: 316
Комментариев: 38
mozga-net 30 декабря 2010
ICQ: 607718372
Новостей: 140
Комментариев: 17
volnymixail 9 октября 2011
ICQ: 3859170
Новостей: 34
Комментариев: 0
INDIGO 30 декабря 2010
ICQ: 553555543
Новостей: 23
Комментариев: 20
maxynewsic 13 апреля 2012
ICQ: 619316074
Новостей: 20
Комментариев: 0
Статистика
(0):
Юзеры
Гости: (1):
(0):
Боты
Всего на сайте: 1
]]>

]]>
Контакты
]]>

Администратор: mozga-net mozga.nett

Администратор: lelik 384-939-998

Администратор: mozga-net 607-718-372

email Rip@ucoz-copy.ru

]]>