HTML Forms & Input Types: Complete Beginner to Practical Guide

Welcome to the Complete HTML Course. In this post, you will learn how real websites collect data from users and how information is displayed in a structured table format.

This post covers Lesson 10 to Lesson 12: HTML Forms, Input Types, and HTML Tables with live editable examples.

Lesson 10: HTML Forms (Foundation of User Interaction)

Forms are used when a website needs to take input from users. Login pages, contact pages, search boxes, and sign‑up forms all are built using HTML forms.

The <form> Tag

The <form> element wraps all form controls. It tells the browser where and how to send user data.

action → URL where data is sent
method → how data is sent (GET or POST)

<form action="#" method="get">
  <label>Name:</label><br>
  <input type="text"><br><br>

<label>Email:</label><br> <input type="email"><br><br>

<button type="submit">Submit</button>

</form>

GET method sends data in the URL (not secure).
POST method sends data secretly (used in real forms).

Lesson 11: HTML Input Types (Very Important)

HTML provides different input types so browsers can validate data automatically and improve user experience.

Common Input Types

text – normal text
email – email validation
password – hidden input
number – numeric values
tel – phone numbers

<form>
  <input type="text" placeholder="Your Name" required><br><br>
  <input type="email" placeholder="Email" required><br><br>
  <input type="password" placeholder="Password"><br><br>
  <input type="number" placeholder="Age"><br><br>
  <button>Register</button>
</form>

Radio, Checkbox & File

radio – choose one option
checkbox – choose multiple
file – upload files

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

Skills:<br> <input type="checkbox"> HTML <input type="checkbox"> CSS <input type="checkbox"> JS<br><br>

<input type="file"><br><br> <button>Submit</button>

</form>

Lesson 12: HTML Tables (Structured Data)

Tables are used to display tabular data like reports, pricing, marksheets, and schedules.

Basic Table Structure

<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Maxon</td>
    <td>HTML</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Selin</td>
    <td>CSS</td>
    <td>85</td>
  </tr>
</table>

Semantic Table Tags (Professional Way)

HTML tables should not be written randomly. Using semantic table tags helps browsers, screen readers, and search engines understand your data properly.

Complete Table Structure Example

<table border="1" cellpadding="8" cellspacing="0">
  
  <thead>
    <tr>
      <th>Course</th>
      <th>Level</th>
      <th>Duration</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>HTML</td>
      <td>Beginner</td>
      <td>10 Hours</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Intermediate</td>
      <td>15 Hours</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Advanced</td>
      <td>25 Hours</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">
        Total Courses: 3
      </td>
    </tr>
  </tfoot>

</table>

What Each Tag Does

<thead> – Holds table headings. Improves accessibility and SEO.
<tbody> – Contains the main table data. Browsers use it to group rows properly.
<tfoot> – Displays summary or total information. Often used for totals or notes.

Best Practice:
Always use <th> inside <thead> and keep <tfoot> for summary content only.

Warning!
Do not use tables for page layout. Tables are meant only for structured data.

Success! You now know how to create semantic HTML tables correctly.

Common Beginner Mistakes

Using tables for layout
Missing labels in forms
Ignoring required attributes

What You Learned in Beginner Post #4

HTML forms and methods
All important input types
HTML tables and structure

🎉 Great job!
You’ve successfully completed Beginner Post #4. Consistency is what turns beginners into pros. Practice daily, then move ahead with confidence.

Next Beginner Post

🚀 Level Up: Next HTML Lesson: Text, Links, Images & Semantic HTML →

Maxoncodes