Write HITML code to create a list, table and form. BTECH CSVTU Qu...

HTML Code for List, Table, and Form (Shown as Text Without Rendering)

This guide gives you ready-to-use HTML code for creating a list, a table, and a form. The code is shown as plain text (not rendered) using HTML entities like < and > so you can copy it safely.

Unordered and Ordered Lists

<!-- Unordered List (bulleted) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered List (numbered) -->
<ol>
  <li>Plan</li>
  <li>Design</li>
  <li>Develop</li>
  <li>Test</li>
</ol>

Simple Table

<table border="1">
  <caption>Student Marks</caption>
  <thead>
    <tr>
      <th>Roll No</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Aarav</td>
      <td>85</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Diya</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

Basic Form

<form action="/submit" method="post">
  <fieldset>
    <legend>Contact Form</legend>

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>

    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="you@example.com" required>

    <br>

    <label for="course">Course:</label>
    <select id="course" name="course">
      <option value="cse">CSE</option>
      <option value="ece">ECE</option>
      <option value="me">Mechanical</option>
    </select>

    <br>

    <label>Year:</label>
    <input type="radio" id="year2" name="year" value="2"> <label for="year2">2nd</label>
    <input type="radio" id="year3" name="year" value="3"> <label for="year3">3rd</label>
    <input type="radio" id="year4" name="year" value="4"> <label for="year4">4th</label>

    <br>

    <label for="msg">Message:</label>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="Write your message..."></textarea>

    <br>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </fieldset>
</form>

Complete Webpage Example (All in One)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List, Table, and Form Demo</title>
</head>
<body>
  <h1>HTML List</h1>
  <ul>
    <li>Frontend</li>
    <li>Backend</li>
    <li>Database</li>
  </ul>

  <h1>HTML Table</h1>
  <table border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>Subject</th>
        <th>Credits</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Web Technologies</td>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>DBMS</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

  <h1>HTML Form</h1>
  <form action="/submit" method="post">
    <label for="sid">Student ID:</label>
    <input type="number" id="sid" name="sid" required>
    <br>
    <label for="sname">Name:</label>
    <input type="text" id="sname" name="sname" required>
    <br>
    <label for="dept">Department:</label>
    <select id="dept" name="dept">
      <option value="cse">CSE</option>
      <option value="it">IT</option>
      <option value="ece">ECE</option>
    </select>
    <br>
    <button type="submit">Register</button>
  </form>
</body>
</html>

Tip: Show HTML as Text (Not Rendered)

Replace < with < and > with > to display tags as text.
Wrap code in a <pre> block to preserve spacing and line breaks.
Use this method in assignments or blogs to avoid the browser rendering your HTML.