Html codes for forms

: The Form element

The HTML element represents a document section containing interactive controls for submitting information.

Try it

It is possible to use the :valid and :invalid CSS pseudo-classes to style a element based on whether the elements inside the form are valid.

Attributes

This element includes the global attributes.

Comma-separated content types the server accepts.

Note: This attribute has been deprecated and should not be used. Instead, use the accept attribute on elements.

Space-separated character encodings the server accepts. The browser uses them in the order in which they are listed. The default value means the same encoding as the page. (In previous versions of HTML, character encodings could also be delimited by commas.)

A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. autocapitalize attributes on a form elements override it on . Possible values:

• none : No automatic capitalization.
• sentences (default): Capitalize the first letter of each sentence.
• words : Capitalize the first letter of each word.
• characters : Capitalize all characters — that is, uppercase.

Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on . Possible values:

• off : The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see The autocomplete attribute and login fields.)
• on : The browser may automatically complete entries.

The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.

Controls the annotations and what kinds of links the form creates. Annotations include external , nofollow , opener , noopener , and noreferrer . Link types include help , prev , next , search , and license . The rel value is a space-separated list of these enumerated values.

Attributes for form submission

The following attributes control behavior during form submission.

The URL that processes the form submission. This value can be overridden by a formaction attribute on a , , or element. This attribute is ignored when method=»dialog» is set.

If the value of the method attribute is post , enctype is the MIME type of the form submission. Possible values:

• application/x-www-form-urlencoded : The default value.
• multipart/form-data : Use this if the form contains elements with type=file .
• text/plain : Useful for debugging purposes.

This value can be overridden by formenctype attributes on , , or elements.

The HTTP method to submit the form with. The only allowed methods/values are (case insensitive):

• post : The POST method; form data sent as the request body.
• get (default): The GET ; form data appended to the action URL with a ? separator. Use this method when the form has no side effects.
• dialog : When the form is inside a , closes the dialog and causes a submit event to be fired on submission, without submitting data or clearing the form.

This value is overridden by formmethod attributes on , , or elements.

This Boolean attribute indicates that the form shouldn’t be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a , , or element belonging to the form.

Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe). The following keywords have special meanings:

• _self (default): Load into the same browsing context as the current one.
• _blank : Load into a new unnamed browsing context. This provides the same behavior as setting rel=»noopener» which does not set window.opener .
• _parent : Load into the parent browsing context of the current one. If no parent, behaves the same as _self .
• _top : Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as _self .

This value can be overridden by a formtarget attribute on a , , or element.

Examples

form method="get"> label> Name: input name="submitted-name" autocomplete="name" /> label> button>Savebutton> form> form method="post"> label> Name: input name="submitted-name" autocomplete="name" /> label> button>Savebutton> form> form method="post"> fieldset> legend>Do you agree to the terms?legend> label>input type="radio" name="radio" value="yes" /> Yeslabel> label>input type="radio" name="radio" value="no" /> Nolabel> fieldset> form> 

Result

Technical summary

Content categories	Flow content, palpable content
Permitted content	Flow content, but not containing elements
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content
Implicit ARIA role	form if the form has an accessible name, otherwise no corresponding role
Permitted ARIA roles	search , none or presentation
DOM interface	HTMLFormElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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:

Источник

HTML FORMS

In this tutorial, you will learn all about HTML forms, their inputs, submission, and resetting forms.

Forms are one of the most useful and big parts of HTML programming. While filling exam details, participating in surveys, booking tickets or registering account and at many more similar thing what you interact with is an HTML form .

An HTML form is a part of an HTML document that is used to take data as input from the user.

It has input areas such as text field, password field, radio button, checkbox, submit button, menus, etc which is used by the users to enter information.

HTML form element

The tag is used to create an HTML form. Here is a simple example of a form.

The output of the above code looks like this.

The data received by HTML forms are sent to the server for processing.

HTML input type

The information is taken by the user in a form using input sections. There are many different types of input data that a user can submit like name, age, phone number, password, checkbox, etc.

HTML form has a different variety of inputs. The tag is used to specify an input element.

The most important part of the input is input type. It is the input type that defines what kind of information the input box will collect. Example .

Here is list of all types of input an HTML form can have.

Type	Description
	type text — defines single line text input
	type number — defines single line number input which has increasing and decreasing stepper arrows
	type password — defines single line text input but it mask the character
	type radio — defines a radio button(selecting one of many choises)
	type checkbox — defines checkbox (multiple selection from multiple choice)
	type email — defines single line email input space(inclusion of @ is necessary in this box)
	type submit — defines a submit button for submitting form

HTML text input

If you want to take any text input line user’s name then use text type input box.

defines a single line text input field. Here is an example below:

HTML number input

The element with type number defines a number input with inbuilt validation to non-numerical entries.

The browser may provide stepper arrow keys in the input section to increase and decrease the value.

HTML password input

The defines single line password input box where the password entered by user is masked as * (asterisk) or as .(bullet).

HTML radio button input

The radio buttons are used to select one among multiple choices. Like yes or no, male or female, etc.

Use type radio to define a radio button.

A value attribute is used with radio buttons to set a value when a radio button is checked. It is not visible to the user but is used by developers.

There is also a name attribute that is used with a radio button so that server may know where the input came from.

HTML checkbox input

The checkboxes are used when there are multiple selection options like the interest of a person, subject of a class, etc. The type checkbox with the input tag defines a checkbox button.

You can add checked attributes on the checkbox to select them by default.

HTML email input

The type email is used with an input tag to let users enter their email addresses. It defines a single-line text box where the use of @ and a dot (.) is necessary.

HTML submit button

All forms are finally submitted when filled, so technically there must be a submit button in a form.

To create a submit button use type submit on the input tag. The submit button contains a value attribute it stores the value of what is shown on submit button.

Note: When a form is submitted then bu default current page refreshes.

HTML label tag

The tag is an optional part of the HTML form but it is better to use them. label tag doesn’t provide anything special to form but it makes it convenient for the user; when you click on text written in between label tags it will start toggling its corresponding input box.

It can be used in every type of input.

You need to give the tag an id attribute that is same as for value of tag to associate the with an tag.

HTML textarea element

The textarea element defines multiple line boxes to receive multi-line information. like comments, addresses, etc.

It uses the attribute rows and cols to define the size of textarea.

placeholder text

The placeholder attribute is used to provide a brief hind about the input boxes.

The placeholder value should be short and meaningful.

Conclusion

In this tutorial, we learned about HTML forms and their input types in detail.

Источник