HTML Forms Guide: A Beginner's Handbook

Imagine you want to enroll in a university, and you need to fill out your details. All your information, like name, address, age, and academic details, will be collected in a single entity called a form. Well its on pen and paper, now what about website we use HTML forms to send data from client to server.

What are HTML forms ?

HTML forms collect user data through various input fields like text, email, number, date-time, and even files. HTML forms use the <form> tag to build the form. Let's dive into how HTML forms are constructed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sumukha Sureban Newsletter</title>
</head>

<body>
    <h2>News letter subscription</h2>
    <form action="/submit.js" method="post" >

<form> : Forms acts a container to all the input fields, all the input data will be combined into a single entity.
action: After clicking on submit button, the action attribute specifies where the data should be sent for processing.
method: It specifies the HTTP method, how the data should be submitted if the data is being inserted to server then POST method should be used, if data is received from the server the GET method should be used.
enctype : This attribute specifies how the data should be encoded before sending it to the server. It determines the format in which the browser packages the input common values like application/x-www-form-urlencoded, multipart/form-data, and text/plain.

Input Types

There are various types of input fields, lets see each one of them.

Text:
- Purpose: For single line text.
- ```
  <input type="text">
```
Password:
- Makes the input for sensitive text.
- ```
  <input type="password">
```
Email:
- For email address and valid format.
- ```
  <input type="email">
```
URL:
- For websites; validates URL format.
- ```
  <input type="url">
```
Color:
- Inputting the color values in RGB, HEX or other formats.
- ```
  <input type="color">
```
File:
- Embedding the non-textual information to the form.
- ```
  <input type="file">
```

Radio:

Small rounded button which helps to check either of them.

  <input type="radio" name="male">
  <input type="radio" name="female">

Checkbox:

Checkbox are squared box in which user can select multiple values.

  <input type="checkbox" name="apple">
  <input type="checkbox" name="mango">
  <input type="checkbox" name="banana">
  <input type="checkbox" name="kiwi">

Lets combine all of the tags with an example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Application Form</title>
</head>
<body>
  <h1>Job Application Form</h1>

  <form action="/apply" method="POST" enctype="multipart/form-data">
    <!-- Name -->
    <label for="full-name">Full Name:</label>
    <input type="text" id="full-name" name="full-name" placeholder="Enter your full name" required>
    <br><br>

    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
    <br><br>

    <!-- Phone -->
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
    <br><br>

    <!-- Position -->
    <label for="position">Position Applying For:</label>
    <select id="position" name="position" required>
      <option value="">Select a position</option>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="manager">Manager</option>
    </select>
    <br><br>

    <!-- Resume -->
    <label for="resume">Upload Resume:</label>
    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
    <br><br>

    <!-- Cover Letter -->
    <label for="cover-letter">Cover Letter:</label>
    <textarea id="cover-letter" name="cover-letter" rows="5" placeholder="Write a short cover letter..." required></textarea>
    <br><br>

    <!-- Gender -->
    <p>Gender:</p>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="male">Male</label>

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

    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    <br><br>

    <!-- Agreement -->
    <label>
      <input type="checkbox" name="agreement" required>
      I agree to the terms and conditions.
    </label>
    <br><br>

    <!-- Submit and Reset -->
    <button type="submit">Submit Application</button>
    <button type="reset">Reset</button>
  </form>

</body>
</html>

Some important attributes.

name: The name acts as the container, basically it is used to identify the value present in that particular field
value: The value attribute holds the initial data or pre-filled data for an input field.
label: It is used to provide the description of the elements.
placeholder:The placeholder attribute in an HTML input element provides a hint or short description about the expected input in the field. It appears as grayed-out text inside the input field and disappears when the user starts typing.

Comprehensive Guide to HTML Forms for Beginners

Simplifying Data Input Using HTML Forms and Essential Attributes

What are HTML forms ?

Input Types

Lets combine all of the tags with an example