Пример формы HTML, элементы формы
Главная > Учебник HTML >
Что такое форма
Форма — это элемент страницы, с помощью которого пользователь может отправить данные на сервер. Примером HTML формы является форма авторизации на сайте. Пользователь вводит логин и пароль, нажимает кнопку, и эти данные отправляются на сервер. Форма никак не участвует в обработке данных, этим занимается программа на сервере. А форма лишь отправляет на него данные.
Формы связаны с работой сервера, и при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Ведь это важная чать HTML. Формы есть на большинстве сайтов. И Вам нужно знать, как они работают.
Создание формы
HTML форма создаётся с помощью тэга <form>. Сам этот тэг не выводит на страницу никаких полей для ввода, кнопок и вообще ничего. Для этого существуют другие тэги. А тэг <form> объединяет в их в одну форму и отправляет данные из них на сервер.
Рассмотрим несколько важных атрибутов тэга <form>.
Атрибут action указывает файл, который запускается на сервере и получает данные из формы. Значением атрибута является путь к файлу.
Атрибут method устанавливает метод запроса. Чаще всего он имеет такие значения:
method=»get»
method=»post»
Пример HTML формы:
+
8 | <form action="myfile.php" method="post"> </form> |
Форме можно задать имя. Это делается с помощью атрибута name. Имя формы должно быть уникальным. Оно используется для нахождения формы при работе скриптов.
Внутри тэга <form> размещаются элементы формы. Элементы формы — это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно.
Тэг <input>
Тэг <input> может выглядеть на странице по-разному в зависимости от
типа. В том числе он может создавать разные поля для ввода.
8 | <form action="myfile.php" method="post"> <input name="login"> </form> |
Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде:
имя = значение
Если в приведённом примере пользователь введёт в поле для ввода — Andrey, то на сервер будут отправлены данные в виде:
login=Andrey
Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут.
Тэг <textarea>
Тэг <textarea> создаёт многострочное поле для ввода текста. От тэга
<input> он отличается тем, что имеет размер в
несколько строк. Если вводимый текст не помещается в поле, то у него появляется полоса
прокрутки.
Добавим <textarea>
в форму:
10 | <textarea name="inform"></textarea> |
Атрибут name имеет тот же смысл, что и у тэга <input>.
Полю для ввода можно задать размеры. Для этого есть атрибуты cols и rows. Они устанавливают ширину и высоту поля в строках. Вместо этого можно использовать CSS.
Установим тэгу <textarea> размеры.
10 | <textarea name="inform" cols="30" rows="10"></textarea> |
Тэг <textarea> является парным. Внутрь него можно пометсить текст, который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.
10 | <textarea name="inform" cols="30" rows="10">Текст</textarea> |
У тэга <textarea> есть и другие атрибуты. Их Вы можете найти в справочниках.
Тэг <select>
Тэг <select> создаёт список, в котором пользователь выбирает один из
пунктов.
Каждый пункт создаётся с помощью тэга <option>. Пример:
11 | <select name="punkt"> <option value="p1">Первый пункт</option> <option value="p2">Второй пункт</option> </select> |
У тега <select> есть атрибут name, который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде:
punkt=p1
Если у какого-то пункта списка есть атрибут selected, то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге.
Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью
атрибута size. При этом внешний вид списка зависит от его высоты.
Если список
имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки,
то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта.
Её также можно изменить с помощью CSS.
Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.
11 | <select name="punkt" size="2"> |
Другие атрибуты тэгов <select> и <option> Вы можете найти в справочниках.
Тэг <label>
Тэг <label> можно использовать для каких-то пояснений внутри формы. Для примера добавим пояснение к тэгу <input>, который мы создавали ранее.
9 | <label>Login:</label><input name="login"> |
Но в таком виде это просто текстовый тэг. Основная функция тэга <label>
состоит в том, чтобы связывать пояснение с элементом формы.
Пользователь может нажать на текст, и это
соответствует нажатию на элемент формы.
Это используется тогда, когда элемент формы имеет маленький
размер и нажимать на него неудобно.
Чтобы связать элемент формы с текстом, его нужно поместить внутрь тэга <label>. Изменим 9 строку так, чтобы тэг <input> был связан с пояснением:
9 | <label>Login:<input name="login"></label> |
Нажмите на странице на слово «Login», поле для ввода окажется в фокусе.
Отправка формы
Чтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг <input> и установить ему тип submit.
Добавим в форму кнопку отправки данных на сервер:
15 | <input type="submit" value="Отправить"> |
Атрибут value содержит текст, который отображается на кнопке.
Когда пользователь нажимает на кнопку, данные из формы отправляются на сервер.
На сервере запускается файл, который указан
в атрибуте action
тэга <form>.
Этот файл получает данные из формы.
Автофокус
Любому элементу формы можно установить атрибут autofocus. Ему не нужно указывать значение, он просто указывается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах.
Новые элементы HTML5
❮ Предыдущая Следующая Глава ❯
Новые элементы HTML5
Начиная с 1999 года, HTML 4,01 изменилось многое. Сегодня некоторые из HTML 4.01 устарели, и эти элементы были удалены или переопределены в HTML5.
Для того, чтобы лучше справиться с современным интернет-приложений, HTML5 добавляет множество новых элементов и функций, таких как: рендеринга графики, мультимедийного контента, лучше структура страницы, лучшей формой обработки и несколько апи перетаскивания элементов, позиционирования, в том числе веб-приложения кэширование, хранение, веб-рабочий, и так далее.
Новые элементы в HTML5
Ниже приведен список новых элементов HTML5, а также описание того, что они используются.
Новые Семантические / Структурные элементы
HTML5 предлагает новые элементы для улучшения структуры документа:
| Тег | Описание |
|---|---|
| <article> | Определяет статью в документе |
| <aside> | Определяет содержание в стороне от содержимого страницы |
| <bdi> | Определяет часть текста, который может быть отформатирован в другом направлении от другого текста |
| <details> | Определяет дополнительные сведения о том, что пользователь может просмотреть или скрыть |
| <dialog> | Определяет диалоговое окно или окно |
| <figcaption> | Определяет заголовок для <figure> элемента |
| <figure> | Определяет автономное содержание, как иллюстрации, диаграммы, фотографии, списки кодов и т.д. |
| <footer> | Определяет нижний колонтитул документа или раздела |
| <header> | Определяет заголовок для документа или раздел |
| <main> | Определяет основное содержание документа |
| <mark> | Определяет маркированы или выделенный текст |
| <menuitem> | Определяет элемент команды / меню, пользователь может вызвать из контекстного меню |
| <meter> | Определяет измерение скалярного в пределах известного диапазона (a gauge) |
| <nav> | Определяет навигационные ссылки в документе |
| <progress> | Определяет ход выполнения задачи |
| <rp> | Определяет , что показать в браузерах , которые не поддерживают ruby аннотаций |
| <rt> | Определяет объяснение / произношение символов (для Восточной Азии книгопечатания) |
| <ruby> | Определяет ruby аннотацию (for East Asian typography) |
| <section> | Определяет раздел в документе |
| <summary> | Определяет видимый заголовок для <details> элемента |
| <time> | Определяет дату / время |
| <wbr> | Определяет возможный разрыв строки |
Подробнее о HTML5 семантике .
Новая форма элементов
| Тег | Описание |
|---|---|
| <datalist> | Определяет заранее определенные параметры для элементов управления вводом |
| <keygen> | Определяет поле пары ключей генератора (for forms) |
| <output> | Определяет результат расчета |
Прочитайте все о старых и новых форм элементов в HTML — формы элементов .
Типы ввода новых
| Типы ввода новых | Новые атрибуты ввода |
|---|---|
|
|
Узнайте все о старых и новых типов ввода в ввода типов HTML .
Узнайте все о входных атрибутов в Атрибуты HTML ввода .
HTML5 — Новый Атрибут Синтаксис
HTML5 позволяет четыре различных синтаксиса для атрибутов.
Этот пример демонстрирует различные синтаксисов , используемые в <input> тега:
| Тип | пример |
|---|---|
| пустой | <input type=»text» value=»John» disabled > |
| Некотируемые | <input type=»text» value=John > |
| Дважды цитируемый | <input type=»text» value=»John Doe» > |
| Одно цитируемое | <input type=»text» value=’John Doe’ > |
В HTML5, могут быть использованы все четыре Синтаксисы, в зависимости от того, что необходимо для этого атрибута.
HTML5 Графика
| Тег | Описание |
|---|---|
| <canvas> | Определяет графический рисунок с помощью JavaScript |
| <svg> | Определяет графический рисунок с помощью SVG |
Подробнее о HTML5 Canvas .
Подробнее о HTML5 SVG .
Новые элементы медиа
| Тег | Описание |
|---|---|
| <audio> | Определяет звук или музыкальный контент |
| <embed> | Определяет контейнеры для внешних приложений (like plug-ins) , (like plug-ins) |
| <source> | Определяет источники <video> и <audio> |
| <track> | Определяет треки <video> и <audio> |
| <video> | Определяет видео или кино содержания |
Подробнее о HTML5 видео .
Подробнее о HTML5 Audio .
❮ Предыдущая Следующая Глава ❯
Функции форм HTML5 · WebPlatform Docs
Резюме
В этом руководстве мы познакомим вас с новыми функциями форм HTML5.
Введение
HTML5 включает множество новых функций, которые значительно упрощают написание веб-форм, делают их более мощными и согласованными в Интернете.
В этой статье дается краткий обзор некоторых новых элементов управления форм и функций, которые были введены.
Зачем нам нужны новые функции формы?
Посмотрим правде в глаза, HTML-формы всегда были проблемой. Их не очень весело размечать, и их может быть сложно стилизовать, особенно если вы хотите, чтобы они были одинаковыми в разных браузерах и соответствовали общему внешнему виду вашего сайта. И конечным пользователям может быть неудобно их заполнять, даже если вы создаете их с осторожностью и вниманием, чтобы сделать их максимально удобными и доступными. Создание хорошей формы больше связано с ограничением ущерба, чем с приятным пользовательским опытом.
В то время, когда HTML 4.01 стал стабильной рекомендацией, Интернет был в основном статичным местом. Да, была странная форма для комментариев или сценарий гостевой книги, но обычно веб-сайты существовали только для того, чтобы посетители могли их читать. С тех пор сеть развивалась. Для многих браузер уже стал окном в мир сложных веб-приложений, которые почти не отличаются от настольных.
Рисунок 1: Некоторые сложные неродные элементы управления формы, сфальсифицированные с помощью JavaScript.
Чтобы удовлетворить потребность в более сложных элементах управления, необходимых для таких приложений, разработчики используют библиотеки и среды JavaScript, такие как jQueryUI и YUI. Эти решения, безусловно, совершенствовались с годами, но, по сути, они представляют собой обходной путь для компенсации ограниченных элементов управления формами, доступных в HTML. Они «подделывают» более сложные виджеты, такие как средства выбора даты и ползунки, накладывая дополнительную (но не всегда семантическую) разметку и множество JavaScript поверх страниц.
HTML5 стремится стандартизировать некоторые из наиболее распространенных элементов управления расширенными формами, заставляя их отображаться в браузере и устраняя необходимость в этих обходных решениях с большим количеством сценариев.
Знакомство с нашим примером
Чтобы проиллюстрировать некоторые новые функции, в этой статье создается простой пример форм HTML5.
Он не предназначен для представления «реальной» формы (поскольку вам будет трудно найти ситуацию, когда вам нужны все новые функции в одной форме), но он должен дать вам представление о том, как выглядят различные новые аспекты. и вести себя.
Примечание. Внешний вид новых элементов управления формы и сообщений проверки отличается от браузера к браузеру, поэтому стилизация ваших форм, чтобы они выглядели достаточно единообразно в разных браузерах, по-прежнему требует тщательного рассмотрения.
Новые элементы управления формами
Поскольку формы являются основным инструментом ввода данных в веб-приложениях, а данные, которые мы хотим собирать, стали более сложными, необходимо было создать элемент ввода с более широкими возможностями для сбора данных. с большей семантикой и лучшим определением, а также для обеспечения более простой и эффективной проверки и управления ошибками.
Первый новый тип ввода, который мы обсудим, это type="number" :
Этот тип ввода создает особый тип поля ввода для ввода чисел — в большинстве поддерживаемых браузеров это отображается как текстовое поле ввода с элементом управления «счетчик», который позволяет вам увеличивать и уменьшать его значение.
Рисунок 2: Тип ввода числа .
Создание ползунка, позволяющего выбирать из диапазона значений, раньше было сложным, семантически сомнительным предложением, но с HTML5 это легко — вы просто используете тип ввода range :
Рис. 3: Тип ввода диапазона .
Обратите внимание, что по умолчанию этот ввод обычно не показывает текущее выбранное значение или даже диапазон значений, которые он охватывает. Авторы должны предоставлять их другими способами; например, чтобы отобразить текущее значение, мы могли бы использовать элемент вместе с некоторым JavaScript для обновления его отображения всякий раз, когда пользователь взаимодействует с формой: