1.2 HTML Forms and Inputs

Hey there! 👋 I’m Vikas Sankhla, your tech big bro and the founder of the Web Codder YouTube channel. Today, let’s explore something super fun and important — HTML Forms and Inputs. 📝

These are the tools that let users talk to your website — like signing up, logging in, or searching. Ready? Let’s go! 🚀

📦 What is a Form in HTML?

A form is like a container where users type things.

It’s made using the <form> tag.

<form>
  <!-- Form content goes here -->
</form>

Forms help collect information from users — name, email, feedback, etc.

🖍️ Example: Contact Us form

<form>
  <input type="text" placeholder="Your Name" />
  <input type="email" placeholder="Your Email" />
  <button type="submit">Send</button>
</form>

🧱 Common Form Elements

1. Input

Used to take single-line input.

<input type="text" />

🔑 Popular input types:

2. Textarea

For multi-line text, like feedback.

<textarea rows="4" cols="50">Write here...</textarea>

3. Select and Option

Dropdown menus! 🎯

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</select>

4. Button

To submit the form or trigger actions.

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

🚀 Understanding Form Submission

Forms can send data in 2 main ways:

📬 Method: GET

• Sends data in the URL.
• Used for search and filters.

<form method="GET" action="/search">
  <input name="q" />
  <button type="submit">Search</button>
</form>

➡️ URL becomes: /search?q=hello

📦 Method: POST

• Sends data hidden in the request body.
• Used for login, sign-up, etc.

<form method="POST" action="/signup">
  <input name="username" />
  <button type="submit">Sign Up</button>
</form>

🛡️ Form Validation — Keeping Things Right ✅

HTML helps make sure users enter the right stuff.

Use these attributes:

🧪 Example:

<input type="email" required />
<input type="number" min="1" max="10" />

♿ Accessibility Tips (Make Forms Friendly for All)

Use labels to describe each input.

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

Screen readers will read this aloud to blind users. 💙

Always:

• Use label tag
• Use proper type
• Avoid placeholders as only guidance

📄 Full Example — Registration Form

<form method="POST" action="/register">
  <label for="username">Username:</label>
  <input id="username" name="username" required />

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

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

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

📊 Infographic Placeholder

🧠 Key Concepts Recap

🎯 Final Thoughts

Forms are how users talk to your website.

It’s like a digital conversation — you ask a question, they give the answer. 🧑‍💻💬

Keep your forms clean, simple, and accessible. 💡

Use HTML validation to save time and improve user experience.

Make sure every form element is used correctly and labels are clear.

📢 Subscribe and Learn More!

Enjoyed learning? 😍 Let’s keep going!

🔔 Subscribe now: Web Codder YouTube

📚 More automation tutorials: webcodder.dev/automation

📱 Chat & support: webcodder.dev/whatsapp

Let’s code the future together! 💻🚀