Вторник, 21.08.2018, 13:05 | Приветствую Вас Гость | Регистрация | Вход
  • Москва Доктор Психотерапевт
  • Санкт-Петербург Доктор Психотерапевт
  • Новосибирск Доктор Психотерапевт
  • Екатеринбург - Доктор Психотерапевт
  • Волгоград Доктор Психотерапевт
  • Ростов на Дону Психотерапевт
  • Нижний Новгород- Доктор Психотерапевт
  • Самара - Доктор Психотерапевт
  • Омск - Доктор Психотерапевт
  • Казань- Доктор Психотерапевт
  • Челябинск - Доктор Психотерапевт
  • Уфа - Доктор Психотерапевт
  • Новый Уренгой Доктор Психотерапевт
  • Тюмень Доктор Психотерапевт
  • Владивосток Доктор Психотерапевт
  • Камышин доктор психотерапевт ДОКТОР
  • Камышин доктор психотерапевт ПОНИМАНИЕ
  • Информационный Сайт Камышина Реклама Афиша ИСКРА
  • ВСЕ ПЕСНИ И МЕЛОДИИ !!!

    Урок 10: Что такое html формы и зачем они нужны.

    Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать. Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую. Введите ФИО: Введите пароль: Какой диск вы хотите получить? CD DVD Какие обучающие курсы вы хотите видеть на диске? Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP Выберите способ доставки: Введите адрес для доставки: Здесь все работает, кроме отправки данных, можете поклацать :) Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся: html форма - это всего лишь каркас, созданный при помощи языка html, т.е. мы можем указать браузеру где у нас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис - нужна иная технология - программа, скрипт, который привязывается к форме. Обычно такие программы делаются на php . Но не расстраивайтесь раньше времени, я дам Вам простейший обработчик для тренировки, а более сложные можно найти в интернете или самому написать. Давайте рассмотрим все элементы формы из примера выше по-порядку: Любые элементы формы находятся как бы в теле формы. Т.е. у любой формы есть каркас, а уже внутри него вставляются различные элементы формы, и пишется html код. Пример 1:
    Как видите здесь два базовых тега : открывающий
    и обязательный закрывающий тег
    . Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы: Пример 2:
    Атрибуты: NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм. ACTION – обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму. METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST. Пару слов о методах передачи: Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется. Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде. Пока все понятно? тогда давайте начнем разбирать элементы формы:
    Введите ФИО:

    Введите пароль:
    В результате получим: Введите ФИО: Введите пароль: Что мы видим в исходном коде? а мы видим следующее: Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега. Основные атрибуты : TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация показывалась звездочками. NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя. SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа. Есть еще и такой полезный атрибут как MAXLENGTH , который определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено. Ну вот например:
    Введите пароль(максимум шесть символов):
    Результат: Введите пароль(максимум шесть символов): Ну как работает? А вы попробуйте ввести больше шести символов :) Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода. Смотрите пример:
    Введите свой e-mail:
    Результат: Введите свой е-mail: Теперь рассмотрим следующий элемент формы:

    Какой диск вы хотите получить?

    CD
    DVD

    Результат: Какой диск вы хотите получить? CD DVD Данный тип элементов html формы называется радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значение type="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое имя - name="disc" и разные значения value . Почему это так? давайте подумаем логически: Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" и value="dvd"). Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может... Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked(включен). Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет. Последний элемент в этом уроке:

    Какие обучающие курсы вы хотите видеть на диске?

    Курсы по Фотошопу
    Курсы по Adobe Dreamweaver
    Курсы по PHP
    Результат: Какие обучающие курсы вы хотите видить на диске? Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type="checkbox" означает что тип элемента - Чекбокс, атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле и наконец value - определяет тот параметр, который будет отправлен при поставленной галочке. В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке,как значение переменной в обработчик полетит текст который написан рядом с галочкой. Остальные элементы формы мы разберем в следующем уроке. Пока поэксперементируйте и придумайте свои формы. ↑ Наверх ↑ См. также Следующий - Урок 11: Заканчиваем разбираться с формами Предыдущий - Урок 9: Разберемся с таблицами в html
    Фотография 0