Table of Contents
Introduction to HTML Forms and Basic Input Types:
Welcome to Part 1 of our HTML forms tutorial! In this section, we will dive into the fundamentals of creating HTML forms, understanding form tags, and exploring various input types. By the end of this section, you will have a solid foundation in creating basic forms and utilizing different input fields.
HTML Forms and Form Tags:
HTML forms provide a way to collect user input and send it to a server for processing. We will start by introducing the <form> tag, which serves as the container for all form elements. You will learn about the important attributes of the <form> tag, such as action and method, which determine where and how the form data is submitted. Code examples will demonstrate how to create a basic form structure using the <form> tag.
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action="submit-form.php" method="post">
<!-- Form elements go here -->
<button type="submit">Submit</button>
</form>
</body>
</html>
Text Input and Password Input:
Text input fields are commonly used to collect single-line text from users. We will explore the <input type="text"> tag and its attributes, such as name and placeholder, to create text input fields. Additionally, we will discuss password input fields using the <input type="password"> tag to securely collect sensitive information. Code examples will demonstrate how to create text and password input fields and how to retrieve their values.
<!DOCTYPE html>
<html>
<head>
<title>Text Input and Password Input</title>
</head>
<body>
<form action="submit-form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<!-- Additional input fields go here -->
<button type="submit">Submit</button>
</form>
</body>
</html>
Checkboxes and Radio Buttons:
Checkboxes and radio buttons are used to allow users to make selections from a predefined set of options. We will explore the <input type="checkbox"> and <input type="radio"> tags and their attributes to create checkbox and radio button groups. Code examples will demonstrate how to set default values, handle multiple selections, and access the selected options using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Checkboxes and Radio Buttons</title>
</head>
<body>
<form action="submit-form.php" method="post">
<label for="hobbies">Hobbies:</label>
<input
type="checkbox"
id="hobbies"
name="hobbies[]"
value="reading"
/>Reading
<input
type="checkbox"
id="hobbies"
name="hobbies[]"
value="cooking"
/>Cooking
<input
type="checkbox"
id="hobbies"
name="hobbies[]"
value="sports"
/>Sports
<br />
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male" />Male
<input type="radio" id="gender" name="gender" value="female" />Female
<!-- Additional checkbox and radio button groups go here -->
<button type="submit">Submit</button>
</form>
</body>
</html>
( We use <br> to break line so our radio box start in new line because label and input are inline elements )
Conclusion:
Congratulations on completing Part 1 of our HTML forms tutorial! In this section, we covered the fundamentals of creating HTML forms and explored various input types such as text, password, checkboxes, and radio buttons. You have learned how to structure a basic form using the <form> tag and how to create different input fields within it.
By now, you should have a good understanding of how to create a simple form and gather user input. Remember to use appropriate attributes like name, id, and value to properly identify and capture the form data. You have also seen code examples that demonstrate the usage of these input types and how to retrieve their values.
In Part 2 of our tutorial, we will delve deeper into more advanced input types such as file uploads and text areas, as well as explore form validation and submission techniques. Stay tuned to further enhance your skills in creating HTML forms!
This Journey will be continue…
Github Branch: Mastering HTML Forms
Github Repo: HTML
Code Review By: Muhammad Arif & Muhammad Zain
Pingback: Mastering HTML Forms: PART-2 | MAK Writing House