Формы html понятие назначение

Руководство по HTML-формам

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

Необходимые условия

Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.

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

**Примечание:**Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.

Основные руководства

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

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

Какие виджеты форм доступны?

Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.

Валидация и подтверждение данных форм

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

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

Продвинутые руководства

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

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

Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)

Руководства по стилизации форм

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

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

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

Смотрите также

Found a content problem with this page?

This page was last modified on 26 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Формы html понятие назначение

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

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

Контекст Использования

Категория содержимого	Flow content (en-US)
Разрешённое содержимое	Flow content (en-US) , но не содержащий элементов
Пропуск тега	Нет. И открывающий и закрывающий тег должны быть.
Нормативный документ	HTML5, section 4.10.3 (HTML4.01, section 17.3)

Атрибуты

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

Список типов содержимого, разделённых запятой, которые принимает сервер.

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

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

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

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

• off : Пользователь должен явно ввести значение в каждое поле или документ предоставит свой собственный метод автодополнения; браузер автоматически не дополняет записи.
• on : Браузер может автоматически дополнить значения, основанные на значениях, которые пользователь уже вводил, в течение предыдущего использования формы.

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

Когда значение атрибута method равно post , атрибут — MIME тип содержимого, которое используется, чтобы передать форму на сервер. Возможные значения:

• application/x-www-form-urlencoded : Значение по умолчанию, если атрибут не задан.
• multipart/form-data : Используйте это значение, если пользуетесь элементом атрибутом type установленным в «file».
• text/plain (HTML5) Это значение может быть переписано атрибутом formenctype на элементе или .

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

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

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

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

Имя или ключевое слово, показывающее где отображать ответ, который будет получен, после отправки формы. В 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 атрибутом на или элементе.

DOM_interface

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

Примеры

form action=""> label for="GET-name">Name:label> input id="GET-name" type="text" name="name"> input type="submit" value="Save"> form> form action="" method="post"> label for="POST-name">Name:label> input id="POST-name" type="text" name="name"> input type="submit" value="Save"> form> form action="" method="post"> fieldset> legend>Titlelegend> input type="radio" name="radio" id="radio"> label for="radio">Click melabel> fieldset> form> 

Совместимость браузера

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example

The Element

The HTML element is used to create an HTML form for user input:

The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The Element

The HTML element is the most used form element.

An element can be displayed in many ways, depending on the type attribute.

Type	Description
	Displays a single-line text input field
	Displays a radio button (for selecting one of many choices)
	Displays a checkbox (for selecting zero or more of many choices)
	Displays a submit button (for submitting the form)
	Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields

The defines a single-line input field for text input.

Example

A form with input fields for text:

This is how the HTML code above will be displayed in a browser:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

The Element

Notice the use of the element in the example above.

The tag defines a label for many form elements.

The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.

The for attribute of the tag should be equal to the id attribute of the element to bind them together.

Radio Buttons

The defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

Checkboxes

The defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

The defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

Example

A form with a submit button:

This is how the HTML code above will be displayed in a browser:

The Name Attribute for

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the «First name» input field:

Источник