HTML forms use various attributes to define their behavior and appearance.
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">
EDUCATION
<!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>The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now
