HTML Form Element
HTML forms are a way to collect user input on a webpage. They allow users to submit data to a server for processing. The <form> element is the container for all the input elements that make up a form.
HTML Form Structure
Here's a basic example of an HTML form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Form Example</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation
This example demonstrates the basic structure of an HTML form. The <form> element contains labels and input fields for collecting user information such as name, email, and age. When the user clicks the Submit button, the form data is sent to the specified server.
Key Attributes of the HTML Form Element
- action: Specifies the URL where the form data will be sent. In this example, data will be sent to
/submit. - method: Defines the HTTP method to use when sending form data. Common methods are
GETandPOST.GETappends the form data to the URL, whilePOSTsends the data in the body of the request.
Common HTML Input Types
<input type="text">: A single-line text input.<input type="password">: A single-line input that hides the characters.<input type="email">: A field for email addresses, often includes validation.<input type="number">: A field for numerical input.<textarea>: A multi-line text input.
Advanced HTML Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Form Example</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="50"></textarea>
<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe">
Subscribe to newsletter
</label>
<fieldset>
<legend>Preferred Contact Method:</legend>
<label>
<input type="radio" name="contact" value="email">
Email
</label>
<label>
<input type="radio" name="contact" value="phone">
Phone
</label>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation
This example demonstrates a more advanced HTML form that includes text fields, password fields, a dropdown menu, a textarea, a checkbox, radio buttons, and a fieldset for grouping related options.
Explanation of Additional HTML Form Elements
<select>: Creates a dropdown menu.<textarea>: Creates a multi-line text input area.<input type="checkbox">: Creates a checkbox input.<input type="radio">: Creates radio buttons for selecting one option from a group.<fieldset>: Groups related elements in a form.<legend>: Provides a caption for the<fieldset>.
Conclusion
Forms can be styled with CSS and made interactive with JavaScript to enhance user experience.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.