Телеграм канал «Web Development»

Common use cases include:

• Comments

• Feedback

• Messages

• Descriptions

13. Select Dropdown

A dropdown can be created using <select> and <option>.

<label for="city">City</label>

<select id="city" name="city">
<option value="pune">Pune</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
</select>

14. Complete Form Example

<form>

<label for="name">Full Name</label>
<input
type="text"
id="name"
name="name"
required>

<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required>

<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
required>

<label for="city">City</label>
<select id="city" name="city">
<option value="pune">Pune</option>
<option value="mumbai">Mumbai</option>
</select>

<label for="message">Message</label>
<textarea
id="message"
name="message">
</textarea>

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

</form>

15. How a Form Works

A typical form flow is:

User enters information

↓

HTML form

↓

Submit

↓

Browser sends data

↓

Backend receives data

↓

Backend processes it

↓

Database may store it

↓

Response sent back

HTML creates the form, but HTML alone doesn't create a complete registration or login system. JavaScript and backend technologies will later handle more advanced behavior and data processing.

🧠 Remember

<form> → Form container

<label> → Describes an input

<input> → Single-line input

<textarea> → Multi-line input

<select> → Dropdown

<option> → Dropdown option

<button> → Button

required → Makes a value required

Understanding forms is essential because almost every real-world web application needs to collect information from users.

Double Tap ❤️ For More

-----
1.67 ₽ · /balance_help

🌐 Web Development Roadmap — Part 20

HTML Forms

Forms allow users to enter and submit information on a webpage.

You see forms everywhere:

• Login pages

• Registration pages

• Search boxes

• Contact forms

• Checkout pages

• Job applications

• Feedback forms

1. The <form> Element

A form is created using <form>.

<form>
...
</form>

Example:

<form>
<label>Name</label>
<input type="text">

<button>Submit</button>
</form>

2. <label>

<label> describes what an input field is for.

<label for="name">Name</label>
<input type="text" id="name">

The for value should match the input's id.

label

↓

for="name"

↓

id="name"

↓

input

This also improves accessibility and makes the form easier to use.

3. Text Input

The most common input is a text field.

<input type="text">

A better version:

<label for="name">Full Name</label>
<input type="text" id="name" name="name">

4. Email Input

<label for="email">Email</label>
<input type="email" id="email" name="email">

The email type allows browsers to provide appropriate input behavior and basic validation.

5. Password Input

<label for="password">Password</label>
<input type="password" id="password" name="password">

The entered characters are normally hidden.

6. Number Input

<label for="age">Age</label>
<input type="number" id="age" name="age">

This is useful when the expected value is numeric.

7. Submit Button

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

When placed inside a form, this submits the form by default.

You can also write:

<input type="submit" value="Submit">

However, <button> is generally more flexible.

8. Required Fields

The required attribute tells the browser that a value must be provided.

<input
type="email"
id="email"
name="email"
required>

The browser can prevent submission when the required field is empty.

9. Placeholder

placeholder provides a hint inside an input.

<input
type="text"
placeholder="Enter your name">

Important: a placeholder is not a replacement for a <label>.

10. Radio Buttons

Radio buttons allow the user to select one option from a group.

<p>Gender</p>

<label>
<input type="radio" name="gender" value="male">
Male
</label>

<label>
<input type="radio" name="gender" value="female">
Female
</label>

The same name groups the radio buttons together.

11. Checkboxes

Checkboxes allow users to select multiple options.

<label>
<input type="checkbox" name="skills" value="html">
HTML
</label>

<label>
<input type="checkbox" name="skills" value="css">
CSS
</label>

Unlike radio buttons, multiple checkboxes can be selected.

12. Textarea

Use <textarea> for longer text.

<label for="message">Message</label>

<textarea
id="message"
name="message"
rows="5"
cols="30">
</textarea>

🚀𝗠𝗔𝗦𝗧𝗘𝗥 𝗘𝗫𝗖𝗘𝗟 𝗙𝗢𝗥 𝗙𝗥𝗘𝗘 𝗜𝗡 𝟮𝟬𝟮𝟲! 📊

Discover 4 FREE Websites to learn Microsoft Excel from beginner to advanced level! 🎓

🔥 FREE Learning Resources
🔥 Beginner to Advanced Tutorials
🔥 Practical Examples & Exercises
🔥 Learn Anytime, Anywhere

🔗 𝗟𝗶𝗻𝗸👇:-

https://pdlink.in/4jDfcCP

⚡ One powerful skill can open doors to multiple career opportunities!