HTML Form Attributes Explained
action
Description: Specifies the URL where the form data will be sent when the form is submitted.
Example:
<form action="/submit-form" method="post">
Explanation: When the user submits the form, the data will be sent to /submit-form on the server.
method
Description: Defines the HTTP method (GET or POST) to be used when submitting the form.
GET: Appends form data to the URL as query parameters.POST: Sends form data in the body of the HTTP request.
Example:
<form method="post">
Explanation: Using POST will send the form data securely in the request body, whereas GET will append it to the URL.
enctype
Description: Specifies how the form data should be encoded when submitting it to the server. This is mainly used with POST method forms.
application/x-www-form-urlencoded: (default) Data is encoded as key-value pairs.multipart/form-data: Used for forms that include file uploads.text/plain: Data is sent as plain text.
Example:
<form enctype="multipart/form-data">
Explanation: For file uploads, you use multipart/form-data to handle file data correctly.
target
Description: Specifies where to display the response received after form submission.
_self: (default) Loads the response in the same frame or tab._blank: Opens the response in a new tab or window._parent: Loads the response in the parent frame._top: Loads the response in the full window.
Example:
<form target="_blank">
Explanation: The form will open the response in a new tab.
name
Description: Provides a name for the form, which can be used to reference it via JavaScript or when submitting data.
Example:
<form name="contactForm">
Explanation: The form can be accessed or manipulated via JavaScript using the name contactForm.
autocomplete
Description: Controls whether the browser should automatically complete form fields based on user input history.
on: Enables autocomplete.off: Disables autocomplete.
Example:
<form autocomplete="off">
Explanation: Autocomplete is disabled for this form, meaning browsers will not suggest previously entered values.
novalidate
Description: Disables the browser’s default form validation.
Example:
<form novalidate>
Explanation: This form will bypass the built-in HTML5 form validation.