Untitled

avatar
unknown
plain_text
2 years ago
1.3 kB
5
Indexable
<!DOCTYPE html>
<html>
<head>
  <title>Student Form</title>
  <style>
    .form-container {
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }

    .form-container input[type="text"],
    .form-container input[type="file"],
    .form-container input[type="submit"] {
      display: block;
      width: 100%;
      margin-bottom: 10px;
    }

    .form-container img {
      max-width: 200px;
      max-height: 200px;
      margin-bottom: 10px;
    }

    #submittedData {
      display: none;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2>Student Form</h2>
    <form id="studentForm">
      <input type="text" id="nameInput" placeholder="Name" required>
      <input type="text" id="rollNumberInput" placeholder="Roll Number" required>
      <input type="file" id="profilePictureInput" accept="image/*" required>
      <input type="submit" value="Submit">
    </form>
  </div>
  
  <div id="submittedData">
    <h2>Submitted Data</h2>
    <p><strong>Name:</strong> <span id="name"></span></p>
    <p><strong>Roll Number:</strong> <span id="rollNumber"></span></p>
    <img id="profilePicture" src="" alt="Profile Picture">
  </div>

  <script src="script.js"></script>
</body>
</html>
Editor is loading...