рефераты конспекты курсовые дипломные лекции шпоры

Реферат Курсовая Конспект

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

Урок 10: Что такое html формы и зачем они нужны. - раздел Программирование, Изучение HTML языка Html Формы - Это Наверное Самая Сложная Часть Языка Html. Так Что Наберитесь ...

Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать.

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую.

Начало формы

Введите ФИО:

Введите пароль:

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

CD
DVD

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

Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP

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

 


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

 

 

Конец формы

Здесь все работает, кроме отправки данных, можете поклацать :)

Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся:

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

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

Любые элементы формы находятся как бы в теле формы. Т.е. у любой формы есть каркас, а уже внутри него вставляются различные элементы формы, и пишется html код.

Пример 1:

<form>
<!-- сюда вставляют различные элементы -->
</form>

Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form>.

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

<form name="forma zakaza" method="post" action="obrabotchik.php">
<!-- сюда вставляют различные элементы -->
</form>

Атрибуты:

NAME– определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.

ACTION– обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму.

METHOD– определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.

Пару слов о методах передачи:

Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется.
Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Пока все понятно? тогда давайте начнем разбирать элементы формы:

<form name="primer1" method="post" action="obrabotchik.php">
Введите ФИО: <br>
<input type="text" name="fio" size="30">
<br>
Введите пароль:<br>
<input type="password" name ="pass">
</form>

В результате получим:

Введите ФИО:

Введите пароль:

Что мы видим в исходном коде? а мы видим следующее:

Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.

Основные атрибуты :

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация показывалась звездочками.

NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа.

Есть еще и такой полезный атрибут какMAXLENGTH , который определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

Ну вот например:

<form name="primer2" method="post" action="obrabotchik.php">
Введите пароль(максимум шесть символов):<br>
<input type="password" name ="pass" maxlength="6">
</form>

Результат:

Введите пароль(максимум шесть символов):

 

Ну как работает? А вы попробуйте ввести больше шести символов :)

Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.

Смотрите пример:

<form name="primer3" method="post" action="obrabotchik.php">
Введите свой e-mail: <br>
<input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com">
</form>

Результат:

Введите свой е-mail:

 

 

 

Теперь рассмотрим следующий элемент формы:

<form name="primer4" method="post" action="obrabotchik.php">
<p> Какой диск вы хотите получить?</p>
<p>
<input name="disc" type="radio" value="cd" checked>
CD<br>
<input name="disc" type="radio" value="dvd">
DVD </p></form>

Результат:

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

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 иначе ничего работать не будет.


Последний элемент в этом уроке:

<form name="primer5" method="post" action="obrabotchik.php">
<p>Какие обучающие курсы вы хотите видеть на диске?</p>
<input type="checkbox" name="fotoshop" value="yes" checked>
Курсы по Фотошопу<br>
<input type="checkbox" name="dreamweaver" value="yes">
Курсы по Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes">Курсы по PHP
</form>

Результат:

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

Курсы по Фотошопу
Курсы по Adobe Dreamweaver
Курсы по PHP

Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type="checkbox" означает что тип элемента - Чекбокс, атрибут nameнужен для того, чтобы обработчик мог идентифицировать данное поле и наконецvalue - определяет тот параметр, который будет отправлен при поставленной галочке.

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

Остальные элементы формы мы разберем в следующем уроке. Пока поэксперементируйте и придумайте свои формы.


 

– Конец работы –

Эта тема принадлежит разделу:

Изучение HTML языка

Рад что вы решили приступить к изучению моего учебника по html Поверьте мне в нем нет ничего сложного и уже через час вы создадите свою первую.. Что понадобится нам для обучения.. Браузер и Блокнот или аналогичный простой редактор вот вс что вам необходимо для работы с данным учебником Раз..

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Урок 10: Что такое html формы и зачем они нужны.

Что будем делать с полученным материалом:

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

Все темы данного раздела:

Термина используемые по ходу обучения
Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком "<&quo

Урок 2: Создаем свою первую страничку
Давайте сразу учиться все делать правильно. Хоть это и самая примитивная страничка создадим ее по всем правилам(они пригодятся при работе с Adobe Dreamweaver). ШАГ 1:

Как видите текст содержащийся в элементе DIV выделился в отдельную строку!
↑ Наверх ↑   SPAN - Используется для выделения части и

HR-служит для вставки в текст горизонтальной линии. Закрывающего тега нет!
Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах.

Если нужно сделать ссылку между собственными страницами?
  Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm

А если надо сделать ссылку внутри страницы?
  Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень просто! Необходимо пометить место д

А можно сделать ссылку на почту?
Конечно можно. Вот пример ссылки на е-mail сайта zvirec.com . <a href="mailto:admin@zvirec.com">Написать письмо админу zvirec.com</a>

Урок 7: Работаем с изображениями
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши ст

А есть ещё атрибуты, которые нам необходимы?
Вот еще пара полезных атрибутов - ALT и TITLE . ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен

Урок 8: Цвет фона и текста
Мы уже знаем как менять цвет текста, но для этого нам нужно было заключать его в теги font ,а это не всегда удобно. Иногда, лучше задать цвет текста для всего документа. Также, мож

А как можно объединить ячейки?
  Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – опр

Урок 11: Заканчиваем разбираться с формами
Нам осталось разобрать три элемента формы. Давайте по-порядку: <form name="primer6" method="post" action="obrabotchik.php"> <p>Выберите способ

Урок 12: Смотрим форму в действии
В этом уроке я, как и обещал, дам вам простейший обработчик и расскажу как протестировать форму. Будем тестировать вот такую форму. Введите ФИО: Введите пароль:

Урок 13: Пару слов про голову документа
Все это время мы говорили про тело документа и уже научились делать свои страницы. Поговорим теперь про голову документа. В первом уроке я говорил, что голова документа открывается те

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги