Работа с формами в html, создание основных элементов формы

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

action. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
method. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
accept-charset. Устанавливает кодировку.
autocomplete. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
name. Имя формы.

Есть и ещё атрибуты, но используются они крайне редко.

<input>. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно — задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.

type. Главный атрибут тега , определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).

Значение	Описание
button	Кнопка
checkbox	Флажки. С их помощью вы можете выбрать сразу несколько вариантов
file	Кнопка выбора файла
hidden	Скрытое поле, в браузере не отображается
image	Кнопка с картинкой
password	Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)
radio	Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов
reset	Кнопка сброса данных формы к первоначальным значениям
submit	Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод — Сохранить, Применить, ОК
text	Текстовое поле

Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.

autofocus. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
checked. Установить флажок или радиокнопку по умолчанию.
pattern. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
placeholder. Задаёт текст-подсказку.
<select>. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги <option>.
size. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
multiple. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
required. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
<option>. Тег элемента списка, используемый внутри <select>.
value. Значение пункта списка для обработки скриптом.
selected. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
<optgroup>. Контейнер позволяет группировать элементы списка <option>.
disabled. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
label. Текст заголовка группы.

HTML Упражнения

Учебник HTML, также, содержит почти 100 HTML упражнений.

HTML Справочники

В SchoolsW3 вы найдете полные ссылки на HTML элементы,
атрибуты, события, имена цветов, сущности, наборы символов, кодировка URL-адресов,
языковые коды, HTTP-сообщения, поддержка браузера и многое другое:

HTML Элементы
Поддержка Браузера
Атрибуты
Глобальные Атрибуты
Атрибуты Событий
Название Цвета
Холст
Аудио/Видео DOM
Кодировка Символов
URL Кодировка
Коды Языка
Код Стран
HTTP Сообщения
PX в EM Конвертер
Клавишные Комбинации

SchoolsW3′ Онлайн Сертификация

Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и построение карьеры.

Уже выдано более 25 000 сертификатов!

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания продвинутого CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

Python Сертификат документирует ваши знания о Python.

jQuery Сертификат документирует ваши знания о jQuery.

SQL Сертификат документирует ваши знания SQL.

PHP Сертификат документирует ваши знания PHP и MySQL.

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания о фреймворке Bootstrap.

Пример формы

Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php, находящийся в папке с HTML-страницей.

Код будет таким.

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>Форма</title>

 </head>

 <body>

  <form method="get" action="script.php">

    Логин:<br>

    <input name="login" type="text" size="25" maxlength="30" value="Михаил"> <br>

    <br>Пароль: <br>

    <input name="pass" type="password" size="25" maxlength="30" value=""> <br>

    <br>Кто вы?

    <select>

    <option value="c1">Гость</option>

    <option value="c2">Администратор</option>

    </select></p>

    <input name="save" type="checkbox" value="yes"> Запомнить <br>

    <br><input type="submit" name="enter" value="Вход">

  </form>

 </body>

</html>

Разберём некоторые его части.

<form method=»get» action=»script.php»> — создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.

<br> — тег перехода на следующую строку.

<input name=»login» type=»text» size=»25″ maxlength=»30″ value=»Михаил»> — создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.

<input name=»pass» type=»password» size=»25″ maxlength=»30″ value=»»> — создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля — 25, максимальная длина пароля — 30 символов.

<select><option value=»c1″>Гость</option><option value=»c2″>Администратор</option></select> — создаём простой раскрывающийся список из двух пунктов.

<input name=»save» type=»checkbox» value=»yes»> Запомнить — добавляем флажок и пишем поясняющий текст.

<br><input type=»submit» name=»enter» value=»Вход»> — создаём кнопку, нажатие которой запускает процесс обработки данных.

</form> — закрываем форму.

В браузере веб-форма будет выглядеть, как на рисунке ниже.