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

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!

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

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

𝗠𝗔𝗦𝗧𝗘𝗥 𝗦𝗤𝗟 𝗙𝗢𝗥 𝗙𝗥𝗘𝗘 𝗜𝗡 𝟮𝟬𝟮𝟲 📊

🔥 Essential Skill for Data Analytics
🔥 Useful for Data Science & Backend Development
🔥 Practice Real-World Database Queries
🔥 Strengthen Your Technical Interview Skills

🎯 Perfect For:- Students | Freshers | Job Seekers | Working Professionals

🔗 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗔𝗟𝗟 𝟱 𝗙𝗥𝗘𝗘 𝗦𝗤𝗟 𝗪𝗲𝗯𝘀𝗶𝘁𝗲𝘀 👇:-

https://pdlink.in/4yOlWlh

📌 SAVE this post & SHARE it with friends preparing for tech careers!

🌐 Web Development Roadmap — Part 21

HTML Input Types & Form Attributes

In the previous lesson, you learned how to create forms. Now let's understand the different types of inputs and the attributes that make forms more useful.

1. Text Input

<input type="text" name="username">

Used for short text such as:

• Name

• Username

• City

• Job title

2. Email Input

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

Used for email addresses.

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

The browser can perform basic validation when the form is submitted.

3. Password Input

<input type="password" name="password">

Characters are normally hidden while the user types.

Commonly used for:

• Passwords

• PIN-like fields

• Secret values

4. Number Input

<input type="number" name="age">

Useful when the expected value is numeric.

You can also specify limits:

<input
    type="number"
    name="age"
    min="18"
    max="100">

5. Date Input

<input type="date" name="birthdate">

Modern browsers can provide a date-selection interface.

6. File Input

<input type="file" name="resume">

Allows the user to select a file from their device.

For example:

<label for="resume">Upload Resume</label>
<input type="file" id="resume" name="resume">

7. Checkbox

<input type="checkbox" name="terms">

Used when the user can select or deselect an option.

Example:

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

8. Radio Button

Radio buttons are useful when the user should choose one option from a group.

<label>
    <input type="radio" name="experience" value="beginner">
    Beginner
</label>

<label>
    <input type="radio" name="experience" value="advanced">
    Advanced
</label>

The same name groups the options.

9. Search Input

<input type="search" name="query">

Designed specifically for search fields.

Example:

<label for="search">Search</label>
<input type="search" id="search" name="query">

10. URL Input

<input type="url" name="website">

Used when the user needs to enter a website URL.

<input
    type="url"
    name="portfolio"
    placeholder="https://example.com">

11. name Attribute

The name attribute identifies the field when form data is submitted.

<input type="text" name="username">

Think of it as the field's data key:

name = username

value = Rahul

The backend can receive something conceptually like:

username → Rahul

12. value Attribute

value specifies a value for an input.

<input
    type="text"
    name="country"
    value="India">

The input starts with India as its value.

For radio buttons and checkboxes, value identifies what was selected.

<input
    type="radio"
    name="plan"
    value="premium">

13. placeholder

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

It provides a temporary hint.

Remember:

label → Identifies the field

placeholder → Gives an example/hint

A placeholder should not normally replace a proper label.

14. readonly

<input
    type="text"
    value="Customer ID: 1024"
    readonly>

The user can generally view the value but cannot edit it through the input.

15. disabled

<input
    type="text"
    value="Not available"
    disabled>

A disabled control cannot normally be interacted with or submitted as a successful form control.

16. maxlength

Limits the number of characters.

<input
    type="text"
    name="username"
    maxlength="20">

17. minlength

Specifies a minimum number of characters.

<input
    type="password"
    name="password"
    minlength="8">

18. autocomplete

Helps the browser provide previously stored information.

<input
    type="email"
    name="email"
    autocomplete="email">

This can make forms faster and easier to use.

19. Form Attributes

The <form> element itself has important attributes.

For example:

<form action="/register" method="post">
    ...
</form>

action specifies where the form data should be sent.

method specifies how the data should be submitted.

Common methods include:

GET

POST

We'll study HTTP methods and form submission more deeply when we reach backend development.

20. Putting It Together

<form action="/register" method="post">

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

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

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

    <button type="submit">Create Account</button>

</form>

🧠 Remember

type → What kind of input?

name → Field's submission name

id → Identifies the element

value → Input's value

placeholder → Hint

required → Must be provided

disabled → User can't interact normally

readonly → User can't edit

minlength → Minimum characters

maxlength → Maximum characters

Double Tap ❤️ For More