Rambler's Top100
Воскресенье, 19.11.2017, 20:41

КАК СОЗДАТЬ СВОЙ САЙТ

Урок "11"

Заканчиваем разбираться с формами

Нам осталось разобрать три элемента формы. Давайте по-порядку:

<form name="primer6" method="post" action="obrabotchik.php">
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka" size="1">
<option value="srochnaya" > Срочная </option>
<option value="ne srochnaya" selected> Не срочная </option>
<option value="kurierom"> Курьером </option>
</select>
</p>
</form>

Результат:

Выберите способ доставки:

Базовым элементом здесь является SELECT(выбор) . У него обязательно должен быть закрывающий тег! Внутри него содержатся элементы OPTION (опции выбора) . Как вы поняли, без элементов option элемент select потеряет смысл, т.к. выбирать будет не из чего :)

Как видите, у элемента SELECT есть уже знакомый нам атрибут name , а у элементов OPTION тоже знакомый нам атрибут value (в элементе select это не обязательный атрибут) . Они нужны для того, чтобы обработчик мог идентифицировать выбранный вариант.

Например мы выбираем способ доставки - Срочная. Тогда переменная dostavka примет значение srochnaya. Если б не было значения value="srochnaya" то переменная dostavka приняла бы значение Срочная (т.е. значение текста заключенного в элемент option).

 

Атрибут SIZE задает количество одновременно видимых пунктов меню. В нашем случае это 1.

Атрибут флаг SELECTED означает что данное значение, будет выбрано по умолчанию.

Можно также сделать, чтобы имелась возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. Для этого используется атрибут-флаг MULTIPLE .

<form name="primer7" method="post" action="obrabotchik.php">
<p>Выберите способ доставки:</p>
<p>
<select name="dostavka" size="3" multiple >
<option value="srochnaya" > Срочная </option>
<option value="ne srochnaya"> Не срочная </option>
<option value="kurierom"> Курьером </option>
</select>
</p>
</form>

Результат:

Выберите способ доставки:

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

Давайте разберем следующий элемент:

<form name="primer8" method="post" action="obrabotchik.php">
Введите адрес для доставки:<br>
<textarea name="adress" cols="45" rows="5"></textarea>
</form>

Результат:

Введите адрес для доставки:

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

Какие атрибуты у него есть? да знакомый нам атрибут name который поможет идентифицировать заполненное поле на сервере. Как видите здесь нигде нету параметра value, т.к. в качестве значения обработчику посылается текст, который мы введем в текстовое поле.

Атрибуты COLS и ROWS определяют ширину и высоту поля. К примеру cols="45" rows ="5" означает что ширина будет 45 колонок, а высота 5 рядов. Колонки и ряды естественно формируются из символов. Т.е. ширина 25 колонок, означает ширину в 25 символов, разобрались? думаю , что да.

 

И наконец мы добрались до кнопок:

<form name="primer8" method="post" action="obrabotchik.php">
<input type="submit" value="Сделать заказ">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Отмена">
</form>

Результат:

      

Для создания кнопок используется уже знакомый нам элемент INPUT . Если необходимо создать кнопку, которая будет отправлять данные обработчику, то пишем type="submit"(тип-отправить), а если хотите чтоб кнопка выполняла функцию сброса то type="reset" . Вот и все!

Атрибут value указывает на то, что будет написано на кнопке. Вас еще может напугать строка &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - это 6 пробелов подряд(это так называемые специальные символы html) я просто их поставил чтобы разделить кнопки! Все спец. символы есть у меня на сайте.

Теперь Мы всё умеем! следующий урок будет последним. там я дам вам обработчик для тренировки и расскажу как пользоваться.

 

См. также

Следующий   - Урок 12: Смотрим форму в действии .
Предыдущий - Урок 10: Что такое html формы и зачем они нужны.

Google +1
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 80
Поиск
Календарь
«  Ноябрь 2017  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Архив записей
Друзья сайта
  • Обновление навигаторов
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0