Full HTML Form Using Table Layout

A form can be placed inside an HTML table to organize labels and input fields into separate columns.

In this example:

• Column 1 → Form Label
• Column 2 → Form Input
• Column 3 → Additional Information

• <h2>Student Registration Form</h2>
  
  <form>
  
      <table>
  
          <tr>
              <td>
                  <label for="fullname">
                      Full Name:
                  </label>
              </td>
  
              <td>
                  <input 
                      type="text"
                      id="fullname"
                      name="fullname"
                      placeholder="Enter your full name"
                  >
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="email">
                      Email:
                  </label>
              </td>
  
              <td>
                  <input 
                      type="email"
                      id="email"
                      name="email"
                      placeholder="Enter your email"
                  >
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="password">
                      Password:
                  </label>
              </td>
  
              <td>
                  <input 
                      type="password"
                      id="password"
                      name="password"
                      placeholder="Enter your password"
                  >
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="age">
                      Age:
                  </label>
              </td>
  
              <td>
                  <input 
                      type="number"
                      id="age"
                      name="age"
                      min="1"
                      max="100"
                  >
              </td>
          </tr>
  
          <tr>
              <td>
                  <label>
                      Gender:
                  </label>
              </td>
  
              <td>
  
                  <input 
                      type="radio"
                      id="male"
                      name="gender"
                      value="male"
                  >
  
                  <label for="male">
                      Male
                  </label>
  
                  <input 
                      type="radio"
                      id="female"
                      name="gender"
                      value="female"
                  >
  
                  <label for="female">
                      Female
                  </label>
  
              </td>
          </tr>
  
          <tr>
              <td>
                  <label>
                      Skills:
                  </label>
              </td>
  
              <td>
  
                  <input
                      type="checkbox"
                      id="html"
                      name="skills"
                      value="html"
                  >
  
                  <label for="html">
                      HTML
                  </label>
  
                  <br>
  
                  <input
                      type="checkbox"
                      id="css"
                      name="skills"
                      value="css"
                  >
  
                  <label for="css">
                      CSS
                  </label>
  
                  <br>
  
                  <input
                      type="checkbox"
                      id="javascript"
                      name="skills"
                      value="javascript"
                  >
  
                  <label for="javascript">
                      JavaScript
                  </label>
  
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="course">
                      Course:
                  </label>
              </td>
  
              <td>
  
                  <select 
                      id="course"
                      name="course"
                  >
  
                      <option value="">
                          Select a course
                      </option>
  
                      <option value="html">
                          HTML
                      </option>
  
                      <option value="css">
                          CSS
                      </option>
  
                      <option value="javascript">
                          JavaScript
                      </option>
  
                  </select>
  
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="dob">
                      Date of Birth:
                  </label>
              </td>
  
              <td>
  
                  <input
                      type="date"
                      id="dob"
                      name="dob"
                  >
  
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="photo">
                      Upload Photo:
                  </label>
              </td>
  
              <td>
  
                  <input
                      type="file"
                      id="photo"
                      name="photo"
                  >
  
              </td>
          </tr>
  
          <tr>
              <td>
                  <label for="message">
                      Message:
                  </label>
              </td>
  
              <td>
  
                  <textarea
                      id="message"
                      name="message"
                      rows="5"
                      cols="30"
                      placeholder="Write your message"
                  ></textarea>
  
              </td>
          </tr>
  
          <tr>
              <td></td>
  
              <td>
  
                  <button type="submit">
                      Submit
                  </button>
  
                  <button type="reset">
                      Reset
                  </button>
  
              </td>
          </tr>
  
      </table>
  
  </form>