HTML Forms and Input Tags
HTML Form Explanation
What is a Form?
A form in HTML is an element that allows users to input and submit data to a web server. Forms are essential
for interactive websites, such as login pages, registration forms, surveys, or online orders.
Syntax:
<form action="url" method="post or get">
<!-- form elements here -->
</form>
Purpose of a Form:
- To collect user input.
- To interact with server-side applications.
- To validate and process information like login credentials, file uploads, feedback, etc.
Input Tags in HTML Forms:
1. <input type="text"> - Text Field
Used for single-line input.
Example: <input type="text" name="username">
2. <input type="password"> - Password Field
Hides the entered characters.
Example: <input type="password" name="password">
3. <input type="email"> - Email Field
Validates the email format.
Example: <input type="email" name="email">
HTML Forms and Input Tags
4. <input type="number"> - Numeric Input
Accepts only numeric values.
Example: <input type="number" name="age">
5. <input type="radio"> - Radio Buttons
Used to select one option from many.
Example: <input type="radio" name="gender" value="male"> Male
6. <input type="checkbox"> - Checkboxes
Used to select multiple options.
Example: <input type="checkbox" name="hobby" value="reading"> Reading
7. <input type="submit"> - Submit Button
Sends form data to the server.
Example: <input type="submit" value="Submit">
8. <input type="reset"> - Reset Button
Clears all form fields.
Example: <input type="reset" value="Reset">
9. <input type="file"> - File Upload
Allows users to upload files.
Example: <input type="file" name="resume">
10. <textarea> - Multiline Text Field
Used for longer inputs like comments.
Example: <textarea name="comments" rows="4" cols="40"></textarea>
11. <select> and <option> - Dropdown Menu
Used for selecting one option from a list.
Example: <select name="country"><option value="india">India</option></select>
HTML Forms and Input Tags
Complete Example of a Form:
<form action="submit.php" method="post">
<input type="text" name="name"><br>
<input type="email" name="email"><br>
<input type="password" name="password"><br>
<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="hobby" value="reading"> Reading
<select name="country"><option value="india">India</option></select>
<textarea name="message" rows="4" cols="30"></textarea>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
Conclusion:
Forms are a fundamental part of web development that enable user interaction. With various input types
available, developers can collect structured data efficiently for processing on the server side.