Создание форм html: Формы и поля в HTML. Все о HTML формах

Html
24 Дек, 2022
0

Содержание

Создание формы | htmlbook.ru

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

Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:

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

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="a"> <input type="submit"></p>
   <form action="handler.php">
    <p><input name="b"> <input type="submit"></p>
   </form>
  </form>
 </body>
</html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик.

В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form> не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

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

В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).

Пример 3. Отправка формы по почте

HTML5IECrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="mailto:[email protected]" enctype="text/plain">
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).

Рис. 1. Запуск приложения в Firefox

Рис. 2. Предупреждение Internet Explorer

Рис. 3. Выбор программы в Opera

формы

Тег <form>

Как структурировать HTML-формы — Изучение веб-разработки

Назад
Обзор: Forms
Далее

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

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

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

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

Мы уже встречались с этим в предыдущей статье.

Предупреждение:

Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.

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

Элемент <fieldset> — это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы

<legend> перед произношением названия меток элементов.

Небольшой пример:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

Примечание:

вы можете найти этот пример в fieldset-legend.

html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

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

<fieldset> может повысить удобство использования.

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

В предыдущей статье мы увидели, что элемент <label> принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:

<label for="name">Name:</label> <input type="text" name="user_name">

При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если <label> не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент <label>, как на примере:

<label for="name">
  Name: <input type="text" name="user_name">
</label>

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

Лейблы тоже кликабельны!

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

Например:

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" name="taste_banana" value="2">
  </p>
</form>

Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

Несколько лейблов

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

Рассмотрим этот пример:

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
<!-- Тогда это: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>
<!-- лучше сделать таким образом: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>
<!-- Но этот вариант лучше всего: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input type="text" name="username">
</div>

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

В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы <label> могут быть неправильно интерпретированы программой чтения с экрана.
Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

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

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

В добавок к элементу <fieldset> часто используют HTML-заголовки (например, <h2> (en-US), <h3> (en-US)) и секционирование (например, <section>) для структурирования сложных форм.

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

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

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US)). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента <head>:
```
<link href="payment-form.css" rel="stylesheet">
```
Далее начните создавать свою форму с добавления внешнего элемента <form>:
```
<form>
</form>
```
Внутри тега <form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:
```
<h2>Payment form</h2>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>. </p>
```

Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент <section>. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка (<li>). Наконец, у нас есть два текстовых поля <input> и связанные с ними элементы <label>, которые находятся внутри элементов <p>, а также поле для ввода пароля. Добавьте этот код в вашу форму:

<section>
    <h3>Contact information</h3>
    <fieldset>
      <legend>Title</legend>
      <ul>
          <li>
            <label for="title_1">
              <input type="radio" name="title" value="M." >
              Mister
            </label>
          </li>
          <li>
            <label for="title_2">
              <input type="radio" name="title" value="Ms. ">
              Miss
            </label>
          </li>
      </ul>
    </fieldset>
    <p>
      <label for="name">
        <span>Name: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="text" name="username">
    </p>
    <p>
      <label for="mail">
        <span>E-mail: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="email" name="usermail">
    </p>
    <p>
      <label for="pwd">
        <span>Password: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="password" name="password">
    </p>
</section>

Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню (<select>) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types
(en-US). Вставьте следующий код под предыдущим разделом:
```
<section>
    <h3>Payment information</h3>
    <p>
      <label for="card">
        <span>Card type:</span>
      </label>
      <select name="usercard">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="number" name="cardnumber">
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <strong><abbr title="required">*</abbr></strong>
        <em>formatted as mm/yy</em>
      </label>
      <input type="date" name="expiration">
    </p>
</section>
```
Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент <button> с типом submit, для отправки данных. Добавьте этот код в конец вашей формы:
```
<p> <button type="submit">Validate the payment</button> </p>
```

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US).

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

A List Apart: Sensible Forms: A Form Usability Checklist

Назад
Обзор: Forms
Далее

Ваша первая HTML форма
Как структурировать HTML-формы
Стандартные виджеты форм
The HTML5 input types (en-US)
Other form controls (en-US)
Стили HTML-форм
Advanced form styling (en-US)
UI pseudo-classes (en-US)
Проверка данных формы
Отправка данных формы

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

Как создавать пользовательские виджеты форм
Sending forms through JavaScript
Property compatibility table for form widgets (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 14 февр. 2023 г. by MDN contributors.

Ваша первая форма — Изучите веб-разработку

Обзор: Формы
Следующий

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

Предпосылки:	Базовая компьютерная грамотность и базовое понимание HTML.
Цель:	Познакомиться с тем, что такое веб-формы, для чего они используются, как чтобы подумать об их разработке и основных HTML-элементах, которые вам понадобятся для простых случаев.

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

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

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

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

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

В журнале Smashing Magazine есть несколько хороших статей о UX форм, в том числе старая, но все еще актуальная статья Extensive Guide To Usability Web Form.
UXMatters также является очень вдумчивым ресурсом с полезными советами от основных передовых практик до сложных проблем, таких как многостраничные формы.

В этой статье мы создадим простую контактную форму. Сделаем грубый набросок.

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

Хорошо, давайте создадим HTML-код для нашей формы. Мы будем использовать следующие элементы HTML:

, , , <текстовое поле> и <кнопка> .

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

Элемент

Все формы начинаются с элемента , например:

 …< /форма>

Этот элемент формально определяет форму. Это контейнерный элемент, такой как

или

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

Все его атрибуты являются необязательными, но стандартной практикой всегда является установка как минимум атрибутов action и method :

Атрибут action определяет местоположение (URL), куда должны отправляться собранные данные формы представлен.
9Атрибут 0037 method определяет, каким методом HTTP отправлять данные (обычно получает или после ).

Примечание: Мы рассмотрим, как эти атрибуты работают в нашей статье Отправка данных формы позже.

А пока добавьте приведенный выше элемент в ваш HTML .

, и

 </code> элементов </h4>  <p> Наша контактная форма не сложна: часть ввода данных содержит три текстовых поля, каждое с соответствующими <code> <метка> </code> : </p> <ul> <li> Поле ввода имени представляет собой однострочное текстовое поле.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/6/1/061edf9a5ddd7c09b07b2423dfdd595a.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/6/1/061edf9a5ddd7c09b07b2423dfdd595a.jpeg' /></noscript>  </li>
   <li> Поле ввода для электронной почты представляет собой ввод типа электронной почты: однострочное текстовое поле, которое принимает только адреса электронной почты. </li>
   <li> Поле ввода для сообщения <code> <textarea> </code> ; многострочное текстовое поле. </li>
 </ul> <p> С точки зрения HTML-кода, для реализации этих виджетов формы нам нужно что-то вроде следующего: </p><pre> <form action="/my-handling-form-page" method="post">
  <ул>
    <li>
      <label for="name">Имя:</label>
      <input type="text" name="user_name" />
    </li>
    <li>
      <label for="mail">Электронная почта:</label>
      <input type="email" name="user_email" />
    </li>
    <li>
      <label for="msg">Сообщение:</label>
      <textarea name="user_message">
    
  

  Обновите код формы, чтобы он выглядел так, как показано выше. 
 
  Элементы  
  предназначены для удобной структуризации нашего кода и упрощения стиля (см. далее в статье). 
  Для удобства использования и доступности мы включаем явную метку для каждого элемента управления формы.
  Обратите внимание на использование атрибута  вместо  для всех элементов   , который принимает в качестве значения  id  элемента управления формы, с которым он связан — именно так вы связываете элемент управления формы с его меткой.
 
 
  В этом есть большое преимущество — он связывает метку с элементом управления формы, позволяя пользователям мыши, трекпада и сенсорных устройств щелкнуть метку, чтобы активировать соответствующий элемент управления, а также предоставляет доступное имя для чтения с экрана. своим пользователям.
  Дополнительные сведения о метках форм см. в разделе Как структурировать веб-форму.
 
 
  В элементе    наиболее важным атрибутом является атрибут  типа .
  Этот атрибут чрезвычайно важен, потому что он определяет способ, которым    Элемент появляется и ведет себя. 
  Вы найдете больше об этом в статье Основные собственные элементы управления формы позже.
 
  
    В нашем простом примере мы используем текст значения для первого ввода — значение по умолчанию для этого атрибута.
    Он представляет собой базовое однострочное текстовое поле, которое принимает любой тип ввода текста.
   
   
    Для второго входа мы используем значение электронной почты, которое определяет однострочное текстовое поле, которое принимает только правильно сформированный адрес электронной почты.
    Это превращает обычное текстовое поле в своего рода «интеллектуальное» поле, которое будет выполнять некоторые проверки достоверности данных, введенных пользователем.
    Это также приводит к тому, что более подходящая раскладка клавиатуры для ввода адресов электронной почты (например, с символом @ по умолчанию) появляется на устройствах с динамической клавиатурой, таких как смартфоны.
    Вы узнаете больше о проверке формы в статье о проверке формы на стороне клиента позже. 
   
 
 
  И последнее, но не менее важное: обратите внимание на синтаксис    и   .
 Это одна из странностей HTML.
 Тег    является пустым элементом, что означает, что ему не нужен закрывающий тег.   </code> не является пустым элементом, то есть он должен быть закрыт соответствующим закрывающим тегом.
 Это влияет на специфическую особенность форм: то, как вы определяете значение по умолчанию.
 Чтобы определить значение по умолчанию для <code> <input> </code>, вы должны использовать атрибут <code> value </code> следующим образом:</p><pre> <input type="text" value="по умолчанию этот элемент заполнен этим текстом" />
 </pre><p> С другой стороны, если вы хотите определить значение по умолчанию для <code> <textarea> </code> , вы помещаете его между открывающим и закрывающим тегами элемента <code> <textarea> </code>, например:</p><pre> <textarea>
по умолчанию этот элемент заполнен этим текстом
</текстовое поле>
 </pre><h4><span class="ez-toc-section" id="i-7"> Элемент </span></h4><code> <button> </code></h4><p> Разметка для нашей формы почти завершена; нам просто нужно добавить кнопку, чтобы пользователь мог отправить или «отправить» свои данные после заполнения формы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/udomlya.ru/~nelly/Web_design/7.4.jpg' /><noscript><img loading='lazy' src='/800/600/http/udomlya.ru/~nelly/Web_design/7.4.jpg' /></noscript> Это делается с помощью элемента <code> <button> </code>; добавьте следующее непосредственно над закрывающим тегом <code></ul> </code>:</p><pre> <li>
  <button type="submit">Отправить сообщение</button>
</li>
 </pre><p> <code> <кнопка> 9Элемент 0038 также принимает атрибут <code> типа </code> — он принимает одно из трех значений: <code> submit </code> , <code> reset </code> или <code> button </code> .</p><ul><li> Щелчок по кнопке <code> отправки </code> (значение по умолчанию) отправляет данные формы на веб-страницу, определенную атрибутом <code> action </code> элемента <code><form> </code>.</li><li> Щелчок по кнопке <code> сброса </code> немедленно сбрасывает все виджеты формы к их значениям по умолчанию. С точки зрения UX это считается плохой практикой, поэтому вам следует избегать использования кнопок такого типа, если у вас действительно нет веских причин для их включения.</li><li> Щелчок по кнопке <code> </code> кнопки <em> ничего не делает </em> ! Это звучит глупо, но это удивительно полезно для создания пользовательских кнопок — вы можете определить их функциональность с помощью JavaScript.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/5MatP.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/5MatP.png' /></noscript></li></ul><p> <strong> Примечание: </strong> Вы также можете использовать элемент <code> <input> </code> с соответствующим типом <code> </code> для создания кнопки, например <code> <input type="submit"> </code> . Основное преимущество элемента <code> <button> </code> заключается в том, что 9Элемент 0037 <input> </code> допускает только обычный текст в своей метке, тогда как элемент <code> <button> </code> допускает полный HTML-контент, что позволяет использовать более сложное, креативное содержимое кнопок.</p><p> Теперь, когда вы закончили писать HTML-код формы, попробуйте сохранить его и просмотреть в браузере. На данный момент вы увидите, что это выглядит довольно некрасиво.</p><p> <strong> Примечание: </strong> Если вы считаете, что у вас неправильный HTML-код, попробуйте сравнить его с нашим готовым примером — см. first-form.html (также см. его вживую).</p><p> Общеизвестно, что формы сложно красиво стилизовать. Подробное обучение стилизации форм выходит за рамки этой статьи, поэтому на данный момент мы просто попросим вас добавить немного CSS, чтобы все выглядело нормально.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/files3.vunivere.ru/workbase/00/01/95/60/images/image001.jpg' /><noscript><img loading='lazy' src='/800/600/http/files3.vunivere.ru/workbase/00/01/95/60/images/image001.jpg' /></noscript></p><p> Прежде всего, добавьте элемент <code><style></code>на вашу страницу внутри заголовка HTML. Должно получиться так:</p><pre><style>… </стиль></pre><p>Внутри тегов </code>в стиле <code>добавьте следующий CSS:</p><pre>form{поле:0 авто;ширина:400 пикселей;набивка:1em;граница:1px сплошная #ccc;радиус границы:1em}ул{стиль списка:нет;заполнение:0;маржа:0}форма ли+ли{поле сверху:1em}этикетка{отображение:встроенный блок;ширина:90 пикселей;выравнивание текста:вправо}вход,текстовая область{шрифт:1em без засечек;ширина:300 пикселей;box-sizing:граница-коробка;граница:1px сплошная #999}ввод:фокус,текстовая область:фокус{цвет границы:#000}текстовая область{вертикальное выравнивание:сверху;высота:5см}.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/alfintechcomputer.com/wp-content/uploads/2020/11/html-form.png'/><noscript><img loading='lazy' src='/800/600/http/alfintechcomputer.com/wp-content/uploads/2020/11/html-form.png'/></noscript>кнопка{отступ слева:90 пикселей}кнопка{поле слева:0,5em}</pre><p>Сохраните и перезагрузите,и вы увидите,что ваша форма должна выглядеть гораздо менее уродливой. </p><p><strong>Примечание:</strong>Вы можете найти нашу версию на GitHub по адресу first-form-styled.html (также посмотрите ее вживую). </p><p>Последняя и,возможно,самая сложная часть — это обработка данных формы на стороне сервера. <code>Элемент <form></code>определяет,куда и как отправлять данные благодаря атрибутам <code>action </code>и <code>method </code>. </p><p>Мы предоставляем атрибут имени <code></code>для каждого элемента управления формы. Имена важны как на стороне клиента,так и на стороне сервера;они сообщают браузеру,какое имя дать каждой части данных,а на стороне сервера они позволяют серверу обрабатывать каждую часть данных по имени.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/1/1/0114fe18bcfb8191d6440992eaa569e3.jpeg'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/1/1/0114fe18bcfb8191d6440992eaa569e3.jpeg'/></noscript>Данные формы отправляются на сервер в виде пар имя/значение. </p><p>Чтобы назвать данные в форме,вам нужно использовать <code>имя </code>атрибут в каждом виджете формы,который будет собирать определенный фрагмент данных. Давайте еще раз посмотрим на код нашей формы:</p><pre><form action="/my-handling-form-page" method="post"><ул><li><label for="name">Имя:</label><input type="text" name="user_name"/></li><li><label for="mail">Электронная почта:</label><input type="email" name="user_email"/></li><li><label for="msg">Сообщение:</label><textarea name="user_message">
… В нашем примере форма отправит 3 элемента данных с именами «user_name »,«user_email » и «user_message ». Эти данные будут отправлены на URL-адрес «/my-handling-form-page » с использованием метода HTTP POST . 
На стороне сервера скрипт по URL-адресу «/my-handling-form-page » получит данные в виде списка из 3 элементов типа «ключ/значение»,содержащихся в HTTP-запросе.То,как этот скрипт будет обрабатывать эти данные,зависит от вас. Каждый серверный язык (PHP,Python,Ruby,Java,C# и т. д.) имеет собственный механизм обработки данных формы. Подробное рассмотрение этой темы выходит за рамки данного руководства,но если вы хотите узнать больше,мы предоставили несколько примеров в нашей статье «Отправка данных формы» позже. 
Поздравляем,вы создали свою первую веб-форму. Вживую это выглядит так:
<дел>Имя:

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

<дел>Сообщение:

<дел>

форма{поле:0 авто;ширина:400 пикселей;набивка:1em;граница:1px сплошная #ccc;радиус границы:1em}дел+дел{поле сверху:1em}этикетка{отображение:встроенный блок;ширина:90 пикселей;выравнивание текста:вправо}вход,текстовая область{шрифт:1em без засечек;ширина:300 пикселей;-moz-box-sizing:рамка-бокс;box-sizing:граница-коробка;граница:1px сплошная #999}ввод:фокус,текстовая область:фокус{цвет границы:#000}текстовая область{вертикальное выравнивание:сверху;высота:5см;изменить размер:вертикальный}.кнопка{отступ слева:90px}кнопка{поле слева:0,5em}

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

Обзор:Формы
Следующий

`Расширенные темы`

Создание пользовательских элементов управления формы
Отправка форм через JavaScript
Таблица совместимости свойств для виджетов формы

`Обнаружили проблему с содержанием этой страницы?`

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте,как внести свой вклад.

Последний раз эта страница была изменена 28 февраля 2023 г. участниками MDN.

`Как создавать HTML-формы`

Рекламные объявления

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

`Что такое HTML-форма`

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

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

<форма>9Тег 0038 используется для создания HTML-формы. Вот простой пример формы входа:

`Пример`

Попробуйте этот код » Имя пользователя:Пароль:
В следующем разделе описаны различные типы элементов управления,которые можно использовать в форме.
Элемент ввода 
Это наиболее часто используемый элемент в формах HTML. 
Позволяет указать различные типы полей ввода пользователя,в зависимости от атрибута типа . Элемент ввода может быть типа текстовое поле ,поле пароля ,флажок ,переключатель ,кнопка отправки ,кнопка сброса ,поле выбора файла ,а также несколько новых типов ввода в HTML5. 
Наиболее часто используемые типы ввода описаны ниже. 
Текстовые поля 
Текстовые поля представляют собой однострочные области,которые позволяют пользователю вводить текст. 
Элементы управления вводом однострочного текста создаются с использованием элемента ,чей атрибут type имеет значение text . Вот пример однострочного ввода текста,используемого для ввода имени пользователя:
Пример 
Попробуйте этот код » Имя пользователя:<тип ввода="текст" имя="имя пользователя">
— вывод приведенного выше примера будет выглядеть примерно так:
Примечание:Тег используется для определения меток для элементов .Если вы хотите,чтобы ваш пользователь ввел несколько строк,вы должны вместо этого использовать </code>. </p><hr/><h3><span class="ez-toc-section" id="i-14">Поле пароля </span></h3><p>Поля пароля аналогичны текстовым полям. Единственная разница в том,что;символы в поле пароля маскируются,т. е. отображаются в виде звездочек или точек. Это делается для того,чтобы кто-то другой не мог прочитать пароль на экране. Это также элементы управления однострочным вводом текста,созданные с использованием <code><input></code>элемент,чей атрибут <code>type </code>имеет значение <code>password </code>. </p><p>Вот пример однострочного ввода пароля,используемого для получения пароля пользователя:</p><p/><h5><span class="ez-toc-section" id="i-15">Пример </span></h5>Попробуйте этот код » <pre><form><label for="user-pwd">Пароль:</label><input type="password" name="user-password"></form></pre><p>— вывод приведенного выше примера будет выглядеть примерно так:</p><hr/><h3><span class="ez-toc-section" id="i-16">Радиокнопки </span></h3><p>Радиокнопки позволяют пользователю выбрать только один вариант из предопределенного набора параметров.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/jqueryform.github.io/posts/images/form-html.jpg'/><noscript><img loading='lazy' src='/800/600/http/jqueryform.github.io/posts/images/form-html.jpg'/></noscript>Он создается с использованием элемента <code><input></code>,чей атрибут <code>type </code>имеет значение <code>radio </code>. </p><p>Вот пример переключателей,которые можно использовать для сбора информации о поле пользователя:</p><p/><h5><span class="ez-toc-section" id="i-17">Пример </span></h5>Попробуйте этот код » <pre><form><input type="радио" name="пол"><label for="male">Мужской</label><input type="радио" name="пол"><label for="female">Женщина</label></форма></pre><p>— вывод приведенного выше примера будет выглядеть примерно так:</p><hr/><h3><span class="ez-toc-section" id="i-18">Флажки </span></h3><p>Флажки позволяют пользователю выбрать один или несколько параметров из предопределенного набора параметров. Он создается с использованием элемента <code><input></code>,чей атрибут <code>type </code>имеет значение <code>checkbox </code>. </p><p>Вот пример флажков,которые можно использовать для сбора информации об увлечениях пользователя:</p><p/><h5><span class="ez-toc-section" id="i-19">Пример </span></h5>Попробуйте этот код » <pre><форма><input type="checkbox" name="спорт"><label for="soccer">Футбол</label><input type="checkbox" name="спорт"><label for="cricket">Крикет</label><input type="checkbox" name="спорт"><label for="baseball">Бейсбол</label></form></pre><p>— вывод приведенного выше примера будет выглядеть примерно так:</p><p><strong>Примечание:</strong>Если вы хотите сделать переключатель или флажок выбранным по умолчанию,вы можете добавить атрибут <code>проверил </code>для элемента ввода,например <code><input type="checkbox" checked></code>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/115527562/original/ef8b0baf15b855812cbd176e524d89e6cd589ef0/create-responsive-html-form-and-integrate-with-database.jpg'/><noscript><img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/115527562/original/ef8b0baf15b855812cbd176e524d89e6cd589ef0/create-responsive-html-form-and-integrate-with-database.jpg'/></noscript></p><hr/><h3><span class="ez-toc-section" id="i-20">Поле выбора файла </span></h3><p>Поля файла позволяют пользователю найти локальный файл и отправить его в виде вложения с данными формы. Веб-браузеры,такие как Google Chrome и Firefox,отображают поле ввода выбора файла с кнопкой «Обзор»,которая позволяет пользователю перемещаться по локальному жесткому диску и выбирать файл. </p><p>Это также создается с использованием элемента <code><input></code>,чьи <code>тип </code>значение атрибута установлено на <code>файл </code>. </p><p/><h5><span class="ez-toc-section" id="i-21">Пример </span></h5>Попробуйте этот код » <pre><form><label for="file-select">Загрузить:</label><input type="file" name="upload"></form></pre><p>— вывод приведенного выше примера будет выглядеть примерно так:</p><p><strong>Совет:</strong>Существует несколько других типов ввода. Пожалуйста,ознакомьтесь с главой о новых типах ввода HTML5,чтобы узнать больше о новых типах ввода. </p><hr/><h3><span class="ez-toc-section" id="Textarea">Textarea </span></h3><p>Textarea — это элемент управления многострочным вводом текста,который позволяет пользователю вводить более одной строки текста.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg'/></noscript>Элементы управления многострочным вводом текста создаются с использованием элемента <code><textarea></code>. </p><p/><h5><span class="ez-toc-section" id="i-22">Пример </span></h5>Попробуйте этот код » <pre><form><label for="address">Адрес:</label><textarea rows="3" cols="30" name="address">
— вывод приведенного выше примера будет выглядеть примерно так:
Поля выбора 
Поле выбора — это раскрывающийся список параметров,который позволяет пользователю выбрать один или несколько параметров из раскрывающегося списка параметров. Поле выбора создается с использованием элемента определяют каждый элемент списка. 
Пример 
Попробуйте этот код » Город:<выбрать имя="город">
— вывод приведенного выше примера будет выглядеть примерно так:
Кнопки отправки и сброса 
Кнопка отправки используется для отправки данных формы на веб-сервер.При нажатии кнопки отправки данные формы отправляются в файл,указанный в атрибуте формы action ,для обработки отправленных данных. 
Кнопка сброса сбрасывает все элементы управления формами на значения по умолчанию. Попробуйте следующий пример,введя свое имя в текстовое поле и нажав кнопку отправки,чтобы увидеть его в действии. 
Пример 
Попробуйте этот код » Имя:<тип ввода="сброс" значение="Сброс">
Введите свое имя в текстовое поле выше и нажмите кнопку отправки,чтобы увидеть его в действии. 
Примечание:Вы также можете создавать кнопки,используя <кнопка>элемент. Кнопки,созданные с помощью элемента

Атрибут	Описание
`имя`	Задает имя формы.
`действие`	Указывает URL-адрес программы или скрипта на веб-сервере,который будет использоваться для обработки информации,отправленной через форму.
`метод`	Указывает метод HTTP,используемый для отправки данных на веб-сервер браузером. Значение может быть либо `получить` (по умолчанию),либо `после` .
`цель`	Указывает,где отображать ответ,полученный после отправки формы. Возможные значения:`_blank` ,`_self` ,`_parent` и `_top` .
`enctype`	Указывает способ кодирования данных формы при отправке формы на сервер. Применимо,только если значением атрибута `method` является `post` . No related posts. ВпередSeo самостоятельно:Бесплатная пошаговая инструкция по продвижению сайтов самостоятельно — SEO на vc.ru НазадКак сделать обводку текста:Выполнение обводки текста в Фотошопе Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован.Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты Блог сумасшедшего сисадмина ©2024. Все права защищены. Карта сайта

Создание форм html: Формы и поля в HTML. Все о HTML формах

Создание формы | htmlbook.ru

Как структурировать HTML-формы — Изучение веб-разработки

Лейблы тоже кликабельны!

Несколько лейблов

Активное обучение: построение структуры формы

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

Found a content problem with this page?

Ваша первая форма — Изучите веб-разработку

Элемент

`Расширенные темы`

`Обнаружили проблему с содержанием этой страницы?`

`Как создавать HTML-формы`

`Что такое HTML-форма`

`Пример`

Элемент ввода

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

Пример

`Поля выбора`

`Пример`

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

Пример

Группировка элементов управления формы

Пример

Часто используемые атрибуты формы

Добавить комментарий Отменить ответ

Рубрики

Рубрики