Forms in HTML

1. The First Principle: The Web Needs to Be a Two-Way Street

A website isn't just a brochure. To be useful, it needs to collect information from the user and send it back to the server. Without this, features like login, search, shopping, and messaging wouldn't exist.

The Core Problem

1. Display interactive fields for a user to fill in (text boxes, checkboxes, dropdowns).
2. Package the user's data neatly.
3. Send that package to a specific destination on a server.
4. Tell the server how the data is being sent.

The solution is the HTML <form> element.

2. The <input> Element: The Box for Your Stuff

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

3. The Need for Meaning - The <label>

<label>First Name:</label>
<input type="text">

The Need for Connection - id and for

<label for="firstName">First Name:</label>
<input type="text" id="firstName">

4. The Need for Submission - <form> and submit

<form>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName">

    <br><br>

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName">

    <br><br>

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

5. The Need for Data Identification - name attribute

<form>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName">

    <br><br>

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

    <br><br>

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

6. Radio Buttons (Select One)

<label>T-Shirt Size:</label><br>

<input type="radio" id="sizeS" name="shirtSize" value="small">
<label for="sizeS">Small</label><br>

<input type="radio" id="sizeM" name="shirtSize" value="medium">
<label for="sizeM">Medium</label><br>

<input type="radio" id="sizeL" name="shirtSize" value="large">
<label for="sizeL">Large</label><br><br>

7. Checkboxes (Select Many)

<label>Pizza Toppings:</label><br>

<input type="checkbox" id="toppingPep" name="toppings" value="pepperoni">
<label for="toppingPep">Pepperoni</label><br>

<input type="checkbox" id="toppingMush" name="toppings" value="mushrooms">
<label for="toppingMush">Mushrooms</label><br>

<input type="checkbox" id="toppingOni" name="toppings" value="onions">
<label for="toppingOni">Onions</label><br><br>

8. Better Button - <button> Element

<!-- OLD WAY -->
<input type="submit" value="Submit Your Order">

<!-- NEW WAY -->
<button type="submit">
    <strong>Submit</strong> Your Order
</button>

9. Textarea - Multi-line Input

<label for="comments">Any special instructions?</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

10. Dropdown - <select>

<label for="country">Country:</label><br>
<select id="country" name="country">
    <option value="">--Please choose an option--</option>
    <option value="in">India</option>
    <option value="us">USA</option>
    <option value="uk">United Kingdom</option>
    <option value="au">Australia</option>
</select><br><br>

11. HTML5 Specialized Inputs

type="password"

<label for="userPass">Password:</label><br>
<input type="password" id="userPass" name="userPassword"><br><br>

type="number" with min and max

<label for="userAge">Age (18-99):</label><br>
<input type="number" id="userAge" name="age" min="18" max="99"><br><br>

type="date"

<label for="birthDate">Date of Birth:</label><br>
<input type="date" id="birthDate" name="dob"><br><br>

Example 1: Simple Registration Form

Code:

<form action="">
  <label for="uname">Name</label>
  <input type="text" name="username" id="uname" />

  <br><br>

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

  <br><br>

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

  <br><br>

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

  <br><br>

  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"/>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"/>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"/>

  <br><br>

  <label for="c++">C++</label>
  <input type="checkbox" id="c++" name="subject" value="c++"/>
  <label for="java">Java</label>
  <input type="checkbox" id="java" name="subject" value="java"/>
  <label for="javascript">Javascript</label>
  <input type="checkbox" id="javascript" name="subject" value="javascript"/>
  <label for="python">Python</label>
  <input type="checkbox" id="python" name="subject" value="python"/>

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

Output:

Example 2: University Registration Form

Code:

<form action="">
  <label for="fname">First Name</label>
  <input type="text" placeholder="e.g.Aryan" id="fname" />

  <br><br>

  <label for="lname">Last Name</label>
  <input type="text" placeholder="e.g.Kumar" id="lname" />

  <br><br>

  <label>Date of Birth</label>
  <input type="date" />

  <br><br>

  <label>Gender</label>
  <br>
  <input type="radio" name="gender" id="male" /><label for="male">Male</label>
  <br>
  <input type="radio" name="gender" id="female" /><label for="female">Female</label>
  <br>
  <input type="radio" name="gender" id="other" /><label for="other">Other</label>

  <br><br>

  <label for="file">Upload photo</label>
  <br>
  <input type="file" id="file" />

  <br><br>

  <!-- More fields: Email, Phone, Address, Course, Interests, Password, Security Question -->
</form>

Output: