HTML Form Attributes
Lets see the attributes
Attribute Type
Description
Example
action
Specifies the URL of the server-side script that will process the form data when submitted
Syntax: <form action="URL" method="post">
method
Defines the HTTP method to be used when submitting the form. It can be "get" or "post."
Syntax: <form action="/submit_form.php" method="post">
name
Provides a name for the form, which can be used for identification purposes or when accessing form data via JavaScript
Syntax: <form name="form_name">
value
Sets the initial value of the input element
Syntax: <input type="text" name="input_name" value="initial_value">
autocomplete
Allows you to enable or disable autocomplete for form input fields
Syntax: <form autocomplete="on">
target
Specifies the name of the target window or frame where the form response should be displayed
Syntax: <form action="/submit_form.php" method="post" target="_blank">
Note: know more about Target attribute
enctype
Defines the encoding type for sending data when using "post" method. Common values include "application/x-www-form-urlencoded" (default) and "multipart/form-data" (used for file uploads)
Syntax: <form action="/submit_form.php" method="post" enctype="multipart/form-data">
maxlength
Specifies the maximum number of characters allowed in the input element
Syntax: <input type="text" name="input_name" maxlength="10">
minlength
Specifies the minimum number of characters required in an input element
Syntax: <input type="text" name="password" minlength="8">
min and max
Specifies the minimum and maximum values for numeric input types like number, range, etc
Syntax: <input type="number" name="quantity" min="1" max="10">
size
Specifies the visible width of the input element, measured in characters
Syntax: <input type="text" name="username" size="20">
pattern
Provides a regular expression that the input value must match to be considered valid
Syntax: <input type="text" name="zipcode" pattern="[0-9]{5}">
novalidate
Prevents form validation when submitted. This attribute is used to bypass HTML5 form validation
Syntax: <form action="/submit_form.php" method="post" novalidate>
onsubmit
Specifies a JavaScript function to be executed when the form is submitted
Syntax: <form action="/submit_form.php" method="post" onsubmit="return validateForm()">
onreset
Specifies a JavaScript function to be executed when the form is reset
Syntax: <form action="/submit_form.php" method="post" onreset="clearForm()">
step
Specifies the step increment for numeric input types like number and range
Syntax: <input type="number" name="quantity" step="1">
list
Refers to a <datalist> element that provides a list of predefined options for an input type="text"
Syntax: <input type="text" name="fruit" list="fruitsList">
checked
Specifies that the input element should be pre-selected/checked
Syntax: <input type="checkbox" name="subscribe" checked>
accept-charset
Specifies the character encoding for the submitted form data
Syntax: <form action="/submit_form.php" method="post" accept-charset="UTF-8">
rows and cols
Specifies the visible rows and columns of the textarea
Syntax: <textarea name="comments" rows="4" cols="40"></textarea>
accept
Specifies the types of files that can be selected in an <input type="file"> element
Syntax: <input type="file" name="photos" accept="image/*">
required
Indicates that a form input field must be filled out before the form can be submitted
Syntax: <input type="text" name="username" required>
placeholder
Provides a short hint or example text for an input field
Syntax: <input type="text" name="email" placeholder="Enter your email address">
multiple
Specifies that multiple values can be selected in input elements like <input type="file"> or <select>
Syntax: <input type="file" name="attachments" multiple>
readonly
Makes an input field read-only, meaning the user cannot modify its value
Syntax: <input type="text" name="referenceNumber" value="12345" readonly>
disabled
Disables an input field so that the user cannot interact with it or submit its value
Syntax: <input type="text" name="disabledField" disabled>
autofocus
Specifies that the input element should automatically get focus when the page loads
Syntax: <input type="text" name="username" autofocus>
formaction
Overrides the form's action attribute for this specific input element when submitting the form
Syntax: <input type="submit" value="Submit" formaction="/submit_custom_endpoint">
formmethod
Specifies the HTTP method (GET or POST) to be used when submitting the form
Syntax: <input type="submit" value="Submit" formmethod="post">
formenctype
Specifies how form data should be encoded before sending it to the server (e.g., application/x-www-form-urlencoded, multipart/form-data)
Syntax: <input type="file" name="attachment" formenctype="multipart/form-data">
formtarget
pecifies where to display the response after submitting the form (e.g., _blank, _self, _parent, _top, or a frame name)
Syntax: <input type="submit" value="Submit" formtarget="_blank">
Example
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit_contact.php" method="post" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" name="name" required>
<label for="email">Email:</label>
<input type="email" name="email" required>
<label for="message">Message:</label>
<textarea name="message" rows="4" cols="40" required></textarea>
<input type="checkbox" name="subscribe" id="subscribe" checked>
<label for="subscribe">Subscribe to our newsletter</label>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var message = document.forms["myForm"]["message"].value;
if (name === "" || email === "" || message === "") {
alert("Please fill out all required fields.");
return false;
}
if (!validateEmail(email)) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
</script>
</body>
</html>
