Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

< form id = "search" method = "get" >

< label for = "s" > Search< / label >

< input type = "search" id = "s" name = "s" / >

< input type = "submit" value = "Search" / >

< / form >

< label for = "email" > My email address is< / label >

< input type = "email" id = "email" name = "email" / >

function setErrorMessages (formControl) (

var validityState_object \u003d formControl. validity;

if (validityState_object. valueMissing) (

formControl. setCustomValidity ( "Please set an age (required)") ;

) else if (validityState_object. rangeUnderflow) (

formControl. setCustomValidity ("You \\" re too young ");

) else if (validityState_object. rangeOverflow) (

formControl. setCustomValidity ("You \\" re too old ");

) else if (validityState_object. stepMismatch) (

Greetings to you, dear readers of the blog site. Today I want to talk about someone like HTML forms... Whatever the engine of your site (cms), it will definitely use forms created using Form and Input tags, as well as attributes and parameters Button, Checked, Value, Checkbox, Radio, Checkbox, Submit, in one form or another ...

Well, you can also add elements to this to create drop-down lists and text fields - Select, Option, Textarea, Label, Fieldset, Legend.

Why are we needed and how do forms work on modern websites

The same site search string () is created using these tags, and then search on your project will be mandatory. Therefore, understanding how they are arranged and work will not hurt you at all for successful work on the design, and even with self-promotion and promotion it will not be superfluous.

So, with the justification for the need to study these elements, I think there should be no more questions, so it's time to move directly to the study of their possible options.

Yes, I also want to remind you that we have already reviewed a lot of materials on the topic of hypertext markup language, for example, three) and.

At their core, forms consist of elements, for the creation of which, inside the main container from Form tags, various tags are inserted - Checked, Value, Checkbox, Radio, Checkbox, Submit, etc. We just need to place its code in any convenient place of the site template by specifying with tags and their attributes how it should look.

This can be a text box with a submit button for the query you entered, choices with radio buttons (where you can leave only one of the provided buttons pressed), multiple text boxes with a submit button (), and more.

For example, in the case of "search", using the Value attribute, you can specify what exactly will be written on the button located next to the field for entering a query. The data entered in the forms must be further processed in some way.

For example, in the case feedback the user, after filling in the field with his name, enters his E-mail and the text of the message, and then clicks on the send button, will have the right to hope to send data from the form to the E-mail of the author of the site. But unfortunately, it is not possible to implement this using only one hypertext markup language ().

For these purposes, you will need special program a handler that, after the user clicks the submit button, will take all the data from the feedback fields and send it to the resource owner by E-mail. Which program will do this, you must specify yourself using the Action attribute.

Usually a processing program is a script written in PHP. Therefore, in the Action attribute of the Form tag, you will need to specify the path to the file of this script, which is located on your hosting server. I will give as an example the subscription to the RSS feed of my blog via E-mail:

A little incomprehensible, probably, it seems at the beginning, but I think that everything will become clear as the story progresses.

Form and Input tags for creating buttons, checkboxes and radio buttons

Any form must be enclosed in opening and closing tags Form... This is a kind of container for their creation. This tag has a number of required and optional attributes:

1. Name - a unique name that must be specified if several web forms will be used in the Html file where you are doing something
2. Action is a required attribute indicating the path to the script, which will receive data from it for further processing
3. Method - using it you can change the method of data transfer from this web form to the script of the handler file. If you do not specify it, then the Get method will be used by default, which, in fact, is intended mainly for variables and short messages, and, moreover, by transferring data in an open way through the address bar of the browser. To pass form data to the handler script, it is still better to use pOST methoddesigned specifically for the transmission of text messages in a closed way

Consider the rest of the tags that allow you to create a variety of web forms. The most versatile is Input... Inside it, the Type attribute must be prescribed, which determines what exactly the HTML form created with this tag will be.

The following elements can be created using Input and Type:

1. single line text fields (Type \u003d "Text")
2. fields for entering a password (Type \u003d "Password")
3. checkboxes (Type \u003d "Checkbox")
4. radio buttons (Type \u003d "Radio")
5. hidden fields (Type \u003d "Hidden")
6. regular buttons (Type \u003d "Button")
7. buttons for sending data to the handler (Type \u003d "Submit")
8. buttons for bringing the web form to its original state (Type \u003d "Reset")
9. fields for uploading files to the server (Type \u003d "File)
10. buttons with an image (Type \u003d "Image")

Input has no end tag. What exactly the web form created with it will look like depends entirely on the parameter specified in the Type attribute. If Type is not specified, then a text field will be created by default.

Examples of forms created on Input with different values \u200b\u200bfor Type

Other attributes of the Input tag and examples of their use

Let's see what the rest of the attributes are for:

1. Name - if the data is to be sent to the script of the handler program, then you must specify the parameter for the Name attribute. Under this name, the data submitted from the form will appear in the information handler program.
2. Size - it sets the size of the field of the created web form. The value is indicated in the number of characters that can fit in this field. If Size is not specified, then the default width will be 24 characters
3. Maxlength - by default, the number of characters that can be entered in the Html form is not limited, but using Maxlength you can set this limitation. More characters than it will be specified, you will not be able to enter in the field
4. Value - using it, you can set what exactly will be written by default in the field or on the button for sending data
5. Checked is a flag attribute that can be inserted into Input for radio buttons (radio) or for checkboxes (checkbox). In this case, this radio button or checkbox will be active when loading a page with a web form (there will already be a check mark in them)

Now let's go over everything examples of forms with Input... The appearance of the text field is similar to the appearance of the password input field, so we will only consider the option of creating Text, for example, to enter an email address:

Note that this form uses the Input tag twice — once to create each of the two radio buttons. Moreover, each of them contains the Name attribute with the same value (rezultat), and the Value value is different (YES and NO).

This means that when processing it, if any of the radio buttons is selected, a variable will be sent whose name is written in Name, but the value of this variable will depend on which radio button was selected.

Let's consider an example of creating a web form with checkboxes:

Checkboxes differ from radio buttons by the ability to select several options at once. Name serves to define in the handler file in which checkbox the checkboxes are set, and Value - sets the value that will be sent to the handler (if Value is not specified, then the text located next to this checkbox will be sent to the handler).

Select, Option, Textarea, Label, Fieldset, Legend - drop-down lists, text areas and other elements of web forms

To begin with, I would like to remind you a little what, in fact, web forms are and why they are needed on the site pages. They are primarily designed to repeat the elements available in any operating system in a user-friendly way: buttons, text input fields, drop-down lists, checkboxes, radio buttons, and the like.

All users, without any additional explanation, understand the purpose of these elements and if they see the Html button of the form, they understand that they need to click on it.

Moreover, all its constituent elements (like Select, Option, Textarea, Label, Fieldset, Legend) are already finished blanks (containers), to insert which it will be enough just to use the required tag with the necessary attributes and parameters.

Browsers themselves know how to display a particular element of a web form. True, the options for displaying the same element of it in different browsers may slightly differ from each other, but, as a rule, not significantly.

So it turns out that web forms in Html are an attempt to transfer key elements used in any operating system, to the pages of the website. But why might they be needed on site pages?

In principle, for the same purpose for which similar elements are used in operating systems - the transfer of data from the user. In the case of forms, data from the user is transmitted to the server, where it is processed by a special program (unfortunately, the hypertext markup language does not allow data processing).

Although, the data can be sent not only to the server, but also, for example, by e-mail to the address specified in the Action attribute of the Form tag. When sending data from Html to E-mail, the user who fills in the fields, after pressing the button for sending data, will launch the mail program used on his computer by default.

The opening Form tag in this case should look something like this:

Select and Option - dropdown tags

All elements of the web form that create fields with drop-down lists are formed in the same way. First, the container of the combo box is set using the opening and closing Html Select tag. And then inside this container, separate containers are created with the items (items) of this list. This is done using Option opening and closing tags.

It turns out something like this:

But this is a simplified construction, since select and Option have a number of attributesthat define the properties and appearance of the created dropdown box.

1. Name - you must specify a unique name for this web form element created using Select. This name will be passed to the server in the data handler program as the name for the variable. The value of the Value attribute (set in Option for each item) of the drop-down list item that the user selects will be passed as the value of this variable.
2. Size - you can use it to set the number of displayed items. In other words, with the help of Size, you can set the height of the list, measured in the number of displayed lines. If you do not explicitly specify the Size value in the Select tag, then the default value of the drop-down list height will be used, and it will be different if the Multiple attribute is absent or present in Select:
   1. If Multiple is present in Select, then the height of the drop-down list in the web form will be equal to the number of its elements by default. Those. all items in the multiple choice dropdown will be shown. See an example of a plural below. If the Size attribute in Select is set to less than the number of items, a scroll bar appears on the right.
   2. If there is no Multiple in Select, then the height of the drop-down list in the web form will be equal to one line by default. Those. only one line will be visible, and the rest of the items will be available only when you press the elevator button (right). See example below
3. Multiple - assigning this attribute in the Select tag will allow you to create a drop-down list with the ability to select multiple items at the same time. Read more about this attribute below.

Drop-down forms can be divided into two options. In the first option, you can select only one item (line) of the field with a drop-down list, in the second option - holding Ctrl or Shift you can select several of the available items at the same time.

In this case, in the second option, data on all selected items will be sent to the server. Which drop-down list will be created is determined by the presence or absence of the Multiple attribute in the Select tag.

Multiple is specified in Select without a parameter, since is written simply Multiple and that's it. If it is present, it will create a drop-down list webform with the possibility of multiple selection (holding Ctrl or Shift).

A variant of the field with a drop-down list, which will multiple choice possible, will look something like this:

On the right is an example of a web form for a multi-select dropdown list, which is based on the code above. As you can see, holding Ctrl or Shift can select several items at the same time.

If there is no Multiple attribute in the Select tag, then only one item of this drop-down list (row) can be selected.

An example where only one item can be selected can be seen here:

Label Select SelectED Legend website

Option Tag Attributes

In the created drop-down list (using Select and Option), you can add something like separators with the heading of the groups, which will differ from the rest of the menu items in font style.

To create a group from the drop-down list items, you need to enclose them in the opening and closing tags of the Optgroup form, and in the Optgroup opening tag, write the Label attribute, as a parameter of which you will need to enter the desired group name.

For example like this:

Label Select
SelectED Legend website

Textarea - creating a text field in a form

There is one more element of web forms that we have not considered - Textarea (a field with the ability to enter multi-line text). It is created using the paired Html tag Textarea. Moreover, in it you can transfer text to a new line and it will be transmitted to the server taking into account the transfers made.

So, to create a multi-line text field, you need to register the opening and closing Textarea, and between them you can add text that will be visible when the page with the web form is loaded. The user can then erase this text and write his own.

The following attributes can be used with Textarea:

1. Name - you set a name for this webform element. It will be passed to the server to the data handler program
2. Cols - you can use it to set the width of the created multi-line field in characters.
3. Rows - set the height of the created multi-line field (in rows). If the text entered by the user has more lines than the height of the multi-line text field, a scroll bar will appear to the right of the field in the web form.
4. Readonly - prohibits users from changing or adding their own text to this field (read-only).
5. Disabled - the user, as in the case of the Readonly attribute, will not be able to change the content of the text field in the web form, but it will change its color to gray, indicating that it is inactive.

Label - what is this Html tag in the form for?

The Html Label tag allows you to implement one very interesting feature in forms that is available in operating systems. There, if you remember, in order to activate any element, it is not necessary to click on it, you can click on the name of this element - it will still be activated.

This does not happen in web forms by default - you need to click on the very element of the Html form to activate it. For example, you need to click on a checkbox in order to put a checkmark in it. Clicking on the text next to the flag will have no effect. Try it yourself:

As you can see, clicking on the text to activate this element is useless - you need to click on it yourself. This is exactly what the Label tag is intended to fix. It allows you to make the text next to the web form element clickable, which is undoubtedly will improve usability.

But how to link the Html element of the form and the text? To do this, add an ID with a unique parameter to the attribute, and surround the text with the opening and closing Label tags. And that is not all. In the opening Label tag, you need to register the For attribute, the parameter of which must be exactly the same as the ID attribute in the Html tag of the form element. It turns out something like this:

As you can see, now, thanks to the use of Label, web form elements can be activated not only by clicking on it, but also by clicking on the text located next to it.

Fieldset and Legend - breaking the shape into pieces

You've probably often seen that large forms in Html are divided into groups (Fieldset), which are surrounded by a frame, and each such group has its own title (Legend). This is done with just two tags: Fieldset and Legend. They are paired, i.e. they must have an opening and closing.

So, to create a group of component parts, you need to wrap all these parts in the opening and closing tags of the Fieldset. And in order to set a title (Legend) for this group, you need to immediately after the opening Fieldset write a construction from the opening and closing Legend, between which you need to insert the text of the group title.

Here's an example of creating groups using Fieldset and Legend:

Good luck to you! See you soon on the pages of the blog site

you can watch more videos by going to

You might be interested

Select, Option, Textarea, Label, Fieldset, Legend - Html tags of the drop-down list and text box form
Lists in Html code - tags UL, OL, LI and DL
MailTo - what is it and how to create a link in Html for sending an Email
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex issue and other programs

Tag (from the English. input - input) is one of the versatile form elements and allows you to create different parts of the interface and provide user interaction.

Mainly designed to create text fields, various buttons, radio buttons and checkboxes.

Main attribute that defines the type of the element - type. It allows you to set the following form elements: a text field (text), a password field (password), a radio button, a checkbox, a hidden field, a button, a button to submit a form (submit), a button to clear the form (reset), a field for sending a file (file), a button with an image (image), etc. Each element has its own list of attributes that determine its appearance and characteristics. In addition, more than a dozen new attributes have been added to HTML5.

Syntax

No closing tag required.

WAI ARIA

There is no default role.

Valid values \u200b\u200bfor role:

• button
• checkbox
• combobox
• link
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• radio
• searchbox
• slider
• spinbutton
• switch
• textbox

Attributes

• accept - Sets a filter on the file types that you can submit via the file upload field.
• alt - Alternative text for the image button.
• autocomplete - Enables or disables autocomplete.
• autofocus - Sets focus to a form field.
• checked - A pre-activated radio button or checkbox.
• dirname - A parameter that passes the direction of the text to the server.
• disabled - Blocks access to and modification of the element.
• form - Associates a field with a form by its ID.
• formaction - Defines the address of the form handler.
• formenctype - Sets how the form data is encoded when it is submitted to the server.
• formmethod - Tells the browser what method to send form data to the server.
• formnovalidate - Cancels the built-in data validation.
• formtarget - Specifies the window or frame into which to load the result returned by the form processor.
• list - Indicates a list of options that can be selected as you enter text.
• max - The upper value for entering a number or date.
• maxlength - The maximum number of characters allowed in the text.
• min - Lower value to enter a number or date.
• minlength - The minimum number of characters allowed in the text.
• multiple - Allows you to download multiple files at the same time.
• name - The name of the field, so that the form processor can identify it.
• pattern - Sets the input pattern.
• placeholder - Displays hint text.
• readonly - Specifies that the field cannot be changed by the user.
• required - Required field.
• size - The width of the text box.
• src - Image file address for the image field.
• step - The increment for numeric fields.
• type - Tells the browser what type the form element is.
• value - The value of the element.

accept

Sets the filter for the types of files that you can submit via the file upload field. The file type is specified as a MIME type, with multiple values \u200b\u200bthey are listed separated by commas. If a file does not match the set filter, it is not shown in the file selection window.

Applies to the file upload field ( ).

Browser support

Default value

alt

The alt attribute sets alternative text for the image field. This text allows you to get text information about the picture when the loading of images is disabled in the browser, and is also intended for search engines.

Syntax

The values

Any suitable text string.

Default value

autocomplete

This attribute helps to fill in the form fields with the text that was entered in them earlier. The values \u200b\u200bare stored and substituted by the browser, while autocomplete, for security reasons, can be disabled by the user in the browser settings and cannot be controlled by the autocomplete attribute in this case.

When you enter the first letters of the text, a list of previously saved values \u200b\u200bis displayed, from which you can select the desired one.

Autocompletion of a specific form field is bound to its name attribute and is lost when the value is changed.

Syntax

The values

• on - Turns on autocomplete text.
• off - Disables autocomplete. This value is usually used to disable saving important data (passwords, bank card numbers) in the browser, as well as rarely entered or unique data (captcha).

Default value

Depends on browser settings.

autofocus

Automatically sets focus to the form field. In such a field, you can immediately type text without explicitly clicking on it with the mouse cursor.

Syntax

The values

Default value

By default, the autofocus attribute is not set.

checked

This attribute determines whether a form element such as a checkbox or radio button is pre-marked. In the case of using radiobutton, only one element of the group can be checked; for checkboxes, at least all elements can be checked.

Syntax

The values

Default value

dirname

If the dirname attribute is present, a name / value pair is sent to the server, where the name is specified by the dirname attribute, and the value is substituted by the browser. For left-to-right text, the value will be ltr, and for right-to-left text (Hebrew, for example) the value will be rtl.

Syntax

The values

An arbitrary text string that serves as the name of the parameter. Usually, dir is added at the end of the line to indicate that this parameter specifies the direction of the text.

Default value

disabled

Blocks access and modification of the form field. In this case, it is displayed gray and unavailable for activation by the user. In addition, such a field cannot receive focus by pressing the Tab key, with the mouse, or in any other way. However, this state of the field can be changed using scripts. The value locked in the field is not transmitted to the server.

Syntax

The values

Default value

This attribute is disabled by default.

form

Associates a field with a form by its identifier. Such a connection is necessary in the case when the field is located outside

The values

Form identifier (value of element id attribute

).

Default value

formaction

Determines the address of the form processor - this is the program that receives the form data and performs the desired actions with it. The formaction attribute is similar in action to the action attribute of an element. .

Syntax

The values

formenctype

Sets how form data is encoded when it is sent to the server. Usually it is explicitly specified when the field is used to send a file (input type \u003d "file"). This attribute is similar in effect to the enctype attribute of an element. , when used together, formenctype and enctype are ignored.

Syntax

The values

• application / x-www-form-urlencoded - Place + instead of spaces, characters like Russian letters are encoded with their hexadecimal values \u200b\u200b(for example,% D0% 9F% D0% B5% D1% 82% D1% 8F instead of Petya).
• multipart / form-data - Data is not encoded. This value is used when uploading files.
• text / plain - Spaces are replaced with a + sign, letters and other characters are not encoded.

Default value

application / x-www-form-urlencoded

formmethod

The attribute tells the browser which method to use to submit form data to the server.

Syntax

The values

There are two methods, GET and POST, which are specified with the get and post keywords.

• get - This method is designed to pass form data directly in the address bar as name \u003d value pairs that are appended to the page address after the question mark and separated by an ampersand (& character). The full address, for example, will be http://site.ru/doc/?name\u003dVasya&password\u003dpup. The amount of data in the method is limited to 4 KB.
• post - Sends data to the server in a browser request, the amount of data sent is limited only by the server settings.

Default value

formnovalidate

Cancels the built-in validation of the data entered by the user in the form for correctness before submitting the form. This check is done automatically by the browser for fields. , , and also if the element has a pattern or required attribute .

Syntax

The values

Default value

This attribute is disabled by default.

formtarget

Specifies the name of the frame into which to load the result returned by the form processor as an HTML document.

Syntax

The values

The value is the name of the frame specified by the name attribute. If a non-existent name is set, a new tab will be opened. The following can be used as reserved names.

• _blank - Loads the page into a new browser tab.
• _self - Loads the page to the current tab.
• _parent - Loads the page to the parent frame; if there are no frames, then this value works like _self.
• _top - Cancels all frames and loads the page in a full browser window; if there are no frames, then this value works like _self.

Default value

list

Indicates a list of choices created with an element

Syntax

The values

Item ID name

Default value

max

Sets the top value for entering a number or date in a form field.

Syntax

The values

Default value

maxlength

Sets the maximum number of characters that can be entered by the user in the text box. When this number is reached during dialing, no further input is possible.

Syntax

The values

Default value

Entering characters is not limited.

min

Sets the bottom value for entering a number or date in a form field.

Syntax

The values

A positive or negative integer (for type \u003d "number", type \u003d "range").

Date in YYYY-MM-DD format (for example: 2012-12-22) for type \u003d "date".

Default value

minlength

Sets the minimum number of characters that can be entered by the user in the text box. If the number of characters is less than the specified value, then the browser displays an error message and does not submit the form.

Syntax

The values

Any positive integer.

Default value

multiple

The multiple attribute allows you to specify multiple files at the same time in the file upload field, as well as multiple email addresses. When using two or more postal addresses, they must be separated by commas.

Syntax

The values

Default value

The multiple attribute is off by default.

name

Specifies a unique name for the form element. As a rule, this name is used when sending data to the server or to access the entered field data through scripts.

Syntax

The values

The name is a set of characters, including numbers and letters. JavaScript is case sensitive, so when referring to an element by name, use the same spelling as in the name attribute.

Default value

pattern

Specifies a regular expression according to which you want to enter and validate data in a form field. If the pattern attribute is present, then the form will not be submitted until the field is filled in correctly.

Browser support

Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.

Syntax

The values

Some typical regular expressions are listed in table. 1.

Tab. 1. Regular expressions

Expression	Description
d	One digit from 0 to 9.
D [^ 0-9]	Any character other than a digit.
s	Space.
	Only capital Latin letter.
	Only a Latin letter in any case.
[A-Ya-YaYo]	Only Russian letter in any case.
	Any letter of the Russian and Latin alphabet.
{3}	Three numbers.
{6,}	At least six Latin letters.
{,3}	No more than three digits.
{5,10}	Five to ten digits.
^+$	Any word in Latin.
^ [A-Yaa-yaёs] + $	Any word in Russian including spaces.
^[ 0-9]+$	Any number.
{6}	Postcode.
d + (, d (2))?	Number in the format 1.34 (comma separator).
d + (. d (2))?	Number in the format 2.10 (dot separator).
d (1,3) .d (1,3) .d (1,3) .d (1,3)	IP address

placeholder

Outputs text within a form field, which disappears when focus is obtained or when typing. Usually displayed in gray.

Browser support

Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.

Syntax

The values

Text string. If a space is assumed inside a string, it must be enclosed in double or single quotes.

Default value

readonly

When to an element the readonly attribute is added, the text field cannot be changed by the user, including entering new text or modifying the existing one. However, the state and content of the field can be changed using scripts and the data is sent to the server.

Syntax

The values

Default value

This attribute is disabled by default.

required

Sets the form field to be required before submitting the form to the server. If the required field is empty, the browser will display an error message and the form will not be submitted. The type and content of the message depends on the browser and cannot be changed by the user.

Syntax

The values

Default value

The required attribute is off by default.

size

The width of the text box, which is determined by the number of characters in the monospaced font. In other words, the width is set by the number of adjacent letters of the same horizontal width. If the font size is changed using styles, the width also changes accordingly.

Syntax

The values

Any positive integer.

Default value

src

The address of the graphic file that will be displayed on the web page in the image field. The most popular files are PNG and JPEG.

Syntax

The values

The value is the full or relative path to the file.

Default value

step

Sets the number increment for sliders and number entry fields.

Syntax

The values

Any integer or fractional number.

Default value

type

Tells the browser what type of form element is.

Browser support

email, tel, url:

Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.

Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.

Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.

Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.

date, time, datetime:

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Syntax

The values

Type values:

• button - Button.
• checkbox - Checkboxes. Allows you to select more than one option from the proposed ones.
• file - Field for entering the name of the file that is sent to the server.
• hidden - Hidden field. It is not displayed in any way on the web page.
• image - Image field. When you click on the picture, the form data is sent to the server.
• password - Normal text field, but different from it in that all characters are shown with asterisks. It is designed so that no one can see the entered password.
• radio - Switches. Used when you need to choose one option from several offered.
• reset - Button to return the form data to its original value.
• submit - Button for submitting form data to the server.
• text - Text field. Designed for entering characters using the keyboard.

New values \u200b\u200badded in HTML5:

• color - Widget for choosing a color.
• date - Field for selecting a calendar date.
• datetime - Specify the date and time.
• datetime-local - Specify the local date and time.
• email - For email addresses.
• number - Enter numbers.
• range - Slider for selecting numbers in the specified range.
• search - Search field.
• tel - For phone numbers.
• time - For time.
• url - For web addresses.
• month - Select month.
• week - Select a week.

Default value

value

Specifies the value of a form element to be submitted to the server or received using client scripts. A pair "name \u003d value" is sent to the server, where the name is specified by the name attribute of the element and the value is the value attribute.

The value attribute plays the following role depending on the element type:

• for buttons (input type \u003d "button | reset | submit") sets a text caption on them;
• for text fields (input type \u003d "password | text") specifies the previously entered string. The user can erase the text and enter their characters, but when used in the form of the Reset button, the user text is cleared and the entered in the value attribute is restored;
• for checkboxes and radio buttons (input type \u003d "checkbox | radio") uniquely identifies each element so that the client or server program can uniquely identify which item the user has selected.
• for a file field (input type \u003d "file") has no effect.

Syntax

The values

Any text string.

Default value

ARIA role values

• - role \u003d button
• - role \u003d checkbox
• - role \u003d textbox
• - role \u003d button
• - role \u003d spinbutton
• - role \u003d radio
• - role \u003d slider
• - role \u003d button
• - role \u003d searchbox
• - role \u003d button
• - role \u003d textbox
• - role \u003d textbox
• - role \u003d combobox
• - role \u003d textbox

Did you like the article? To share with friends:

You may also be interested in

Windows 10

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...

Tips for beginners

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...

Tips for beginners

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...

Solution of problems

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...

Useful programs

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...

Wi-Fi setup

Input maximum length. Creation of form fields. Examples of forms created on Input with different values \u200b\u200bfor Type

The tag is one of the versatile form elements and allows you to create different interface elements and provide user interaction. Mainly designed to create ...