HTML Form

 

Basic Structure of an HTML Form

A form is created using the <form> element. Inside it, various form controls are added to collect data. The data is submitted to the server through the action specified in the action attribute, and the method used for submission is specified in the method attribute.

Example:

html
<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <input type="submit" value="Submit">
</form>

• action: The URL where the form data will be submitted.
• method: The HTTP method used for sending data (GET or POST).

Common Form Elements

Here are some of the most commonly used form elements:

1. Text Input (<input type="text">)

Used for single-line text input.

html
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
</form>

2. Password Field (<input type="password">)

Used for entering passwords. The characters are hidden as they are typed.

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

3. Email Input (<input type="email">)

Used for entering an email address. It will validate the input to ensure it is in the correct format.

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

4. Submit Button (<input type="submit">)

A button used to submit the form data to the server.

html
<form>
  <input type="submit" value="Submit">
</form>

5. Radio Buttons (<input type="radio">)

Used when you want the user to select one option from a set of predefined options.

html
<form>
  <p>Gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</form>

6. Checkboxes (<input type="checkbox">)

Used for selecting multiple options from a set.

html
<form>
  <p>Select your hobbies:</p>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">Sports</label><br>
  
  <input type="checkbox" id="music" name="hobby" value="music">
  <label for="music">Music</label><br>
</form>

7. Dropdown List (<select>)

Creates a dropdown list where the user can select one or more options.

html
<form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
  </select>
</form>

8. Textarea (<textarea>)

Used for multi-line text input.

html
<form>
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" cols="50">
  </textarea>
</form>

9. Date Input (<input type="date">)

Allows the user to select a date from a date picker.

html
<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

10. Number Input (<input type="number">)

Allows the user to enter a numeric value. You can also set a range using min and max.

html
<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10">
</form>

11. File Input (<input type="file">)

Allows the user to upload a file.

html
<form>
  <label for="myfile">Upload a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

12. Hidden Input (<input type="hidden">)

Hidden inputs are used to include data in a form that users cannot see or change.

html
<form>
  <input type="hidden" name="userId" value="12345">
</form>

Attributes Used in Forms

Here are some common attributes used with form elements:

• name: The name of the form control. It's used as the key when sending form data to the server.
• value: The value associated with the form element, often used with checkboxes, radio buttons, and submit buttons.
• required: Ensures that the user cannot submit the form without filling in this field.
• placeholder: Provides a hint to the user about what to input.
• disabled: Disables a form control so that it cannot be interacted with.
• readonly: Makes a field read-only, meaning the user cannot change the value.
• min / max: Defines the minimum and maximum values for input elements such as numbers or dates.

Example: A Complete Form

This example contains various input types commonly used in forms.

html
<!DOCTYPE html>
<html>
<body>

<h2>Registration Form</h2>

<form action="/submit-form" method="post">
  
  <label for="fname">First Name:</label><br>
  <input type="text" id="fname" name="firstname" placeholder="John" required><br><br>
  
  <label for="lname">Last Name:</label><br>
  <input type="text" id="lname" name="lastname" placeholder="Doe" required><br><br>
  
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="john.doe@example.com" required><br><br>
  
  <label for="birthday">Birthday:</label><br>
  <input type="date" id="birthday" name="birthday"><br><br>
  
  <p>Gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>
  
  <label for="country">Country:</label><br>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
  </select><br><br>
  
  <label for="bio">Biography:</label><br>
  <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>
  
  <label for="file">Upload your profile picture:</label><br>
  <input type="file" id="file" name="profilepic"><br><br>
  
  <input type="submit" value="Register">
  
</form>

</body>
</html>

Methods: GET vs. POST

• GET: Appends form data to the URL as query strings. Use it for simple data submission or searches (data is visible in the URL).