❮ HTML <button> tag
Example
Two buttons with equal names, that submit different values when clicked:
<form action="/action_page.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
Try it Yourself »
Definition and Usage
The value attribute specifies the initial value for a <button> in an HTML form.
Note: In a form, the button and its value is only submitted if the button itself was used to submit the form.
Browser Support
| Attribute | | | | | |
| value | Yes | Yes | Yes | Yes | Yes |
Note: If you use the <button> element in an HTML form, Internet Explorer, prior version 8, will submit the text between the <button> and </button> tags, while the other browsers will submit the content of the value attribute.
Syntax
Attribute Values
| Value | Description |
| value | The initial value of the button |
❮ HTML <button> tag
W3schools Pathfinder
Track your progress - it's free!
FAQs
The value attribute in HTML is used to specify the value of an input element such as a button. To pass data from an HTML button to a server or a script, you can set the value attribute of the button to the desired data.
How to pass value in button in HTML? ›
You can pass the button value to a JavaScript function by getting the value attribute of the button and passing it to the function as an argument. Here's an example: HTML: <button id="myButton" value="Button Value">Click Me</button>
How to get value on button click in HTML? ›
Description. The value property sets or returns the value of the value attribute of a button. The value attribute specifies the underlying value that is associated with a button. Important: If you use the <button> element in an HTML <form>, different browsers will submit different values.
How to set value for submit button in HTML? ›
Value. An <input type="submit"> element's value attribute contains a string which is displayed as the button's label. Buttons do not have a true value otherwise. The value provides the accessible description for the button.
Can a button element have a value? ›
Button with a value
An <input type="button"> elements' value attribute contains a string that is used as the button's label. The value provides the accessible description for the button.
How to assign value in HTML? ›
When present in “checkbox”, “radio” and “image” it specifies the value associated with the input.
- Syntax: <input value = "value">
- Example-1: <! DOCTYPE html> ...
- Output:
- Example-2: <! DOCTYPE html> ...
- Output:
- Syntax: <button value = "value">
- Example: <! DOCTYPE html> ...
- Output: Before clicking the button:
Button value Property
- Step 1 − We first create a button inside a form with a value associated with value attribute.
- Step 2 − Next, we target the button element with its id and get the value of the value attribute using the value property.
How to pass a variable into your onClick function
- <p>Todos</p> <ul> { todosArr. map((todo, id) => { return( <div key={id}> <li key={id}>{todo}</li> <button onClick={(id) => onRemove(id)}>Remove</button> </div> ) }) } </ul>
- todosArr. ...
- const onRemove = (id) => { console.
The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.).
What is the button value prop? ›
The Button value Property is used to set or return the value of the value attribute of a button element. The value attribute for <button> element in HTML is used to specify the initial value of the button element.
A button with an onclick event handler is provided to trigger the getValue() function. The getValue() function retrieves the input element using getElementById() , accesses its value property to get the text entered by the user, and displays it in an alert.
What is value in form HTML? ›
The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: For "button", "reset", and "submit" - it defines the text on the button.
What is the name and value attribute in HTML? ›
The value attribute is what is going to get sent back to the server. For instance you can set the value of an input field in the html code, which is helpful for hidden or disabled inputs. The name attribute is how you reference the input, once the value from the input gets sent back to the server.
How to set value in select option in HTML? ›
The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute. The option that is having the 'selected' attribute will be displayed by default on the dropdown list.
What are data attributes in HTML? ›
HTML data-* Attribute
The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
What elements are allowed inside a button in HTML? ›
<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <i> , <br> , or even <img> ), and use ::after and ::before pseudo-elements for complex rendering. If your buttons are not for submitting form data to a server, be sure to set their type attribute to button .
What can be inside button HTML? ›
The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.).
