Html button data type

button ( type=submit ) 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 button element, having the «submit» value in its type attribute, represents a button that, when pressed, submits the form it belongs to. The label of a button is represented by the content of the element.

With the arrival of HTML 5, several new attributes have been added to this element ( formaction , formenctype , formmethod , formnovalidate and formtarget ) that define and override certain parameters pertaining how the form must be submitted. These new attributes can be used, for example, to provide more than one submit button in one form , and make each of them perform a different type of submission.

In contrast with the input (type=submit) element, this type of button can contain other non-interactive elements.

Examples

In our first example we’ll create a basic form with a couple of fields and a submit button. Here you’ll be able to see and test the functionality of the submit button: when you press it, the form is automatically submitted.

  action="../../form-result.php" target="_blank">   Username:  type="text" name="username">    Password:  type="text" name="password">     type="submit">Submit form   

Now, we’ll provide two submit buttons in the same form , and we’ll make each perform a different type of submission. While the first button uses the default configuration declared in the form element, the second overrides some of the original attributes and produces a submission using the GET method, with no validation of data.

  action="../../form-result.php" method="post" target="_blank">   Username:  type="text" name="user" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]$" title="A proper username must begin with a letter, contain letters, numbers, scores and stops, and have between 3 and 15 characters long" required>    Password:  type="password" name="pass" pattern="[a-zA-Z0-9]" title="A valid password must be composed by letters and/or numbers and have a length between 6 and 15 characters" required>     type="submit">Send    type="submit" formmethod="get" formnovalidate>Send without validation    

Our last example will show the special feature of the button element, which lets it hold other non-interactive elements. This is one of the main differences it has with the intput (type=submit) element.

  action="../../form-result.php" target="_blank">   Search:  type="search" name="searchstring">     type="submit">Submit this form Ha! ha! ha!   

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.

  type="submit" autofocus>Submit form  

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" target="_blank">   Search for an item:  type="search" name="searchitem">   type="submit" disabled>Search    

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.

  >"form1" action="../../form-result.php" target="_blank">   Names:  type="text" name="names">     type="submit" form="form1">Submit  

formaction

A URI indicating the location of the script responsible for the manipulation of the data sent by the form . This script is usually written in a server-side language like ASP , PHP , Python, etc.

This attribute is new in HTML 5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

  target="_blank">   Type:  type="text" name="type">   type="submit" formaction="../../form-result.php">Submit    

formenctype

A value indicating the encoding method to be used for data when the form is submitted. There are three possible case-insensitive values:

• application/x-www-form-urlencoded: spaces are replaced with plus signs («+») and special characters are converted to HEX values. This is the default value.
• multipart/form-data: no encoding is performed. This value is necessary for file uploads.
• text/plain: only spaces are replaced by plus signs («+»).

Remember you must use the value «multipart/form-data» whenever a file is going to be uploaded in the form. Without this configuration, file uploads will fail.

This attribute is new in HTML 5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

  action="../../form-result.php" method="post" target="_blank">   Full name:  type="text" name="fullname">    Picture:  type="file" name="picture">     type="submit" formenctype="multipart/form-data">Send with picture    type="submit">Send without picture    

formmethod

The method browsers should use to send the form’s data. There are three possible case-insensitive values:

• get: data is attached to the URL of the request (the one provided in the action attribute). The name-value pairs are arranged in the form «name=value» and separated each other with an ampersand sign («&»). All this string is appended to the request URL preceded by a question mark («?»). For example, a GET string could be: «form-result.php?user=john&pass=123456»
• post: data is attached to the body of the request.
• dialog: specific for forms inside a dialog element. Instructs the browser to close the dialog box upon form submission. Form results should be handled by scripts.

This attribute is new in HTML 5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

  action="../../form-result.php" target="_blank">   City:  type="text" name="city">   type="submit" formmethod="get">Send with GET    type="submit" formmethod="post">Send with POST    

formtarget

A value specifiyng where the results of the script in charge of processing the data should be loaded. This value can be a browsing-context name (like the value of the name attribute of an iframe ) or any of the following values (case-insensitive):

• _blank: in a new window/tab.
• _parent: in the immediate parent context.
• _self: in the same context that’s containing the form.
• _top: in the topmost context (the greatest parent context containing the form).

This attribute is new in HTML 5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

  action="../../form-result.php" method="post">   Group:  type="text" name="group">   type="submit" formtarget="_blank">Submit    

formnovalidate

A boolean value instructing the browser not to validate the form’s data upon submission. If this attribute takes the value «formnovalidate» or the empty string («»), or if it’s just present, the browser should omit the form’s validation during submission.

This attribute is new in HTML 5 and, if present, overrides the action attribute of the form element. This allows authors to provide one form with two or more buttons that perform different types of submissions.

This attribute is part of the Constraint Validation API , a new feature that allows authors to provide form validation with minimal programming intervention.

  action="../../form-result.php" target="_blank">   Username:  type="text" name="user" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]$" title="A proper username must begin with a letter, contain letters, numbers, scores and stops, and have between 3 and 15 characters long" required>   type="submit">Send    type="submit" formnovalidate>Send without validating    

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.

The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

  action="../../form-result.php" target="_blank">   Username:  type="text" name="username">   type="submit" name="coolsubmitbutton" value="pressed">Submit    

type

A value indicating the expected behavior of the button. There are four possible values (case-insensitive) that will decide the default action carried out by the button when it’s pressed:

• button: there’s no default action associated to the control. The behavior of this type of buttons is usually provided by a script.
• reset: the controls of the associated form are reset to their initial values.
• submit: the associated form is submitted. This is the deafult value.
• menu: the context menu associated to this button is deployed.

When this attribute isn’t present, the button behaves as a «submit» button.

value

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

The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.

  action="../../form-result.php" target="_blank">   Model:  type="text" name="model">   type="submit" name="coolsubmitbutton" value="pressed">Submit    

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

Источник

HTML type Attribute

Two button elements that act as one submit button and one reset button (in a form):

Definition and Usage

The type attribute specifies the type of button.

Tip: Always specify the type attribute for the element. Different browsers may use different default types for the element.

Browser Support

Syntax

Attribute Values

Value	Description
button	The button is a clickable button
submit	The button is a submit button (submits form-data)
reset	The button is a reset button (resets the form-data to its initial values)

❮ HTML tag

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML type Attribute

For elements, the type attribute specifies the type of button.

For elements, the type attribute specifies the type of element to display.

For , , , , , and elements, the type attribute specifies the Internet media type (formerly known as MIME type).

Applies to

The type attribute can be used on the following elements:

Examples

Button Example

Two button elements that act as one submit button and one reset button (in a form):

Embed Example

An embedded flash animation with a specified media type:

Input Example

An HTML form with two different input types; text and submit:

Link Example

In the following example, the type attribute indicates that the linked document is an external style sheet:

Object Example

An element with a specified media type:

Script Example

A script with the type attribute specified:

Source Example

Use of the type attribute:

Style Example

Use the type attribute to specify the media type of the tag :

Browser Support

The type attribute has the following browser support for each element:

Element
button	Yes	Yes	Yes	Yes	Yes
embed	Yes	Yes	Yes	Yes	Yes
input	Yes	Yes	Yes	Yes	Yes
link	Yes	Yes	Yes	Yes	Yes
object	Yes	Yes	Yes	Yes	Yes
script	Yes	Yes	Yes	Yes	Yes
source	4.0	9.0	3.5	4.0	10.5
style	Yes	Yes	Yes	Yes	Yes

Источник