Action php input type color

HTML Типы ввода форм

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

HTML Типы ввода

Вот различные типы ввода, которые вы можете использовать в HTML:

Тип ввода «text»

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

Пример

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

Тип ввода «password»

определяет поле пароля:

Пример

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

Символы в поле пароля маскируются (отображаются в виде звездочек или кружочков).

Тип ввода «submit»

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

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

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

Пример

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

Если вы опустите атрибут value кнопки submit , то кнопка получит текст по умолчанию:

Пример

Тип ввода «reset»

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

Пример

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

Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.

Тип ввода «radio»

определяет переключатель.

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

Пример

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

Тип ввода «checkbox»

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

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

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

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

Тип ввода «button»

определяет кнопку:

Пример

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

Тип ввода «color»

используется для полей ввода, которые должны содержать цвет.

В зависимости от поддержки браузера в поле ввода может отображаться палитра цветов.

Пример

Тип ввода «date»

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

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

Вы также можете использовать атрибуты min и max для добавления ограничений к датам:

Пример

Тип ввода «datetime-local»

задает поле ввода даты и времени без часового пояса.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

Тип ввода «email»

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

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

Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к клавиатуре, чтобы соответствовать вводу электронной почты.

Пример

Тип ввода «file»

определяет поле выбор файла в «браузере» и кнопку для загрузки файла.

Пример

Тип ввода «month»

позволяет пользователю выбрать месяц и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

Тип ввода «number»

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

Вы также можете установить ограничения на то, какие номера принимаются.

В следующем примере отображается числовое поле ввода, в которое можно ввести значение от 1 до 5:

Пример

Входные ограничения

Вот список некоторых распространенных ограничений ввода:

Атрибут	Описание
checked	Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio»)
disabled	Указывает, что поле ввода должно быть отключено
max	Задает максимальное значение для поля ввода
maxlength	Задает максимальное количество символов для поля ввода
min	Задает минимальное значение для поля ввода
pattern	Задает регулярное выражение для проверки входного значения
readonly	Указывает, что поле ввода доступно только для чтения (не может быть изменено)
required	Указывает, что поле ввода является обязательным (должно быть заполнено)
size	Задает ширину (в символах) поля ввода
step	Задает допустимые интервалы чисел для поля ввода
value	Задает значение по умолчанию для поля ввода

Подробнее об ограничениях на ввод данных вы узнаете в следующей главе.

В следующем примере показано числовое поле ввода, в которое можно ввести значение от 0 до 100 с шагом 10. Значение по умолчанию равно 30:

Пример

Тип ввода «range»

определяет элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок управления). Диапазон по умолчанию от 0 до 100. Однако вы можете установить ограничения на то, какие номера принимаются с помощью атибутов min , max , и step :

Пример

Тип ввода «search»

используется для полей поиска (поле поиска ведет себя как обычное текстовое поле).

Пример

Тип ввода «tel»

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

Пример

Тип ввода «time»

позволяет пользователю выбрать время (без часового пояса).

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

Пример

Тип ввода «url»

используется для полей ввода, которые должны содержать URL адрес.

В зависимости от поддержки браузера поле url адреса может быть автоматически проверено при отправке.

Некоторые смартфоны распознают тип URL адреса, и добавляют, «.com» на клавиатуре, чтобы соответствовать ввода URL адреса.

Пример

Тип ввода «week»

позволяет пользователю выбрать неделю и год.

В зависимости от поддержки браузера в поле ввода может отображаться средство выбора даты.

Пример

HTML Упражнения

HTML Атрибут типа ввода

Источник

input ( type=color ) element

If you don’t know what an element is or how you must use it, I recommend you read the » HTML tags and attributes» tutorial that you can find in the HTML tutorials section.

Description

The input element, having the «color» value in its type attribute, represents a field for a color input. In supporting browsers color fields are usually represented by controls that enable users to change its value in a graphical way (commonly color wells), instead of having to input the color code directly as a string.

Upon submission, supporting browsers convert the input data into a string representing a color. The rules to compose a valid color are described below.

Colors

A color syntax is composed by:

1. A numeral or hash sign character («#»).
2. Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the red component.
3. Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the green component.
4. Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the blue component.

Browser support for color fields is incomplete. To improve compatibility, authors may have to rely on scripts to provide advanced controls and to check values conformance before submission.

Examples

In the first example we’ll only create a form with a color control. Here you’ll be able to note the functionality provided by your browser (if any) for the control.

  action="../../form-result.php" method="post" target="_blank">   Profile main color:  type="color" name="profilemaincolor">  type="submit" value="Send data">   

Now we’ll provide a list of predefined suggested colors for the user to pick, besides the default color picker system. For this purpose we’ll use a datalist , that will be linked to our control thanks to the matching of the id attribute in the list with the list attribute in the control.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

  action="../../form-result.php" method="post" target="_blank">   Profile secondary color:  type="color" name="profilesecondarycolor" list="profilecolorslist">   type="submit" value="Send data">    >"profilecolorslist">   value="#00ffff">   value="#ff00ff">   value="#ffff00">   value="#ffaa00">  

Attributes

Specific attributes

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value «autofocus» or the empty string («»), or if it’s just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

  Paint with:  type="color" name="paintcolor" autofocus>  

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value «disabled» or the empty string («»), or if it’s just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren’t sent when the form is submitted.

  action="../../form-result.php" method="post" target="_blank">   Border color:  type="color" name="bordercolor" disabled>   type="submit" value="Send data">   

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML 5 and helps defining the pertenence of controls in nested or distant forms.

  Background color:  type="color" name="backgroundcolor" form="form1">   >"form1" action="../../form-result.php" method="post" target="_blank">    type="submit" value="Send data">   

list

A token matching the value of the id attribute of the datalist this control is assopciated with. The datalist referenced by this attribute will provide a number of suggestions that users can pick to autocomplete the control.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

The values provided by the datalist element must conform with the requirements of color strings.

  action="../../form-result.php" method="post" target="_blank">   Frame color:  type="color" name="framecolor" list="framecolorslist">   type="submit" value="Send data">    >"framecolorslist">   value="#23fd5d">   value="#f8c255">   value="#3f2ac3">   value="#adeb63">  

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex , formerly used in a special way by some browsers and included in the HTML standard, isn’t permitted in this attribute.

  action="../../form-result.php" method="post" target="_blank">   Ink color:  type="color" name="inkcolor">   type="submit" value="Send data">   

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

• hidden: a hidden control used to send information to the server, typically managed by scripts.
• text: a control used to input a single-line piece of text.
• search: same as text but for search purposes.
• tel: a control used to provide a telephone number.
• url: a text box used to input a single and absolute URL .
• email: a control designed to edit one or more e-mail addresses.
• password: a text box for editing passwords, where the characters are represented by dots.
• date: a control to input a specific date.
• month: a control to input a specific month.
• week: a control to input a specific week.
• time: a control to input a specific time.
• datetime-local: a control to input a specific local date and time.
• number: a control to input a number.
• range: a control to input one or two numbers inside a range.
• color: a control to input a color.
• checkbox: a control to input a boolean value (true/false).
• radio: a control used to choose one single option among many.
• file: a control used to upload files to the server.
• submit: a button used to submit the form.
• image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
• reset: a button used to reset the form’s controls to their default values.
• button: a button with no default action associated.

When this attribute isn’t present, the element behaves as it would have the value «text».

  type="color" name="tattoocolor"> 

value

An initial value for the control, that will be set when the page loads and when the reset button is pressed.

The value provided in this attribute must conform with the requirements of color strings. If this attribute isn’t present, the control takes the default initial value (black).

  action="../../form-result.php" method="post" target="_blank">   Favorite color:  type="color" name="favoritecolor" value="#aaff00">     type="submit" value="Send data">   type="reset" value="Reset form"> 

Global attributes

For information about global attributes refer to this list of global attributes in HTML 5.

Events

Global events

For information about global events refer to this list of global events in HTML 5.

Tutorials

Reference

Источник