Примеры с формами html

HTML Формы

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

Элемент
Элемент является наиболее важным элементом формы. Элемент может отображаться несколькими способами, в зависимости от атрибута type. вот несколько примеров:

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

Ввод текста

Пример

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

Радио кнопка ввода

определяет радио кнопку. Переключатели (радио-кнопки) позволяют пользователю выбрать ОДИН из ограниченного числа вариантов:

Пример

Кнопка ‘Отправить’

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

Пример

Атрибут Action

Атрибут action определяет действие, которое будет выполнено при отправке формы. Обычно данные формы отправляются на веб-страницу на сервере, когда пользователь нажимает кнопку отправки.. В приведенном выше примере данные формы отправляются на страницу на сервере с именем «/action_page.html». Эта страница содержит серверный скрипт, который обрабатывает данные формы:

Атрибут Target

Атрибут target указывает, будет ли отправленный результат открываться в новой вкладке браузера, во фрейме или в текущем окне. По умолчанию значение ‘ _self ‘ означает, что форма будет отправлена в текущем окне. Чтобы сделать результат формы открытым в новой вкладке браузера, используйте значение » _blank «:

Пример

Атрибут Method

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

Пример

Пример

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

Метод по умолчанию при отправке данных формы — GET. Однако при использовании GET отправленные данные формы будут видны в поле адреса страницы.:

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

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

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

• POST не имеет ограничений по размерам и может использоваться для отправки больших объёмов данных
• Отправленные с POST формы нельзя добавить в закладки

Атрибут Name

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

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

Этот пример будет отправлять только поле ввода «Last name»:

Пример

Группировка данных формы с помощью

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

Элемент определяет заголовок для элемента .

Пример

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

HTML Упражнения

Атрибут	Описание
accept-charset	Указывает набор символов, что используется в отправленной форме (по умолчанию: набор символов страницы).
action	Указывает адрес (url), куда отправить форму (по умолчанию: страница отправки).
autocomplete	Указывает, должен ли браузер автоматически заполнять форму (по умолчанию: включено).
enctype	Определяет кодировку отправленных данных (по умолчанию: url-encoded).
method	Указывает метод HTTP, который используется во время отправки формы (по умолчанию: GET).
name	Указывает название, которое используется для идентификации формы (для использования DOM: document.forms.name).
novalidate	Указывает, что браузер не должен проверять форму.
target	Указывает цель адреса в атрибуте action (по умолчанию:_self).

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

Источник

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:

Источник