HTML forms are essential for collecting user input and submitting it to a server for processing. Several attributes can be used with the <form> element to define how and where this data is sent. In this article, we will explore three important attributes: action, method, and name. We will provide code examples and visible outputs to illustrate their usage.
The action Attribute
The action attribute specifies the URL where the form data should be sent when the form is submitted. It defines the endpoint that will process the form data.
Example:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Action Attribute</title>
</head>
<body>
<h2>Form with Action Attribute</h2>
<form action="https://example.com/submit-form" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
The method Attribute
The method attribute specifies the HTTP method to be used when submitting the form. The most common values are GET and POST.
- GET: Appends form data to the URL in name/value pairs. Useful for non-sensitive data and when bookmarking or sharing the URL.
- POST: Sends form data as an HTTP request payload. More secure than GET and suitable for sensitive data.
Example:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Method Attribute</title>
</head>
<body>
<h2>Form with Method Attribute</h2>
<form action="https://example.com/submit-form" method="post">
<div>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
</div>
<div>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
The name Attribute
The name attribute is used to reference form data after it has been submitted. It identifies form controls (such as <input>, <select>, <textarea>) within the form data sent to the server.
Example:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Name Attribute</title>
</head>
<body>
<h2>Form with Name Attribute</h2>
<form action="https://example.com/submit-form" method="post">
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="user_age">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Putting It All Together
Here’s an example that combines the action, method, and name attributes to create a complete form:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Form Example</title>
</head>
<body>
<h2>Complete Form Example</h2>
<form action="https://example.com/submit-form" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" name="user_age">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
When rendered in a browser, the form will look like this:
Complete Form Example
Username: [____________________]
Password: [____________________]
Email: [____________________]
Age: [____________________]
[Submit]
Conclusion
Understanding the action, method, and name attributes in HTML forms is crucial for creating functional and secure forms. The action attribute defines where to send the form data, the method attribute specifies how to send the data, and the name attribute identifies the form data for server-side processing. By mastering these attributes, you can create effective forms that enhance user interaction and data handling on your web pages