HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
Introduction to HTML Forms
HTML forms are vital part of web development. They allow websites to collect user input like login credentials search queries, feedback, or any kind of data submission.
Why are Forms Used?
Forms are the primary way to interact with user on a website, they allow:
- User registration and login
- Search inputs
- Contact and feedback submission
- Data entry and uploads
They enable communication between the user and the server.
Basic Structure of an HTML Forms
A form starts and ends with the <form> tag. Inside, we place various form controls like text boxes, buttons, and options.
<form action="/submit" method="post">
<!-- Username field -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- Password field -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- Gender selection using radio buttons -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>
Understanding Form Attributes
actions: The URL where the form data should be sent.method: The HTTP method used.get: Appends data to the URL (visible)post: Sends data securely in the request body.
Form Control Using <input> tag
The <input> element is used for many types of fields:
<input type="..." name="..." value="...">
type: Defines the kind of input (e.g., text, password, checkbox)name: Sets a key for the data when it is submitted.value: Sets a default value (optional).
Types of Forms inputs You’ll Learn Next
- Text and password fields
- Radio buttons and checkboxes
- Drop-down (select menu)
- File uploads
- Text areas
- Buttons (submit, reset, etc.)
Conclusion
Forms are the foundation of any interactive websites. By mastering HTML forms, you’ll be able to build login system, feedback tools, registrations pages, and much more. In the next module, we’ll dive deeper into different types of inputs fields and form elements.