HTML Form Buttons

Understanding Form Buttons

The HTML <button> element creates a clickable button that can submit, reset, or perform another action within a form.

Buttons are an important part of most forms because they give users a clear way to complete an action. The button's type attribute determines what happens when the button is selected.

The <button> Element

The <button> element creates an interactive button. Unlike the <input> element, it has opening and closing tags, and the content between them becomes the button's visible content.

<button type="submit">Submit Button</button>

A button can contain text and, when appropriate, other HTML content such as an icon.

Submit Buttons

A button with type="submit" attempts to submit its associated form. The form's validation rules are checked before normal submission takes place.

<button type="submit">Submit Button</button>

If validation succeeds, the form data is submitted according to the form's action and method attributes.

Reset Buttons

A button with type="reset" restores the form controls to their initial values.

<button type="reset">Reset Button</button>

A reset button does not necessarily make every control blank. If a control originally contained a value or selection, resetting the form restores that original state.

The type Attribute

The type attribute determines the default behavior of a <button> element. Its primary values are submit, reset, and button.

<button type="submit">Submit Button</button>
<button type="reset">Reset Button</button>
<button type="button">Regular Button</button>

A button with type="button" has no built-in form submission or reset behavior. It is commonly used when another behavior will be provided by JavaScript.

When a <button> is associated with a form and its type is omitted, the default is generally submit. Explicitly specifying the type makes the intended behavior clear and helps prevent accidental form submissions.

Button Name and Value

A submit button can have name and value attributes. When that button is used to submit the form, its name and value can be included with the submitted form data.

<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="preview">Preview</button>

This can be useful when a form provides more than one submission action and the server needs to determine which button the user selected.

Button vs Input Buttons

Buttons can also be created with the <input> element using types such as submit, reset, and button.

<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">

With an input button, the value attribute provides the visible button text. The <button> element is more flexible because its visible content is placed between its opening and closing tags.

Form Button Example

The following example uses the submit and reset buttons from the master form. Enter information in the field, use Reset Button to restore the form, or use Submit Button to submit the form data.

Button Best Practices

• Give buttons clear text that describes the action they perform.
• Explicitly specify the type of buttons used inside forms.
• Use type="submit" when a button should submit the form.
• Use reset buttons only when restoring the entire form to its original state is genuinely useful.
• Use type="button" for buttons whose behavior is provided separately, such as with JavaScript.
• Use name and value when the selected submit button needs to contribute information to the submitted form data.

Summary

The <button> element creates buttons that can submit a form, reset its controls, or perform another action. The type attribute determines the button's behavior, while name and value can identify a selected submit button in submitted form data.

Using explicit button types and clear button text makes form behavior easier for both users and developers to understand.