In Module 4 of our HTML course, we'll explore the world of forms. Forms are an essential part of web development, allowing users to interact with a web page by entering data.

Form Basics

A form is defined by the <form> element, which contains various form elements such as input fields, checkboxes, radio buttons, and submit buttons.

Example:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>

Syntax:

<form action="url" method="get/post">
<label for="inputname">Label</label>
<input type="inputtype" id="inputname" name="inputname">
<input type="submit" value="Submit">
</form>

Form Elements

Here are some common form elements:

- <input>: defines an input field
- <textarea>: defines a multiline text input
- <select>: defines a dropdown list
- <checkbox>: defines a checkbox
- <radio>: defines a radio button
- <label>: defines a label for a form element
- <button>: defines a button

Input Types

Here are some common input types:

- text: a single-line text input
- email: an email address input
- password: a password input
- number: a numeric input
- checkbox: a checkbox input
- radio: a radio button input
- file: a file upload input

Example:

<input type="text" id="name" name="name">
<input type="email" id="email" name="email">
<input type="password" id="password" name="password">

Textarea

The <textarea> element defines a multiline text input.

Example:

<textarea id="message" name="message" rows="4" cols="50">
</textarea>

Select

The <select> element defines a dropdown list.

Example:

<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>

Checkbox

The <checkbox> element defines a checkbox.

Example:

<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms and conditions</label>

Radio

The <radio> element defines a radio button.

Example:

<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>

Button

The <button> element defines a button.

Example:

<button type="submit">Submit</button>

Conclusion

In this module, we've explored the world of forms in HTML. By using forms, you can create interactive web pages that allow users to enter data. Remember to use form elements correctly to ensure your web pages are user-friendly and functional.