<input> — Button & Others
| Since: | HTML 4(1997) |
|---|
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
sample_input_button.html
<!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.
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.
Browser Support
Chrome
1 and later ○
Firefox
1 and later ○
Safari
1 and later ○
Edge12 and later ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera
12.1 and later ○11.1 and earlier ×
iOS Safari1 and later ○
Android Browser1 and later ○ Chrome AndroidLatest ○ Firefox AndroidLatest ○* Version data based on MDN.
Integration with JavaScript
Buttons can be combined with JavaScript to implement many kinds of behavior beyond form submission.
<!-- Submit button: control form submission with JavaScript -->
<form id="signup-form">
<label for="agree">
<input type="checkbox" id="agree" name="agree">
I agree to the Terms of Service
</label>
<!-- Initially disabled; enabled after checkbox is checked -->
<button type="submit" id="submit-btn" disabled>Register</button>
</form>
<script>
var checkbox = document.getElementById('agree');
var submitBtn = document.getElementById('submit-btn');
checkbox.addEventListener('change', function() {
submitBtn.disabled = !checkbox.checked;
});
document.getElementById('signup-form').addEventListener('submit', function(e) {
// Disable the button on submit to prevent double submission
submitBtn.disabled = true;
submitBtn.textContent = 'Sending...';
// Form submission continues (no e.preventDefault())
});
</script>
<!-- input type="button" to open a help dialog -->
<input type="button" value="Show Help" id="help-btn">
<div id="help-dialog" hidden>
<p>Help content goes here.</p>
<input type="button" value="Close" id="close-btn">
</div>
<script>
document.getElementById('help-btn').addEventListener('click', function() {
document.getElementById('help-dialog').hidden = false;
});
document.getElementById('close-btn').addEventListener('click', function() {
document.getElementById('help-dialog').hidden = true;
});
</script>
If you find any errors or copyright issues, please contact us.
シェアする