Создание формы в html примеры. Создание полей формы

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

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:

for = "yes" > Да Нет >

Да Нет >

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

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

Подсказка для полей ввода

Давайте рассмотри пример использования:

Login: type = "text" name = "login" placeholder = "Введите ваш логин" >

Password: type = "password" name = "password" placeholder = "Введите ваш пароль" >
Далее

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

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

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

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

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

Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.

В настоящее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

HTML формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной] . Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена HTML форма

Форма открывается тегом

и заканчивается тегом

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

Тег

может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

Обязательный атрибут. Определяет, где находится обработчик формы.

Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET . Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET .

Определяет, каким образом данные из формы HTML будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded .

Простейшая HTML форма

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

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

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:

Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

Простейшая форма

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали! .

В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

Как HTML форма собирает данные

Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя] , определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами . Большинство элементов должны включать атрибут VALUE="[значение]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов :

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример:

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user .

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля - 10 символов. Введенный пароль передается обработчику в переменной pw .

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример:

9600 бит/с
14400 бит/с
28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600 . Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800 .

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример:

Персональные компьютеры
Рабочие станции
Серверы локальных сетей
Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS .

TYPE=hidden

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

Пример:

Определяет скрытую переменную version , которая передается обработчику со значением 1.1 .

TYPE=reset

Определяет кнопку, при нажатии на которую форма HTML возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name .

Пример:

Определяет кнопку Очистить поля формы, при нажатии на которую форма HTML возвращается в исходное состояние.

Помимо элементов , формы HTML могут содержать меню и поля для ввода текста .</p> <p>Меню <SELECT> из n элементов выглядит примерно так:</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[значение 1]">[текст 1] <OPTION VALUE="[значение 2]">[текст 2] ... <OPTION VALUE="[значение n]">[текст n] </SELECT> </p><p>Как Вы видите, меню начинается с тега <SELECT> и заканчивается тегом </SELECT> . Тег <SELECT> содержит обязательный атрибут NAME , определяющий имя переменной, которую генерирует меню.</p> <p>Тег <SELECT> может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.</p> <p>Тег <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <OPTION> может включать атрибут checked , показывающий, что данный элемент отмечен по умолчанию.</p> <h3>Разберем небольшой пример:</h3> <SELECT NAME="selection"> <OPTION VALUE="option1" checked>Вариант 1 <OPTION VALUE="option2">Вариант 2 <OPTION VALUE="option3">Вариант 3 </SELECT> <p>Такой фрагмент определяет меню из трех элементов: Вариант 1 , Вариант 2 и Вариант 3 . По умолчанию выбран элемент Вариант 1 . Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3 .</p> <p>После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым. Например:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес...

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).

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

Важно знать, что русские буквы в окне при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.</p> <h3>Пример:</h3> <p>Для демонстрации использования форм HTML я написал небольшую программу на PHP, которая находится по адресу:</p><p>Http://206.31.82.215/hp/nc/fd-win.pht </p><p>Исходные данные в эту программу передаст форма, описанная в примере 12 :</p><p> <HTML> <HEAD> <TITLE>Пример 12</TITLE> </HEAD> <H1>Несколько более сложная форма </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Расскажите немного о себе...</H2> <P>Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные. </P> <P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский<BR> Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR> <INPUT TYPE=submit VALUE="Запустить обработчик"></P> </FORM> </BODY> </HTML> </p><p>Заполняйте форму HTML, жмите на кнопку и смотрите, что будет...</p> <p><b>Маленькая хитрость, <br> или как отправить форму почтой </b></p><p>Все это прекрасно, скажут скептики, но на кой ляд нужны HTML формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти.</p> <p>HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.</p> <p>Допустим, что мы слегка изменили Пример 12. Вместо строки</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>мы ввели строку</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Обратите внимание, что мы изменили алгоритм кодирования на text/plain , то есть фактически выключили кодирование вообще.</p> <p>Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?</p> <p>Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:</p><p>Fn=Иван ln=Петров gender=male age=22 </p><p>К сожалению, не все пользователи смогут воспользоваться такой формой HTML. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <p><i> </i> 26.02.2016</p> <br><p>Всем привет!<br> Продолжаем изучать основы HTML. В этом уроке мы разберем, <b>что такое </b><b>HTML </b> <b>форма </b> и как она создается.<br> Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма обратной связи, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.</p> <p>Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.</p> <p>○ <b>Форма поиска: </b></p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-1.png' height="209" width="381" loading=lazy></p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-2.png' width="100%" loading=lazy></p> <p>○ <b>Форма входа на сайт: </b></p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-3.png' height="482" width="360" loading=lazy></p> <p>○ <b>Форма обратной связи: </b></p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-4.png' height="424" width="340" loading=lazy></p> <p>○ <b>Форма для подачи заказа: </b></p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-5.png' height="304" width="338" loading=lazy></p> <p>Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, <b>как создать простую </b><b>HTML </b><b> форму </b> и какие теги можно использовать для создания различных полей формы.</p> <p>Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.</p> <p><b>HTML </b><b> форма </b> – это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке . Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.</p> <h3><span>Учимся создавать HTML формы </span></h3> <p>Любая HTML форма будет состоять из основного тега <form> </form> . Внутри тега <form> </form> вставляются остальные элементы формы, которые будут отображаться на веб странице.</p><p> <form></form> </p><p>Форма должна размещаться между тегами <body></body> .<br> Для тега <form> <span><u>закрывающий тег обязателен </u> </span>.</p> <p>*<i><b>атрибуты для тега <fo </b> </i><i><b>rm </b> </i><i><b>> </b> </i> </p> <p>NAME – уникальное имя формы. Оно используется тогда, когда на одном сайте несколько форм.<br>ACTION – этот атрибут указывает путь к обработчику формы. Является обязательным.<br>METHOD – способ отправки.</p> <ul><li>POST - данные передаются в скрытом виде</li> <li>GET (по умолчанию) - данные передаются в открытом виде через браузерную строку.</li> </ul><p>Пример, как выглядит тег <form> с перечисленными атрибутами:</p><p> <form name="forma1" method="post" action="obrabotchik.php"> здесь будут различные элементы формы, которые будут отображаться на веб странице. </form> </p><h3>Элементы формы </h3> <p>○ <b>Тег </b><b>input </b></p> <p><b>Тег </b><b>input </b> – эта часть элемента поля формы предназначена для ввода небольшого текста, цифр.<br> Для тега <input> <span><u>закрывающий тег не нужен </u> </span>.</p> <p>*<i><b>атрибуты для тега < </b> </i><i><b>input </b> </i><i><b>> </b> </i> </p> <ul><li>name - имя элемента</li> <li>size - размер поля</li> <li>required – поле обязательное для заполнения</li> <li>autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле</li> <li>maxlength – этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов</li> <li>placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).</li> <li>type - тип элемента</li> </ul><p>Пример заполнений:</p><p> <input type="text" name="nameforma" autofocus maxlength="8" size="100" required placeholder="Как вас зовут?"> </p><h3>Тип элемента type </h3> <p><b>Текстовое поле </b></p> <p><b>○ Текстовое поле «text» </b>:</p><p> <input type="text"> </p><p>Результат:</p> <p><input type="text"></p> <p>○ <b>Поле для пароля «password» </b>:</p><p> <input type="password"/> </p><p>Результат:</p> <p><input type="password"></p> <p>○ <b>Поле для email «email» </b>:</p><p> <input type="email"/> </p><p>Результат:</p> <p><input type="email"></p> <p>○ <b>Кнопка для выбора файла с компьютера «file» </b>:</p><p> <input type="file"/> </p><p>Результат:</p> <p><input type="file"></p> <p>○ <b>Поле для ввода телефона «tel» </b>:</p><p> <input type="tel"> </p><p>Результат:</p> <p><input type="tel"></p> <p>○ <b>Поле поиска «search» </b>:</p><p> <input type="search" results="5"> </p><p>Результат:</p> <p><input type="search"></p> <p>○ <b>Поле выбора цвета «color» </b>:</p><p> <input type="color"/> </p><p>Результат:</p> <p><input type="color"></p> <p>○ <b>Поле для ввода и выбора цифр «number» </b>:</p><p> <input type="number" min="0" max="10" step="5"/> </p><ul><li>min – минимальное значение</li> <li>max – максимальное значение</li> <li>step – шаг.</li> </ul><p>Результат:</p> <p><input max="10" min="0" step="5" type="number"></p> <p>○ <b>Поле для выбора даты «date» </b>:</p><p> <input type="date"> </p><p>Результат:</p> <p><input type="date"></p> <p>○ <b>Поле для выбора даты и местного времени в формате (05.05.2015 00:00) </b>:</p><p> <input type="datetime-local"/> </p><p>Результат:</p> <p><input type="datetime-local"></p> <p>○ <b>Выводить выпадающий календарь. </b><br> Поле для выбора года и месяца в формате (Июль 2015 г.).:</p><p> <input type="month"/> </p><p>Результат:</p> <p><input type="month"></p> <p>○ <b>Поле для выбора времени «time» </b>:</p><p> <input type="time"/> </p><p>Результат:</p> <p><input type="time"></p> <p>○ <b>Ползунок «range» </b>:</p><p> <input type="range"/> </p><p>Результат:</p> <p><input type="range"></p> <p>○ <b>Флажок (checkbox) </b>:</p><p> <input type="checkbox" checked><input type="checkbox"/> </p><p>checked – этот атрибут указывает, какой флажок должен быть включен по умолчанию</p><p>Результат:</p> <p><input checked type="checkbox"><input type="checkbox"></p> <p>○ <b>Радиопереключатель «radio» </b>:</p><p> <input type="radio" checked="checked"> <input type="radio"> </p><p>checked – этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию</p> <p>Результат:</p> <p><input checked type="radio"><input type="radio"></p> <p><b>Кнопки </b></p> <p>○ <b>Кнопка «button» </b>:</p><p> <input type="button" value="кнопка"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="button" value="кнопка"></p> <p>○ <b>Кнопка для отправки данных «submit» </b>:</p><p> <input type="submit" value="кнопка"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="submit" value="кнопка"></p> <p>○ <b>Кнопка сброса «reset» </b>:</p><p> <input type="reset" value="сброс"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="reset" value="сброс"></p> <p>○ <b>Кнопка картинкой </b>:</p><p>Результат:</p> <p><input src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/icon-html.jpg" type="image"></p> <p>○ <b>Скрытое поле «hidden» </b></p><p> <input type="hidden" value="Любое значение "/> </p><p>○ <b>Тег select </b></p> <p><b>Тег </b><b>select </b> – это часть элемента формы, предназначен для ввода выпадающего списка.<br> Для тега <SELECT></SELECT> <span><u>закрывающий тег обязателен </u> </span>.<br> Тег <SELECT> является каркасом для выпадающего списка.</p> <p>Чтобы создавать пункты выпадающего списка существует тег <OPTION> .<br> Для тега <OPTION></OPTION> <span><u>закрывающий тег обязателен </u> </span>.</p> <p>*<i><b>атрибуты для тега </b> </i><SELECT> и <OPTION> </p> <ul><li>Name – это имя всего списка. Задается только для тега <SELECT> .</li> <li>multiple – для множественного выбора, только при выборе нужно удерживать клавишу «CTRL». Задается только для тега <SELECT> .</li> <li>Value – задается для каждого пункта списка для тега <OPTION> .</li> <li>disabled - блокирует выбор элемента в выпадающем списке. Задается только для тега <OPTION> .</li> </ul><p> <select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>Или вот так:</p><p> <select name="dostavka"> <option> </option> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>Теперь заблокируем из списка «Срочная » атрибутом «disabled »:</p><p> <select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya" disabled > Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>○ <b>выпадающий список по группам </b>:</p> <p>Для создания списка группы используется тег <optgroup> </p><p> <optgroup label="Группа 1"></optgroup> </p><p> <select> <optgroup label="Группа 1"> <option value="1">Option</option> <option value="2">Textarea</option> </optgroup> <optgroup label="Группа 2"> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option> </optgroup> </select> </p><p>Результат:</p><p>Option Textarea <br> Label Fieldset Legend <br></p> <p>○ <b>для множественного выбора </b>:</p><p> <select multiple> <option>Option</option> <option>Textarea</option> <option>Label</option> <option>Fieldset</option> <option>Legend</option> </select> </p><p>В теге <select> используется атрибут «multiple ».</p> <p>Результат:</p> <p>Option Textarea Label Fieldset Legend</p> <h3><span>Многострочное текстовое поле </span></h3> <p>○ <b>Тег textarea </b></p> <p><b>Тег </b><b>textarea </b> – это часть элемента поля формы, предназначен для ввода большого текста, цифр.<br><span> <u>закрывающий тег обязателен </u> </span>.</p><p> <textarea>

*атрибуты для тега < textarea >

• name – имя поля
• cols – ширина поля
• rows – высота поля
• placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля.

Результат:

Или вот так:

Введите текст

Результат:

Введите текст

Или вот так:

Результат:

Оформление «Рамка» (fieldset)

○ Тег fieldset

Тег fieldset – с помощью этого тега можно нарисовать рамку вокруг объекта.
Закрывающий тег обязателен .

Дополнительные теги

Тег legend – указывает на заголовок.
Закрывающий тег обязателен .

Заголовок

Текст внутри рамки.

Результат:

Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.

Вот моя форма:

Форма для резюме работника опытного завода ПАО "КМЗ"

Кем вы хотите устроиться?
Директором Инженером Сварщиком

Какую зарплату вы хотите получать (в месяц)?
10$ 11$

Результат:

Предыдущая запись
Следующая запись

Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

1) Создание простой формы

Теги

и

задают начало и конец формы. Начинающий форму тег

содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .

Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

$text = nl2br ($_POST [ "mytext" ]);
?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

2000
2001
2002
……………………………………………
2050

II. Ввод данных через цикл:

$year = 2000 ;
for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50
{
$new_years = $year + $i ; // Формируем новое значение
echo "" . $new_years . "" ; //Формируем новую строчку
}
?>

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

Описание:

Создадим HTML-форму для отправки файла на сервер.

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

Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

if(isset($_FILES [ "myfile" ])) // Если файл существует
{
$catalog = "../image/" ; // Наш каталог
if (is_dir ($catalog )) // Если такой каталог есть
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Времменый файл
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Имя файла
if(! copy ($myfile , $catalog )) echo "Ошибка при копировании файла " . $myfile_name // Если неудалось скопировать файл
}
else mkdir ("../image/" ); // Если такого каталога нет, то мы его создадим
}
?>

Замечание

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

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

Синий
Черный
Белый

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Если выбран хоть 1 элемент
else echo "Выберите значение" ;
?>

Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы .

Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.

И в этой статье Вы научитесь создавать абсолютно любые .

Сначала создайте простейшую HTML-страницу , в которую добавьте контейнер (тег