1.1 The <form> Element
Forms are a crucial part of user interaction with websites. They allow users to input data, which is then sent to the server for processing.
In HTML, the <form> element is used to create forms.
The <form> tag is used to create a form on a web page. It acts as a container for various form elements like text fields,
buttons, checkboxes, etc. All the data entered by the user can be sent to the server for processing.
Usage example:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">Submit</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`Your name: ${userName.value}\n` + `Your Email: ${userEmail.value}`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Submit</button>
</form>
Attributes of the <form> Tag
The action attribute specifies the URL where the form data will be sent after the submit button is clicked.
If the action attribute isn’t specified, the form data is sent to the current URL.
Example using the action attribute:
<form action="https://example.com/submit">
<!-- form elements -->
</form>
The method attribute specifies the HTTP method used to send form data. Two values are available: GET and POST.
- GET: form data is included in the URL as query parameters. This method is suitable for sending small amounts of data and should not be used for confidential information.
- POST: form data is sent in the body of the HTTP request. This method is suitable for sending large amounts of data and confidential information.
Example using the method attribute:
<form action="/submit" method="post">
<!-- form elements -->
</form>
1.2 Methods of Sending Data
GET Method
GET Method sends form data as URL parameters. This method is used by default if the method attribute is not specified.
Example using GET method:
<form action="/search" method="get">
<label for="query">Search:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">Search</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`You searched for: ${searchField.value}`);
}
});
</script>
<form action="/search" method="get">
<label for="query">Search:</label>
<input type="text" id="query" name="query">
<button type="submit">Search</button>
</form>
Features of GET Method
- Form data is visible in the URL, making it unsuitable for transmitting confidential information
- There is a limit on the size of data because URLs have a length restriction
- Data can be easily cached, and bookmarks can be saved in the browser
POST Method
POST Method sends form data in the body of the HTTP request. This method is used for transmitting large volumes of data and confidential information.
Example using POST method:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Submit</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`Welcome, ${userName.value}!`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Submit</button>
</form>
Features of POST Method
- Form data is not visible in the URL, making it suitable for transmitting confidential information
- No size restrictions on data as it is sent in the request body
- Data is not cached and not saved as bookmarks in the browser
1.3 Additional Attributes
enctype Attribute
The enctype attribute is used to specify the encoding type of data when submitting with the POST method.
The most commonly used value is multipart/form-data, which is necessary for file uploads.
Example using the enctype attribute:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">
<button type="submit">Submit</button>
</form>
target Attribute
The target attribute specifies where the server response will be displayed after submitting the form. Possible values:
_self(default): in the same window or tab_blank: in a new window or tab_parent: in the parent frame_top: in the top frame (if frames are used)
Example using the target attribute:
<form action="/submit" method="post" target="_blank">
<!-- form elements -->
</form>
novalidate Attribute
The novalidate attribute disables the built-in browser form validation.
Example using the novalidate attribute:
<form action="/submit" method="post" novalidate>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
1.4 Ways to Submit Data
Form data is submitted using a submit button: <input type="submit"> or <button type="submit">.
When the user clicks this button, the browser sends the form data to the server using the specified method and URL.
Here are the main ways to submit form data:
1. Submit Button: This is the most common way to submit form data. The submit button can be created
using the <input> or <button> element.
Example with <input>:
<input type="submit" value="Submit">
Example with <button>:
<button type="submit">Submit</button>
2. Enter Key: In text fields of a form, pressing the Enter key can also trigger form submission.
3. JavaScript: A form can be submitted programmatically using JavaScript. This is useful when you need to perform additional checks or other actions before sending the data.
Example using JavaScript to submit a form:
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Submit</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("Authorization successful!\n" + "\n" + `Welcome, ${userName.value}!`);
}
});
</script>
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION