<input> — Button & Others

The button and miscellaneous types of the input element let you create controls for various actions — submitting a form, resetting inputs, selecting files, and more.

Syntax

<!-- Form submit button -->
<input type="submit" value="Submit">

<!-- Reset button -->
<input type="reset" value="Reset">

<!-- Generic button (used with JavaScript) -->
<input type="button" value="Click">

<!-- File picker -->
<input type="file" name="upload">

<!-- Hidden field (not visible on screen) -->
<input type="hidden" name="token" value="abc123">

<!-- Image button -->
<input type="image" src="btn.png" alt="Submit">

Attribute values

Value (type)	Description
type="submit"	A button that submits the form to the server. The button label is set with the `value` attribute.
type="button"	A generic button that does nothing on its own. Use it together with JavaScript event handlers.
type="reset"	A button that resets all form fields to their initial values.
type="file"	A control that lets the user select a file. The file data is sent when the form is submitted.
type="hidden"	A hidden field that is not displayed on screen. Use it to send values such as CSRF tokens without showing them to the user.
type="image"	Uses an image as a submit button. The coordinates of the click are also sent with the form data.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Button-type inputs</title>
</head>
<body>

  <form action="/send" method="post" enctype="multipart/form-data">

    <!-- Hidden field (not visible on screen) -->
    <input type="hidden" name="page" value="contact">

    <p>
      <label>Name: <input type="text" name="name"></label>
    </p>

    <p>
      <!-- File picker -->
      <label>Attachment: <input type="file" name="attachment"></label>
    </p>

    <!-- Generic button (handled by JavaScript) -->
    <input type="button" value="Preview" onclick="alert('Showing preview')">

    <!-- Reset button -->
    <input type="reset" value="Reset form">

    <!-- Submit button -->
    <input type="submit" value="Submit">

  </form>

</body>
</html>

Result

A text input, a file picker, and three buttons — "Preview", "Reset form", and "Submit" — are displayed. Clicking "Preview" shows an alert, and clicking "Reset form" clears the input fields.

Rendered HTML (image)

Notes

type="submit" is the primary way to submit a form and is the most commonly used button inside a form. The button label is set with the value attribute. If omitted, the browser displays a default label such as "Submit".

When sending a file with type="file", you must set the form's enctype attribute to multipart/form-data. Without it, the file content will not reach the server. Add the multiple attribute if you want to allow selecting more than one file.

type="hidden" is used to include data — such as CSRF tokens, page IDs, or session values — that should be sent to the server without being shown to the user. Keep in mind that the values are visible in the page source, so do not store passwords or other secrets in hidden fields.

If you need full control over a button's appearance with HTML, consider using the button element instead.