📘 Decent HTML Notes

Lecture 5 : HTML Forms (Beginner to Advanced)

Forms in HTML are used to collect input from users. The <form> element contains form controls like textboxes, checkboxes, radio buttons, dropdowns, and buttons.

1. Basic Form

Code:

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

Output:

2. Password and Number Fields

Code:

<form>
  Username: <input type="text"> <br>
  Password: <input type="password"> <br>
  Age: <input type="number"> <br>
  <input type="submit">
</form>
    

Output:

3. Radio Buttons and Checkboxes

Code:

<form>
  Gender: 
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female <br>

  Subjects: 
  <input type="checkbox" value="HTML"> HTML
  <input type="checkbox" value="CSS"> CSS
  <input type="checkbox" value="JS"> JavaScript <br>

  <input type="submit">
</form>
    

Output:

4. Dropdown Menu (Select)

Code:

<form>
  Choose a country:
  <select>
    <option>India</option>
    <option>USA</option>
    <option>UK</option>
  </select>
</form>
    

Output:

5. Textarea (Multi-line Input)

Code:

<form>
  Feedback: <br>
  <textarea rows="4" cols="30"></textarea> <br>
  <input type="submit">
</form>
    

Output:

6. Advanced Input Types

HTML5 introduced new input types like date, color, range, file.

Code:

<form>
  Birthday: <input type="date"> <br>
  Favorite Color: <input type="color"> <br>
  Volume: <input type="range" min="0" max="100"> <br>
  Upload File: <input type="file"> <br>
  <input type="submit">
</form>
    

Output:

7. Complete Registration Form

Code:

<form>
  Name: <input type="text"> <br>
  Email: <input type="email"> <br>
  Password: <input type="password"> <br>

  Gender: 
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female <br>

  Country: 
  <select>
    <option>India</option>
    <option>USA</option>
    <option>UK</option>
  </select> <br>

  About You: <br>
  <textarea rows="4" cols="30"></textarea> <br>

  <input type="submit" value="Register">
</form>
    

Output:

Understand by handwritten example