Koustav Chatterjee's Blog
Create your first HTML Form

Create your first HTML Form

Koustav Chatterjee's photo
Koustav Chatterjee
·

2 min read

What is HTML Form?

The HTML <form> element represents a document section containing interactive controls for submitting information.

Common HTML input Elements and attributes

  1. Text: For general input

  2. Email: For email addresses

  3. Password: For password

  4. Number: For numeric input

  5. Placeholder: Defines what type of data to enter in a particular input field

  6. Label: describe what each input field is for.

  7. Action: Denotes where form data will be submitted

  8. Methods:

    a. GET: form data appended to the action URL with a ? separator.

    b. POST: form data sent as the request body.

    Let’s create a demo form:

    1. Name field label and input is used to enter simple text

        <label for="Name">Name</label>
 <input type="Text"/>

    2. Email field with placeholder attribute to enter email

        <label for="Name">Email</label>
  <input type="email" placeholder="Exmaple@email.com" />

      1. Password field to enter your secret password

         <label for="Password">Password</label>
 <input type="password" />

      2. Using radio Buttons to select gender

          <label for="Gender">Gender</label>
  <input type="radio" name="Gender" id="Gender" value="Male" />Male
 <input type="radio" name="Gender" id="Gender" value="Female" />Female

      3. Using date value in type attribute to pick DOB

           <label for="Date Of Birth">Date Of Birth</label>
   <input type="date" name="Date Of Birth" id="Date Of Birth" value="" />

      4. Select events using checkbox attributes

         <label for="Events participating">Events participating</label>
 <input type="checkbox" name="Events participating" id="Events participating" value="" /> 100m race
 <input type="checkbox" name="Events participating" id="Events participating" value="" /> 200m race
 <input type="checkbox" name="Events participating" id="Events participating" value="" /> 100m relay race

Combining All these

        <!DOCTYPE html>
        <html>
          <head>
           <title>Hello, World!</title>
           <link rel="stylesheet" href="styles.css" />
          </head>
          <body>
           <form action="/submission" method="get" accept-charset="utf-8">
           <label for="Name">Name</label>
           <input type="Text"/>
           <br />
           <label for="Name">Email</label>
           <input type="email" placeholder="Example@email.com" />
           <br />
           <label for="Password">Password</label>
           <input type="password" />
           <br />
           <label for="Gender">Gender</label>
           <input type="radio" name="Gender" id="Gender" value="Male" />Male
           <input type="radio" name="Gender" id="Gender" value="Female" />Female
           <br />
           <label for="Date Of Birth">Date Of Birth</label>
           <input type="date" name="Date Of Birth" id="Date Of Birth" value="" />
           <br />
           <label for="Events participating">Events participating</label>
           <input type="checkbox" name="Events participating" id="Events participating" value="" /> 100m race
           <input type="checkbox" name="Events participating" id="Events participating" value="" /> 200m race
           <input type="checkbox" name="Events participating" id="Events participating" value="" /> 100m relay race
           </form>
          </body>
        </html>

Conclusion

As a beginner, practice creating various types of forms to become familiar with their structure and functionality. Whether you're building a simple contact form or a complex registration form, understanding HTML forms is a crucial step in your web development journey. Happy coding!

ChaiCodeformsHTML5