Форма html5: Формы в HTML5 | WebReference

Html
10 Дек, 1970
0

Содержание

HTML5 | Формы

184

Веб-программирование — HTML5 — Формы

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

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

Хотя стандарт XForms позволял легко и элегантно решать некоторые задачи, он также имел и значительные недостатки. Например, код XForms был очень объемистый, и для работы с ним нужно хорошее знание стандарта XML. Но самое большое препятствие состояло в том, что стандарт XForms не был совместим с HTML-формами ни в каких отношениях. Это означало, что разработчикам нужно было бы бросаться в неизведанные воды новой модели без вспомогательных плавсредств, а лишь со слепой верой и огромным мужеством.

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

Стандарт HTML5 предлагает другой подход. Вместо того чтобы начинать с нуля, как в XForms, он совершенствует уже существующую модель HTML-форм. Это означает, что HTML5-формы могут работать и на старых браузерах, лишь без новых примочек и наворотов. HTML5-формы также позволяют применять новые возможности, которые уже используются разработчиками в настоящее время. Эти возможности более доступны, не требуют написания страниц сценариев JavaScript или применения инструментариев JavaScript сторонних разработчиков.

Что такое форма?

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

Веб-форма — это набор текстовых полей, списков, кнопок и других активизируемых щелчком мыши элементов управления, посредством которых посетитель страницы может предоставить ей тот или иной вид информации. Формы в Интернете повсюду — благодаря формам мы можем создавать учетные записи электронной почты, просматривать и покупать товары в интернет-магазинах, осуществлять финансовые транзакции и многое другое. Самая простая форма — это одинокое текстовое поле поисковых систем, таких как Google:

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

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

Модернизация традиционной HTML-формы

Лучший способ обучения работе с формами HTML5 — это взять типичную современную форму и усовершенствовать ее. Ниже показана форма, на примере которой мы будем обучаться. Разметка такой формы до предела проста. Если вам раньше приходилось работать с формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы заключается в элемент <form>.

Элемент <form> удерживает вместе все элементы управления формы, которые также называются полями. Кроме этого, он также указывает браузеру, куда отправить данные после нажатия пользователем кнопки отправки, предоставляя URL в атрибуте action. Но если вся работа будет выполняться на стороне клиента сценариям JavaScript, то для атрибута action можно просто указать значение #.

Хорошо спроектированная форма разделяется на логические фрагменты с помощью элемента <fieldset>. Каждому разделу можно присвоить название, для чего используется элемент <legend>. В следующем листинге приводится разметка формы:

<form action="#">
  <p><i>Пожалуйста, заполните форму. Обязательные поля помечены </i><em>*</em></p>
  <fieldset>
    <legend>Контактная информация</legend>
      <label for="name">Имя <em>*</em></label>
      <input><br>
      <label for="telephone">Телефон</label>
      <input><br>
      <label for="email">Email <em>*</em></label>
      <input><br>
  </fieldset>
  <fieldset>
    <legend>Персональная информация</legend>
      <label for="age">Возраст<em>*</em></label>
      <input><br>
      <label for="gender">Пол</label>
      <select>
        <option value="female">Женщина</option>
        <option value="male">Мужчина</option>
      </select><br>
      <label for="comments">Перечислите личные качества</label>
      <textarea></textarea>
  </fieldset>

  <fieldset>
    <legend>Выберите ваших любимых животных</legend>
    <label for="zebra"><input type="checkbox"> Зебра</label>
    <label for="cat"><input type="checkbox"> Кошак</label>
    <label for="anaconda"><input type="checkbox"> Анаконда</label>
    <label for="human"><input type="checkbox"> Человек</label>
    <label for="elephant"><input type="checkbox"> Слон</label>
    <label for="wildebeest"><input type="checkbox"> Антилопа</label>
    <label for="pigeon"><input type="checkbox"> Голубь</label>
    <label for="crab"><input type="checkbox"> Краб</label>
  </fieldset>
  <p><input type="submit" value="Отправить информацию"></p>
</form>

Добавьте немного стилей CSS:

body {
  font-family: 'Palatino Linotype', serif;
  max-width: 600px;
  padding: 0px 30px;
}

h2 {
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
}

fieldset {
  margin-bottom: 15px;
  padding: 10px;
}

legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;
}

label {
  width: 110px;
  display: inline-block;
  vertical-align: top;
  margin: 6px;
}

em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}

input:focus {
  background: #eaeaea;
}

input, textarea {
  width: 249px;
}

textarea {
  height: 100px;
}

select {
  width: 254px;
}

input[type=checkbox] {
  width: 10px;
}

input[type=submit] {
  width: 170px;
  padding: 10px;
}

И вот результат:

Как и во всех формах, большая часть работы в нашем примере выполняете универсальным элементом <input>, который собирает данные и создает флажки, переключатели и списки. Для ввода одной строки текста применяется элемент <input>, а для нескольких — элемент <textarea>; элемент <select> создает выпадающий список. Краткое обозрение этих и других элементов управления форм приведено в таблице:

Элементы управления формы
Элемент управления	HTML-элемент	Описание
Однострочное текстовое поле	<input type=»text»> <input type=»password»>	Выводит однострочное текстовое поле для ввода текста. Если для атрибута type указано значение password, вводимые пользователем символы отображаются в виде звездочек (*) или маркеров-точек (•)
Многострочное текстовое поле	<textarea>…</textarea>	Текстовое поле, в которое можно ввести несколько строчек текста
Флажок	<input type=»checkbox»>	Выводит поле флажка, который можно установить или очистить
Переключатель	<input type=»radio»>	Выводит переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Обычно создается группа переключателей с одинаковым значением атрибута name, вследствие чего можно выбрать только один из них
Кнопка	<input type=»submit»> <input type=»image»> <input type=»reset»> <input type=»button»>	Выводит стандартную кнопку, активизируемую щелчком мыши. Кнопка типа submit всегда собирает информацию с формы и отправляет ее для обработки. Кнопка типа image делает то же самое, но позволяет вместо текста на кнопке вставить изображение. Кнопка типа reset очищает поля формы от введенных пользователем данных. А кнопка типа button сама по себе не делает ничего. Чтобы ее нажатие выполняло какое-либо действие, для нее нужно добавить сценарий JavaScript
Список	<select>…</select>	Выводит список, из которого пользователь может выбирать значения. Для каждого значения списка добавляем элемент <option>

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

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

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

Добавление подсказок

Обычно поля новой формы не содержат никаких данных. Для некоторых пользователей такая форма может быть не совсем понятной, в частности, какую именно информацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат пример данных, которые нужно ввести в них. Этот подстановочный текст также называется «водяным знаком», так как он часто отображается шрифтом светло-серого цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого подстановочного текста показан на рисунке:

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

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

<input placeholder="Иван Иванов">
  ...
<input placeholder="+7 (xxx) xxx-xxxx">

Браузеры, не поддерживающие подстановочный текст, просто не обращают внимания на атрибут placeholder; особенно грешит этим Internet Explorer. К счастью, это не такая уж и большая проблема, т. к. подстановочный текст — всего лишь приятная примочка, не обязательная для функционирования формы.

В настоящее время не существует стандартного, единообразного способа изменить внешний вид подстановочного текста, например, выделить его курсивом или шрифтом определенного цвета. Со временем разработчики браузеров создадут требуемые для этого обработчики. Но пока либо нужно применять специфические для браузера CSS-псевдоклассы (а именно -webkit-input-placeholder и -moz-placeholder), либо смириться с таким порядком вещей.

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

input:focus {
  background: #eaeaea;
}

Фокус

Так как форма предназначена для ввода информации, первым делом после ее загрузки пользователи захотят вводить эту информацию. К сожалению, делать это они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят его с помощью клавиши <Tab>, установив, таким образом, фокус на этом поле.

Пользователю можно помочь в этом, установив фокус на нужном начальном поле автоматически. Это можно сделать с помощью JavaScript, вызывая метод focus() требуемого элемента <input>. Но этот подход требует лишней строки кода и иногда может вызывать раздражающие неувязки.

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

На этой идее основан новый HTML5-атрибут autofocus, который можно вставить в элемент <input> или <textarea> (но только в один элемент формы), как показано в следующем примере:

<input placeholder="Иван Иванов" autofocus>

Уровень поддержки браузерами атрибута autofocus примерно такой же, как и атрибута placeholder, и означает, что практически все браузеры поддерживают его, за исключением Internet Explorer. Но опять же, эта проблема легко решается. Проверить поддержку атрибута autofocus конкретным браузером можно с помощью инструмента Modernizr (который мы обсуждали в статье «Поддержка браузерами HTML5») и, если необходимо, запускать собственный код для автоматического фокуса.

Формы в HTML5 | WebReference

Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.

Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:

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

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

Для имен задействуем <label>. Для коротких полей — <input type=»text»>. Для больших текстов будем использовать <textarea>. Кнопки сделаны с помощью <input type=»submit»>. Они являются наиболее популярными элементами HTML, которые применяются для построения форм на сайтах. Как всегда, мы начинаем с чистого шаблона HTML, а затем добавляем больше элементов.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
  </body>
</html>

Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег <article> для указания, откуда начинать статью. В HTML мы используем тег <form> в качестве элемента формы.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <form>
    </form>
  </body>
</html>

Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе <form>, потому что остальная часть HTML уже хорошо вам известна.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
</form>

Здесь у нас есть элемент <label>, который описывает имя и элемент <input> для ввода текста. Тег <input> содержит три атрибута: type со значением text, name со значением nickname и id также со значением nickname. Значение атрибута type означает, что это короткое текстовое поле.

Ниже показано, как это поле выглядит для таких типов полей.

Вы будете использовать в коде <input type=»text»> для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.

Атрибут name используется для именования каждого поля. Это полезно, когда вы посылаете форму на сервер, помогает определить, какое значение из какого поля приходит.

Отметим также взаимосвязь между значением id и значением атрибута for атрибута в <label>.

<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">

В атрибуте for вы должны использовать идентификатор поля, описание которого находится в <label>.

Давайте сделаем другую форму, теперь для поля email.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
</form>

Единственная разница в том, что атрибут type имеет значение email. Смысл его, конечно, в том, что пользователь может ввести свою электронную почту. Обратите внимание, что набирается в поле email должно быть проверено на правильность адреса электронной почты. Если это некорректный адрес, то браузер отобразит сообщение об ошибке и не станет отправлять форму.

Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег <textarea>.

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50" name="content" ></textarea>
</form>

Обратите внимание, что мы использовали два новых атрибута: rows и cols. Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.

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

<form>
  <label for="nickname">Ваше имя:</label>
  <input type="text" name="nickname">
  <label for="user-email">Ваш e-mail:</label>
  <input type="email" name="user-email">
  <label for="content">Содержание:</label>
  <textarea rows="10" cols="50"  name="content" ></textarea>
  <input type="submit" value="Добавить">
</form>

Элемент <input> содержит атрибут type равный submit. То что вы напишите в атрибуте value будет отображаться как текст на кнопке.

Наш код для формы теперь выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Форма</title>
    <link rel="stylesheet" href="main. css">
  </head>
  <body>
    <form>
      <label for="nickname">Ваше имя:</label>
      <input type="text" name="nickname">
      <label for="user-email">Ваш e-mail:</label>
      <input type="email" name="user-email">
      <label for="content">Содержание:</label>
      <textarea rows="10" cols="50" name="content"></textarea>
      <input type="submit" value="Добавить">
    </form>
  </body>
</html>

Наш браузер отображает это так.

Выглядит не очень хорошо. В следующей главе мы выясним, как это исправить.

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Время для итогов
Ctrl+←

Разница между <div> и <span>
Ctrl+→

— HTML | MDN

Элемент HTML form (<form>) представляет (собой) раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.

Можно использовать :valid и :invalid CSS псевдоклассы для стилизации <form> элемента, в зависимости от того, валиден или нет конкретный элемент elements внутри формы.

Как и все HTML-элементы, этот элемент поддерживает глобальные атрибуты (en-US).

accept HTML 4 Этот API вышел из употребления и его работа больше не гарантируется.

Список типов содержимого, разделённых запятой, которые принимает сервер.> Примечание: Примечание об использовании: Этот атрибут был удалён в HTML5 и его не следует больше использовать. Взамен, используйте accept атрибут заданного <input> элемента.

accept-charset

Разделённые пробелами символьные кодировки, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку что и у страницы. (В предыдущей версии HTML, различные кодировки могли быть разделены запятыми.)

action

URI-адрес программы, которая обрабатывает информацию переданную через форму. Это значение может быть переписано с помощью атрибута formaction на <button> или <input> элементе.

autocomplete HTML5

Указывает, могут ли элементы управления автоматически быть дописаны в форме браузером. Эта настройка может быть переписана с помощью атрибута autocomplete на элементе формы. Возможные значения:* off: Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.

on: Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы. > **Примечание:**Если вы установили значение off для autocomplete атрибута формы, из-за того, что документ предоставляет своё собственное автодополнение, то вам следует также установить значение off для autocomplete каждого <input> элемента формы, которые документ может автоматически дополнить. Подробнее, смотрите Google Chrome notes.

enctype

Когда значение атрибута method равно post, атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:* application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не задан.

multipart/form-data: Используйте это значение, если пользуетесь элементом <input> атрибутом type установленным в «file».
text/plain (HTML5)Это значение может быть переписано атрибутом formenctype на элементе <button> или <input>.

method

HTTP (en-US) метод, который браузер использует, для отправки формы. Возможные значения:* post: Соответствует HTTP POST методу ; данные из формы включаются в тело формы и посылаются на сервер.

get: Соответствует GET методу; данные из формы добавляются к URI атрибута action, их разделяет ‘?’, и полученный URI посылается на сервер. Используйте этот метод, когда форма содержит только ASCII символы и не имеет побочного эффекта.Это значение может быть переписано атрибутом formmethod на <button> или <input> элементе.

name

Имя формы. В HTML 4 его использование запрещено (id следует использовать взамен). Оно должно быть уникальным и не пустым среди всех форм в документе в HTML 5.

novalidate HTML5

Это Boolean атрибут показывает, что форма не проверяется на валидность, когда отправляется серверу. Если атрибут пропущен (и поэтому форма проверяется), эта настройка по умолчанию, может быть переписана атрибутом formnovalidate на <button> или <input> элементе, принадлежащем форме.

target

Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В HTML 4, это имя или ключевое слово для фрейма. В HTML5, это имя или ключевое слово, контекста просмотра (например, вкладка, окно, или линейный фрейм). Следующие ключевые слова имеют специальное значение:* _self: Загружает ответ в том же самом фрейме HTML 4 (или HTML5 контексте просмотра) как текущий. Это значение по умолчанию, если атрибут не указан.

_blank: Загружает ответ в новом безымянном окне HTML 4 или HTML5 контексте просмотра.
_parent: Загружает ответ HTML 4 в родительском наборе фрейма для текущего фрейма или HTML5 родительский контекст просмотра для текущего просмотра. Если нет предка, эта опция действует точно так же как as _self.
_top: HTML 4: Загружает ответ в полное, оригинальное окно, закрывая все другие фреймы. HTML5: Загружает ответ в верхний уровень контекста просмотра (т.е., контекст просмотра это предок текущего и не имеет других предков). Если нет предка, эта опция действует точно так же как as _self.HTML5: Это значение может быть перезаписано formtarget атрибутом на <button> или <input> элементе.

Этот элемент реализует HTMLFormElement интерфейс.

<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
  <label for="GET-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>
<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input type="text" name="name">
  <input type="submit" value="Save">
</form>
<!-- Форма с fieldset, legend, и label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Другие элементы, которые используются для создания форм: <button>, <datalist>, <fieldset>, <input>,<keygen> (en-US), <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea> (en-US).

Last modified: 14 авг. 2022 г., by MDN contributors

Формы в HTML5

С появлением HTML5 формы получили новые замечательные типы полей ввода и новые атрибуты для полей и форм. В этой статье мы коротко опишем что из себя представляют тринадцать новых типов полей, а также четырнадцать новых атрибутов, что позволит вам составить четкое представление для чего они нужны и как их использовать. Итак, что же нового и полезного дают нам формы в HTML5?

Обратите внимание, что на текущий момент не все новые элементы поддерживаются современными браузерами. Рекомендуется смотреть примеры в браузере Google Chrome

Новые типы полей ввода

Color

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

Date

Поле Date позволит вам выбрать дату из раскрывающегося списка — думаю, Вы часто видели подобные элементы на страницах, когда, например, пытались заказать номер на сайте отеля.

Date-time

Если вы хотите, чтобы пользователь выбрал одновременно не только дату, но и время, например, для указания предпочитаемого рейса, то «date-time» это тот тип поля, который лучше всего подойдет.

Datetime-local

Этот тип поля точно такой же как «date-time», но он предоставляет вам время в локальной временной зоне.

Email

Этот тип поля создан специально для ввода адреса электронной почты, теперь нет необходимости создавать регулярное выражение на JS или PHP для проверки вводимой строки. На смартфонах оно будет вызывать специальную клавиатуру для удобного ввода адреса.

Month

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

Number

Поле Number, как вы могли догадаться, предназначено только для ввода чисел. Вы можете указать разрешенный диапозон для чисел, если вы укажете атрибуты min и max как в приведенном выше примере, а также указать шаг в этом диапазоне.

Range

В поле Range браузер выводит ползунок, который пользователь может перетаскивать влево-вправо. Можно указать минимальное и максимальное значение, а также значение по умолчанию.

Tel

Этот тип поля очень удобно использовать в смартфонах, так как оно вызывает цифровую клавиатуру телефона, чтобы можно было ввести номер телефона максимально просто. Оно, однако, не проверяет правильность ввода, в отличие от Email или URL.

Time

Этот тип ввода позволит пользователям выбирать только определенное время, например, часы и минуты.

Url

Это поле будет проверять на правильность ввода URL-адреса, а на смартфоне откроется URL-клавиатура.

Week

Это поле позволяет пользователю возможность выбрать определенную неделю.

Новые атрибуты форм

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

Autocomplete

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

Autofocus

Этот атрибут ставит курсор в нужное поле при загрузке страницы, так что пользователь может сразу начать печатать.

Form

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

Formaction

Указывает обработчик формы.

Formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер.

Formnovalidate

<form action=»login.php»>
<label for=»name»>Полное имя:</label>
<input type=»text» name=»name» value=»Иванов Иван»/>
<input type=»submit» formnovalidate value=»Send»/>
</form>

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

Formmethod

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

Formtarget

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

List & Multiple

<label>Мой любимый цвет:
<datalist>
<select name=»colours»>
<option value=»Красный»>Красный</option>
<option value=»Желтый»>Желтый</option>
<option value=»Зеленый»>Зеленый</option>
<!— … —>
</select>
Если другой, укажите:
</datalist>
<input type=»text» name=»colour» list=»colours» multiple/>
</label>

Тег <datalist> определяет список предопределенных вариантов элемента <input>, которые можно выбирать при наборе в текстовом поле.

Novalidate

Указывает, что форма не должна быть провалидирована при её отправке на сервер, этот атрибут устанавливается только на элемент формы.

Pattern

Pattern позволяет определить регулярное выражение в HTML-разметке поля, а не в JS.

Placeholder

Placeholder обычно отображается в виде светло-серого текста в поле, до тех пор пока поле не активно. Обычно этот атрибут содержит подсказку, что именно необходимо ввести в это поле.

Required

Атрибут ‘required’ делает поле обязательным к заполнению и форма не может быть отправлена, пока требуемые данные не будут введены. И нет необходимости использовать JS.

Демонстрация

Я надеюсь, что в скором времени все эти поля получат поддержку современных браузеров и это значительно облегчит работу веб-мастеров при создании сложных форм!

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

ВКонтакте

Формы HTML уроки для начинающих академия

❮ Назад Дальше ❯

Пример HTML-формы

Имя:

Фамилия:

Элемент <form>

Элемент HTML <form> определяет форму, которая используется для сбора данных пользователя:

<form>
.
form elements
.
</form>

HTML-форма содержит элементы формы.

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

Элемент < input >

Элемент <input> является наиболее важным элементом формы.

<input>элемент может отображаться несколькими способами в зависимости от атрибута Type .

Вот несколько примеров:

Тип	Описание
<input type=»text»>	Определяет однострочное текстовое поле ввода
<input type=»radio»>	Определяет переключатель (для выбора одного из множества вариантов)
<input type=»submit»>	Определяет кнопку отправки (для отправки формы)

Далее в этом учебнике вы узнаете намного больше о типах ввода.

Ввод текста

<input type="text"> Определяет однострочное поле ввода для text input:

Пример

<form>
First name:<br>
<input type=»text» name=»firstname»><br>
Last name:<br>
<input type=»text» name=»lastname»>
</form>

Так будет выглядеть в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширина текстового поля по умолчанию составляет 20 символов.

Входной сигнал переключателя

<input type="radio"> Определяет переключатель.

Переключатели позволяют пользователю выбрать одно из ограниченного числа вариантов:

Пример

<form>
<input type=»radio» name=»gender» value=»male» checked> Male<br>
<input type=»radio» name=»gender» value=»female»> Female<br>
<input type=»radio» name=»gender» value=»other»> Other
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Male
Female
Other

Кнопка «Отправить»

<input type="submit">Определяет кнопку для Отправка данных формы в обработчик форм.

Обработчик форм обычно является серверной страницей со сценарием для обработки входных данных.

Обработчик форм задается в атрибуте Action формы:

Пример

<form action=»/action_page.php»>
First name:<br>
<input type=»text» name=»firstname» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit» value=»Submit»>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

First name:

Last name:

Атрибут Action

Атрибут action определяет действие, выполняемое при отправке формы.

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

В приведенном выше примере данные формы отправляются на страницу на сервере под названием «/action_page.php». Эта страница содержит сценарий на стороне сервера, обрабатывающий данные формы:

Если атрибут action опущен, действие устанавливается на текущую страницу.

Целевой атрибут

Атрибут target указывает, будет ли отправленный результат открыт в новой вкладке обозревателя, фрейме или в текущем окне.

По умолчанию используется значение «_self«, означающее, что форма будет отправлена в текущем окне.

Чтобы сделать результат формы открытым в новой вкладке обозревателя, используйте значение «_blank«:

Пример

Другими юридическими значениями являются «_parent«, «_top» или имя, представляющее имя IFRAME.

Атрибут метода

method атрибут указывает метод HTTP (Get или POST) для использования при отправке данных формы:

Пример

Или:

Пример

Когда использовать Get?

Метод по умолчанию при отправке данных формы GET.

Однако при использовании Get, отправленные данные формы будут видны в поле адрес страницы:

/action_page.php?firstname=Mickey&lastname=Mouse

Заметки о Get:

Добавление данных формы в URL-адрес в парах «имя/значение»
Длина URL ограничена (около 3000 символов)
Никогда не используйте Get для отправки конфиденциальных данных! (будет отображаться в URL)
Полезно для представлений форм, где пользователь хочет закладка результат
Get лучше для незащищенных данных, таких как строки запроса в Google

Когда использовать POST?

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

Примечания на столбе:

POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
Форма представлений с POST не может быть Закладка

Атрибут Name

Каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, данные этого поля ввода не будут отправлены вообще.

В этом примере будет передаваться только поле ввода «Фамилия»:

Пример

<form action=»/action_page.php»>
First name:<br>
<input type=»text» value=»Mickey»><br>
Last name:<br>
<input type=»text» name=»lastname» value=»Mouse»><br><br>
<input type=»submit» value=»Submit»>
</form>

Группирование данных формы с помощью <fieldset>

Элемент <fieldset> используется для группирования связанных данных в форме.

Элемент <legend> определяет заголовок для <fieldset> Элемент.

Пример

<form action=»/action_page.php»>
<fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type=»text» name=»firstname» value=»Mickey»><br>
    Last name:<br>
    <input type=»text» name=»lastname» value=»Mouse»><br><br>
    <input type=»submit» value=»Submit»>
</fieldset>
</form>

Таким образом, HTML-код выше будет отображаться в браузере:

Личная информация: Имя:

Фамилия:

Вот список атрибутов <form>:

Атрибут	Описание
accept-charset	Задает кодировку, используемую в отправленной форме (по умолчанию: кодировка страницы).
action	Указывает адрес (URL) для отправки формы (по умолчанию: страница отправки).
autocomplete	Указывает, должен ли обозреватель Автозаполнение формы (по умолчанию: on).
enctype	Задает кодировку отправленных данных (по умолчанию: URL-кодировка).
method	Указывает метод HTTP, используемый при отправке формы (по умолчанию: Get).
name	Задает имя, используемое для идентификации формы (для использования DOM: Document.Forms.Name).
novalidate	Указывает, что обозреватель не должен проверять форму.
target	Указывает целевой объект адреса в атрибуте Action (по умолчанию: _self).

Вы узнаете больше о атрибутах формы в следующих главах.

❮ Назад Дальше ❯

Учебник HTML 5. Статья «Формы»

Графическое представление значений

Элементы формы, добавленные в HTML 5

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

Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.

Основная задача формы заключается в том, чтобы принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

Значение	Описание
button	Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox включено выключено	Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color	Элемент управления для задания цвета (определяет палитру цветов).
date	Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local	Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email	Определяет поле для ввода адреса электронной почты.
file	Элемент управления, который позволяет пользователю выбрать файл.
hidden	Элемент управления, который определяет скрытое поле ввода.
image	Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month	Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number	Элемент управления для ввода числа с плавающей точкой.
password	Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio выбрано не выбрано	Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
range	Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны: min = «0» max = «100» value = min + (max — min) / 2, или min (если max меньше чем min) step = «1»
reset	Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search	Определяет однострочное текстовое поле для ввода строки поиска
submit	Определяет кнопку отправки формы
tel	Определяет элемент управления для ввода телефонного номера.
text	Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию.
time	Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url	Определяет поле для ввода абсолютного URL-адреса.
week	Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

checkbox (флаговая кнопка).
radio (радиокнопка).
submit (кнопкa отправки формы).
text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.

первой

Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 32 HTML формы.

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

Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные. Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:

<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example. php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <input type =  "text" name = "firstname" value =  "Введите имя"> <br> <br>
				Фамилия: <input type =  "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
				Мужчина <input type =  "radio" name = "sex" value =  "male" checked>
				Женщина <input type =  "radio" name = "sex" value =  "female"><br> <br>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

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

Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

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

Рис 33 Группировка элементов формы.

Текстовая метка

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

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

Внутри первой формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
Внутри второй формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

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

Рис. 34 Использование текстовой метки (тег <label>).

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

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

email (поле для адреса электронной почты).
password (поле с паролем, в котором скрываются символы).
search (текстовое поле для ввода строки поиска).
text (однострочное текстовое поле).
tel (поле для ввода номера телефона).
url (поле для ввода URL-адреса).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

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

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

Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).

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

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

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

Практическое задание № 22.

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

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

Графическое представление значений

Элементы формы, добавленные в HTML 5

HTML-формы

❮ Назад Далее ❯

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

Пример

Имя:

Фамилия:

Попробуйте сами »

Элемент

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

Все в этой главе рассматриваются различные элементы формы: HTML-элементы формы.

Элемент

Элемент HTML является наиболее используемый элемент формы.

Элемент может отображаться в много способов, в зависимости от тип атрибут.

Вот несколько примеров:

Тип	Описание
	Отображает однострочное поле ввода текста
<тип ввода = "радио">	Отображает переключатель (для выбора одного из множества вариантов)
	Отображает флажок (для выбора нуля или более из множества вариантов)
	Отображает кнопку отправки (для отправки формы)
<тип ввода = "кнопка">	Отображает нажимаемую кнопку

В этой главе рассматриваются все различные типы входов: Типы ввода HTML.

Текстовые поля

определяет однострочное поле ввода для ввод текста.

Пример

Форма с полями ввода текста:

Имя:

Последнее name:

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширина по умолчанию поля ввода составляет 20 символов.

Элемент

Обратите внимание на использование элемента в пример выше.

Тег определяет метку для многих элементы формы.

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

Элемент также помогает пользователям, трудности с нажатием на очень маленькие области (например, переключатели или флажки) — потому что, когда пользователь щелкает текст внутри элемента , он переключается переключатель/флажок.

Атрибут для тега должен быть равным атрибуту id элемент, чтобы связать их вместе.

Радиокнопки

определяет радиокнопку.

Радиокнопки позволяют пользователю выбрать ОДИН из ограниченного числа вариантов.

Пример

Форма с переключателями:

Выберите свой любимый веб-язык:

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Выберите ваш любимый веб-язык:

HTML
CSS
JavaScript

Флажки

определяет флажок .

Флажки позволяют пользователю выбрать НОЛЬ или БОЛЬШЕ вариантов из ограниченного числа вариантов.

Пример

Форма с флажками:

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

У меня есть велосипед
У меня есть машина
У меня есть лодка

Кнопка отправки

определяет кнопку для отправки данных формы обработчику формы.

Обработчик формы обычно представляет собой файл на сервере со сценарием для обработки входные данные.

Обработчик формы указан в действии формы атрибут.

Пример

Форма с кнопкой отправки:

Попробуйте сами »

Вот как приведенный выше HTML-код будет отображаться в браузере:

Имя:

Фамилия:

Атрибут имени для

Обратите внимание, что каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, значение поля ввода вообще не будет отправлено.

Пример

В этом примере не будет отправлено значение поля ввода «Имя»:

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

В форму ниже добавьте поле ввода с типом «кнопка» и значением «ОК».

<форма>
<>

Начать упражнение

❮ Предыдущий Следующая ❯

Атрибуты формы HTML

❮ Предыдущая Далее ❯

В этой главе описываются различные атрибуты элемента HTML

Атрибут действия

Атрибут действия определяет действие, которое должно быть выполнено при отправке формы.

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

В приведенном ниже примере данные формы отправляются в файл с именем «action_page.php». Этот файл содержит сценарий на стороне сервера, который обрабатывает данные формы:

Пример

При отправке отправить данные формы на «action_page.php»:

Первый имя:

Фамилия:

Попробуйте сами »

Совет: Если атрибут action опущен, действие устанавливается на текущую страницу.

Атрибут цели

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

Атрибут target может иметь один из следующие значения:

Значение	Описание
_пусто	Ответ отображается в новом окне или вкладке
_себя	Ответ отображается в текущем окне
_родительский	Ответ отображается в родительском фрейме
_верх	Ответ отображается в полном теле окна
имя кадра	Ответ отображается в именованном iframe

Значение по умолчанию: _self , что означает, что ответ откроется в текущем окне.

Пример

Здесь отправленный результат откроется в новой вкладке браузера:

Попробуйте сами »

Атрибут метода

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

Данные формы могут быть отправлены как переменные URL (с method="get" ) или как почтовая транзакция HTTP (с method="post" ).

Метод HTTP по умолчанию при отправке данных формы — GET.

Пример

В этом примере используется метод GET при отправке данных формы:

Попробуйте сами »

Пример

В этом примере используется метод POST при отправке данных формы:

Попробуйте сами »

Примечания к GET:

Добавляет данные формы к URL-адресу в парах имя/значение
НИКОГДА не используйте GET для отправки конфиденциальных данных! (отправленные данные формы видны в URL!)
Длина URL ограничена (2048 символов)
Полезно для отправки форм, когда пользователь хочет добавить результат в закладки
GET подходит для незащищенных данных, таких как строки запроса в Google

Примечания к POST:

Добавляет данные формы в тело HTTP-запроса (отправленный данные формы не отображаются в URL)
POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
Отправка форм с помощью POST не может быть добавлена в закладки

Совет: Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию!

Атрибут автозаполнения

Атрибут автозаполнения указывает, в форме должно быть включено или выключено автозаполнение.

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

Пример

Форма с автозаполнением:

Попробуйте сами »

Атрибут Novalidate

Атрибут novalidate является логическим атрибутом.

При наличии указывает, что данные формы (ввод) не должны проверяться при отправке.

Пример

Форма с атрибутом novalidate:

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте кнопку отправки и укажите, что форма должна перейти на «/action_page. php».

<форма ="/action_page.php">
Имя:
<>

Начать упражнение

Список всех атрибутов

Атрибут	Описание
принять кодировку	Указывает кодировку символов, используемую для отправки формы
действие	Указывает, куда отправлять данные формы при отправке формы
автозаполнение	Указывает, должно ли в форме быть включено или выключено автозаполнение
enctype	Указывает, как данные формы должны быть закодированы при отправке в сервер (только для метода = «post»)
метод	Указывает метод HTTP для использования при отправке данных формы
имя	Указывает имя формы
повторная проверка	Указывает, что форма не должна проверяться при отправке
отн.	Указывает отношение между связанным ресурсом и текущим документ
цель	Указывает, где отображать ответ, полученный после отправки форма

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003

586 Лучшие ссылки HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top7 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

: Элемент Form — HTML: Язык гипертекстовой разметки

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

Псевдоклассы CSS :valid и :invalid можно использовать для стилизации элемента в зависимости от того, элементы или нет внутри формы действительны.

Этот элемент включает глобальные атрибуты.

принять Устаревший

Типы контента, разделенные запятыми, которые принимает сервер.

Примечание: Этот атрибут устарел и не должен использоваться. Вместо этого используйте атрибут accept для элементов .

принять кодировку

Кодировки символов, разделенные пробелами, которые принимает сервер. Браузер использует их в том порядке, в котором они перечислены. Значение по умолчанию означает ту же кодировку, что и страница. (В предыдущих версиях HTML кодировки символов также могли быть разделены запятыми.)

автокапитализация Нестандартный

Нестандартный атрибут, используемый iOS Safari, который управляет тем, как текстовые элементы формы должны автоматически начинаться с прописной буквы. autocapitalize атрибутов в элементах формы переопределяет его на . Возможные значения:

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

автозаполнение

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

выкл. : Браузер может не заполнять записи автоматически. (Браузеры, как правило, игнорируют это для подозрительных форм входа; см. Атрибут автозаполнения и поля входа. )
на : Браузер может автоматически заполнять записи.

имя

Имя формы. Значение не должно быть пустой строкой и должно быть уникальным среди элементов формы в коллекции форм, в которой оно находится, если таковая имеется.

отн.

Создает гиперссылку или аннотацию в зависимости от значения, подробности см. в атрибуте rel .

Атрибуты для отправки формы

Следующие атрибуты управляют поведением во время отправки формы.

Действие

URL-адрес, который обрабатывает отправку формы. Это значение может быть переопределено атрибутом formaction в элементе

enctype

Если значение атрибута method равно post , enctype — это MIME-тип отправки формы. Возможные значения:

application/x-www-form-urlencoded : значение по умолчанию.
multipart/form-data : Используйте это, если форма содержит элементов с тип=файл .
text/plain : Полезно для целей отладки.

Это значение может быть переопределено атрибутами formenctype для элементов

метод

Метод HTTP для отправки формы. Единственные допустимые методы/значения (без учета регистра):

post : метод POST; данные формы, отправленные в качестве тела запроса.
получить : метод GET; данные формы, добавленные к URL-адресу действия с ? Сепаратор . Используйте этот метод, когда форма не имеет побочных эффектов.
диалоговое окно : когда форма находится внутри <диалогового окна> , закрывает диалоговое окно и вызывает событие отправки при отправке без отправки данных или очистки формы.

Это значение переопределяется атрибутами formmethod для

новалидат

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

цель

Указывает, где отображать ответ после отправки формы. Это имя/ключевое слово для контекста просмотра (например, вкладка, окно или iframe). Следующие ключевые слова имеют особое значение:

_self (по умолчанию): загрузить в тот же контекст просмотра, что и текущий.
_blank : загрузить в новый безымянный контекст просмотра.
_parent : загрузить в родительский контекст просмотра текущего. Если нет родителя, ведет себя так же, как _self .
_top : загрузить в контекст просмотра верхнего уровня (т. е. контекст просмотра, который является предком текущего и не имеет родителя). Если нет родителя, ведет себя так же, как _себя .

Это значение может быть переопределено атрибутом formtarget в элементе

HTML

 
<метод формы="получить">
  <метка>Имя:
    
  
  


<метод формы="сообщение">
  <метка>Имя:
    
  
  


<метод формы="сообщение">
  <набор полей>
    Название
     Выбрать меня

Спецификация
HTML Standard # the-form-element

загрузка таблиц в браузере с поддержкой JavaScript. Включите JavaScript для просмотра данных.

Руководство по HTML-формам
Другие элементы, которые используются при создании форм:
Получение списка элементов в виде: HTMLFormElement.elements
ARIA: роль формы
АРИЯ: роль поиска

Последнее изменение: 14 сентября 2022 г. , авторы MDN

Атрибут HTML: rel — HTML: язык гипертекстовой разметки

Атрибут rel определяет связь между связанным ресурсом и текущим документом. Действителен для , , и , поддерживаемые значения зависят от элемента, для которого найден атрибут.

Тип отношений определяется значением rel , который, если он присутствует, должен иметь значение, представляющее собой неупорядоченный набор уникальных ключевых слов, разделенных пробелами. В отличие от имени класса , которое не выражает семантику, атрибут rel должен выражать токены, семантически допустимые как для машин, так и для людей. Текущие реестры для возможных значений атрибута rel — это реестр отношений ссылок IANA, HTML Living Standard и свободно редактируемая страница с существующими значениями в вики-микроформатах, предложенная Living Standard. Если rel Атрибут, отсутствующий в одном из трех вышеперечисленных источников, используется некоторыми средствами проверки HTML (например, службой проверки разметки W3C) и выдает предупреждение.

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

Атрибут rel относится к , , и элементов, но некоторые значения относятся только к подмножеству этих элементов. Как и все значения атрибутов ключевых слов HTML, эти значения нечувствительны к регистру.

Атрибут rel не имеет значения по умолчанию. Если атрибут опущен или если ни одно из значений в атрибуте не поддерживается, то документ не имеет особой связи с целевым ресурсом, кроме гиперссылки между ними. В данном случае на <ссылка> и <форма> , если атрибут rel отсутствует, не имеет ключевых слов или если нет одного или нескольких ключевых слов, разделенных пробелом выше, то элемент не создает никаких ссылок. и по-прежнему будут создавать ссылки, но без определенного отношения.

альтернативный

Указывает альтернативное представление текущего документа. Действительно для <ссылка> , и <область> , значение зависит от значений других атрибутов.

Примечание: Устаревший rev="made" рассматривается как rel="alternate"

автор

Указывает автора текущего документа или статьи. Релевантно для элементов , и , ключевое слово author создает гиперссылку. С и указывает на связанный документ (или mailto: ) предоставляет информацию об авторе ближайшего

предка, если он есть, иначе весь документ. Для он представляет автора всего документа.

закладка

Релевантно как значение атрибута rel для и элементов, закладка предоставляет постоянную ссылку для предка раздела, который является ближайшим предком

или

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

канонический

Действителен для <ссылка> , он определяет предпочтительный URL-адрес для текущего документа, что полезно для поисковых систем.

предварительная выборка DNS

Относится к элементу как в , так и в , он указывает браузеру упреждающе выполнять разрешение DNS для источника целевого ресурса. Полезно для ресурсов, которые могут понадобиться пользователю, помогает уменьшить задержку и тем самым повысить производительность, когда пользователь получает доступ к ресурсам, поскольку браузер упреждающе выполняет разрешение DNS для источника указанного ресурса. См. описание dns-prefetch в подсказках ресурсов.

внешний

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

помощь

Актуально для , , и , ключевое слово help указывает, что ссылка на содержимое предоставляет контекстно-зависимую справку, предоставляя информацию для родителя элемента определение гиперссылки и ее дочерних элементов. При использовании внутри справка предназначена для всего документа. При включении с и <область> и поддержке курсор по умолчанию будет help вместо pointer .

значок

Действителен с <ссылка> , связанный ресурс представляет собой значок, ресурс для представления страницы в пользовательском интерфейсе для текущего документа.

Наиболее распространенное использование значения значка — это фавикон:

 <ссылка rel="icon" href="favicon.ico" />

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

Примечание: До Firefox 83 атрибут crossorigin не поддерживался для rel="icon" есть также открытая проблема для Chrome.

Примечание. iOS от Apple не использует этот тип ссылки, а также атрибут размеров , как это делают другие мобильные браузеры, для выбора значка веб-страницы для веб-клипа или начального заполнителя. Вместо этого он использует нестандартные apple-touch-icon и apple-touch-startup-image соответственно.

Примечание: Тип ссылки ярлык часто встречается до значок , но этот тип ссылки не соответствует требованиям, игнорируется, и веб-авторы не должны больше его использовать .

лицензия

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

 <ссылка rel="license" href="#license" />

Примечание: Хотя синоним авторское право распознается, он неверен, и его следует избегать.

манифест

Манифест веб-приложения. Требуется использование протокола CORS для выборки из разных источников.

модуль предварительной загрузки

Полезно для повышения производительности и имеет отношение к в любом месте документа, установка rel="modulepreload" указывает браузеру упреждающе загружать скрипт (и зависимости) и сохранять его в карте модуля документа для дальнейшего использования. оценка. Ссылки modulepreload могут гарантировать, что сетевая выборка будет выполнена с готовым (но не оцененным) модулем в карте модуля до того, как он обязательно понадобится. См. также типы ссылок: предварительная загрузка модуля .

следующий

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

nofollow

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

открывалка

Относится к , и , создает контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра, если гиперссылка создает любой из них для начала (т. е. имеет соответствующее значение атрибута target ). Другими словами, это заставляет ссылку вести себя так, как если бы window.opener были нулевыми, а target="_parent" были установлены.

Это противоположность опенеру.

нереферер

Относится к , и , включение этого значения делает реферер неизвестным (заголовок Referer не будет включен) и создает контекст просмотра верхнего уровня, как если бы Также были установлены noopener .

открывалка

Создает вспомогательный контекст просмотра, если в противном случае гиперссылка создала бы контекст просмотра верхнего уровня, который не является вспомогательным контекстом просмотра (т. е. имеет « _blank » в качестве значения атрибута target ). По сути, противоположность noopener.

пингбэк

Указывает адрес сервера проверки связи, который обрабатывает запросы проверки связи для текущего документа.

предварительное соединение

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

предварительная выборка

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

предварительная нагрузка

Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным параметром 9.0019 как атрибут (и приоритет, связанный с соответствующим пунктом назначения).

пререндеринг

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

предыд.

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

Примечание. Синоним предыдущего неверен и не должен использоваться.

поиск

Относится к <форма> , <ссылка> , и , ключевые слова search указывают, что гиперссылка ссылается на документ, интерфейс которого специально разработан для поиска в текущем документе, сайте и связанных ресурсах, предоставляя ссылку на ресурс, который можно использовать для поиска.

Если для атрибута type установлено значение application/opensearchdescription+xml , ресурс представляет собой подключаемый модуль OpenSearch, который можно легко добавить в интерфейс некоторых браузеров, таких как Firefox или Internet Explorer.

Таблица стилей

Действительно для элемента , он импортирует внешний ресурс для использования в качестве таблицы стилей. Атрибут type не нужен, так как это таблица стилей text/css , так как это значение по умолчанию. Если это не таблица стилей типа text/css , лучше всего объявить тип.

Хотя этот атрибут определяет ссылку как таблицу стилей, взаимодействие с другими атрибутами и другими ключевыми терминами в значении rel влияет на загрузку и/или использование таблицы стилей.

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

Внешняя таблица стилей не будет использоваться или даже загружаться, если носитель не соответствует значению атрибута media .

Требуется использование протокола CORS для выборки из разных источников.

бирка

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

Нестандартные значения

сенсорный значок Apple: Указывает значок для веб-приложения на устройстве iOS.

Спецификация
HTML Standard # Linktypes

HTML.ELEMS.LINK.RINK.REL.REL. Включите JavaScript для просмотра данных.

html.elements.a.rel

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

html.elements.area.rel

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

HTMLLinkElement.relList
HTMLAnchorElement.relList
HTMLAreaElement.relList

Последнее изменение: 14 сентября 2022 г. , участниками MDN

Введение в формы HTML5 | HTMLGoodies.com

Поиск

4 октября 2021 г.

Формы — одна из наиболее важных функций интернет-приложений, предоставляющая интерфейс для простого, но эффективного обмена информацией между клиентом и пользователем. Использование форм является важной частью любого бизнес-приложения, независимо от того, используется ли оно онлайн или офлайн. Веб-формы всегда были основой веб-приложений и веб-сайтов. Без них вряд ли были бы возможны различные сделки, обсуждения и чаты.

 



<голова>

<мета-кодировка="utf-8">

 Учебное пособие по формам HTML5 

 css">



<тело>

Нам нужно использовать тег , чтобы сообщить браузеру, что форма начинается здесь:

 



<голова>

<мета-кодировка="utf-8">

 Учебное пособие по формам HTML5 





<тело>

<форма>

С этого момента мы будем рассматривать только тот код, который находится внутри <форма> тег.

Имея это в виду, давайте создадим короткую и простую форму регистрации пользователя, используя тег формы , и создадим поля ввода, такие как Имя и Электронная почта . Чтобы сделать поле « name » обязательным, добавьте атрибут required в это поле ввода.

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

 <форма действие="" метод="">



Регистрационные данные



Имя: 

Электронная почта: 

….

Вы также можете использовать атрибут autofocus для автоматической фокусировки на поле ввода « имя » при загрузке страницы формы:

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

Пользователи могут использовать ранее введенные данные, выбрав их в опции. Атрибут autocompete сохраняет данные в списке данных и позволяет пользователю выбирать введенные ранее входные значения. Таким образом, пользователь может просто выбрать значение и использовать его в поле ввода. Обратите внимание, что автозаполнение должно быть отключено в полях (например, пароль), чтобы избежать доступа без аутентификации.

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

Следующим шагом является использование поля адреса . Текст адреса может быть немного длиннее, поэтому здесь лучше использовать </strong>. </p><pre> <textarea rows="3" cols="50" placeholder="Address" >

Обратите внимание, что мы использовали два новых атрибута: « строк » и « столбцов ». Атрибут « строк » описывает количество строк текста, которые появляются в поле, пока не появится полоса прокрутки. С другой стороны, cols ’ определяет количество символов в каждой строке.

Вы можете попробовать и изменить значения строк и столбцов и посмотреть, как textarea сжимается и расширяется соответственно.

Теперь у нас есть окончательная форма. Полный код будет выглядеть следующим образом:
<голова> <мета-кодировка="utf-8"> Учебник по формам HTML5 <тело> <форма действие="" метод=""> Регистрационные данные <дел>

<дел>