.png "HTML(Hyper Text Markup Language) Full Course For Beginners Lesson No 5.0")
Lesson 5: HTML Forms and Input Types
Understanding HTML Forms
In this lesson, we'll explore HTML forms in more detail. HTML forms are essential for collecting user input, such as text, selections, and button clicks.
HTML Form Structure
HTML forms are created using the `<form>` element and contain various input elements for collecting user data.
Common Attributes for Forms
Let's explore some common attributes used with HTML forms:
1. `action` Attribute:
- The `action` attribute specifies the URL where the form data should be submitted.
- It can be a relative or absolute URL.
2. `method` Attribute:
- The `method` attribute specifies the HTTP method used to submit the form data.
- Common values include `GET` and `POST`.
HTML Input Types
HTML provides various input types for different data types and user interactions. Let's explore some commonly used input types:
1. Text Input (`<input type="text">`):
- Creates a single-line text input field for users to enter text.
2. Password Input (`<input type="password">`):
- Creates a password input field, where the entered text is masked for security.
3. Checkbox Input (`<input type="checkbox">`):
- Creates a checkbox input field, allowing users to select multiple options from a list.
4. Radio Input (`<input type="radio">`):
- Creates a radio button input field, allowing users to select only one option from a list.
5. Dropdown Select (`<select>`):
- Creates a dropdown select list, allowing users to choose one option from a list of predefined options.
6. File Input (`<input type="file">`):
- Creates a file upload input field, allowing users to select files from their device.
Example: Using HTML Forms and Input Types
Let's apply what we've learned in a practical example:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms and Input Types</title>
</head>
<body>
<h1>HTML Forms and Input Types</h1>
<form action="submit.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="remember">Remember Me:</label>
<input type="checkbox" id="remember" name="remember"><br>
<label for="gender">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>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select><br>
<label for="avatar">Avatar:</label>
<input type="file" id="avatar" name="avatar"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
Explanation
In this example, we've created a simple form with various input types. Users can enter their username and password, select a gender, country, and upload an avatar image. The form data is submitted to a server-side script (`submit.php`) using the `POST` method.
Excercise
Practice creating HTML forms with different input types. Experiment with various attributes and input elements to understand their functionalities better.
.png)
