The <form> element in HTML can be customized with various attributes to control how the form is submitted and processed. Here are the key attributes you can use:
Description: Specifies the URL where the form data will be sent when the form is submitted. This can be a server-side script (like .php, .jsp, .asp) or any other URL that processes the form data.
<form action="submitform.html" method="post">
Description: Defines the HTTP method to use when submitting the form. The two most common methods are post and get.
post : Sends form data in the body of the request, making it suitable for sensitive or large amounts of data. It does not display the data in the URL.
<form action="submitform.html" method="post">
get : Appends form data to the URL, making it visible in the address bar. It is suitable for non-sensitive data and data retrieval tasks.
<form action="submitform.html" method="get">
The target attribute in HTML is used to specify where to display the response after submitting a form or clicking on a hyperlink. Here’s how it works with different values:
Description: Opens the response in the same frame or window where the form was submitted or the link was clicked. This is the default behavior if no target attribute is specified.
Description: Opens the response in a new window or tab. This is useful when you want to keep the original page open while displaying the result in a new window.
Description: Opens the response in the parent frame. If the current page is within a frame or iframe, the response will load in the parent frame of the current frame.
Description: Opens the response in the full window, replacing any frames or iframes. This is used to break out of frames and show the content in the top-level browsing context.
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Attribute Example</title>
</head>
<body>
<!-- Opens the response in the same window/frame -->
<form action="https://waytocode.in/" method="get"
target="_self">
<input type="submit" value="Submit to _self">
</form>
<br>
<!-- Opens the response in a new window/tab -->
<form action="https://waytocode.in/" method="get"
target="_blank">
<input type="submit" value="Submit to _blank">
</form>
<br>
<!-- Opens the response in the parent frame -->
<form action="https://waytocode.in/" method="get"
target="_parent">
<input type="submit" value="Submit to _parent">
</form>
<br>
<!-- Opens the response in the full window, breaking out of frames -->
<form action="https://waytocode.in/" method="get" target="_top">
<input type="submit" value="Submit to _top">
</form>
</body>
</html>
The autocomplete attribute in HTML is used to specify whether a form or input field should have autocomplete enabled or disabled. This feature helps users by suggesting previously entered values to save time when filling out forms.
Description: This is the default value. It enables the browser's autocomplete feature, allowing users to see and select previously entered values.
<input type="text" name="username" autocomplete="on">
Description: This value disables the browser's autocomplete feature, preventing the browser from suggesting or saving previously entered values.
<input type="text" name="username" autocomplete="off">
The novalidate attribute is a Boolean attribute introduced in HTML5. When applied to a >form> element, it prevents the browser from performing validation on the form's input fields before submission. This allows the form to be submitted even if some of the input data is invalid according to the HTML5 validation rules.
Without novalidate: By default, browsers will validate the form inputs based on the HTML5 validation rules. For example, required fields must be filled out, and email fields must contain a valid email address.
With novalidate: Adding the novalidate attribute to the >form> element will disable these automatic validation checks. The form will be submitted regardless of the validity of the input fields.
<form action="action.html" method="post" enctype="text/plain">
The <input> element in HTML is used to create various types of input fields on a web form. Several attributes can be applied to the <input> element to define its behavior and appearance. Here are some of the key attributes:
Description: Defines the name of the input element. This name is sent to the server with the form data when the form is submitted.
Description: Sets the initial or default value of the input field.
Description: Indicates that the user must fill out the input field before submitting the form. This is a Boolean attribute.
Description: Provides a hint to the user about what can be entered in the field. This hint is displayed in the input field before the user enters a value.
Description: Disables the input field, preventing the user from interacting with it. The value of a disabled input field is not submitted with the form.
Description: Sets the width of the input field in terms of the number of characters.
<!DOCTYPE html>
<html>
<head>
<title>HTML Input Element Attributes Example</title>
</head>
<body>
<h2>HTML Input Element Attributes Example</h2>
<form action="/submit_form" method="post">
<!-- Name Attribute -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required
placeholder="Enter your username" size="20">
<br><br>
<!-- Value Attribute -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"
value="example@example.com">
<br><br>
<!-- Required Attribute -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- Disabled Attribute -->
<label for="disabledField">Disabled Field:</label>
<input type="text" id="disabledField" name="disabledField" disabled
value="Can't edit this">
<br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>