regform.html

<!DOCTYPE html>
<html>
  <body>
    <style>
      .StudentForm {
        display: flex;
        flex-direction: column;
        justify-content: start;
        background-color: #947eed;
        width: 90%;
        height: 80vh;
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 15px;
        border-radius: 8px;
        margin: 20px 0px 20px 0px;
        transform: translate(-50%, -50%);
        overflow: scroll;
      }

      #headStyle {
        color: yellow;
      }

      .Buttons {
        padding: 5px;
        width: 50px;
        background: Grey;
        border: unset;
        color: Black;
      }

      /* .padding {
        margin-left: 80px;
      
      } */
      .labelStyle {
        width: 35%;
        display: inline-block;
      }
    </style>
    <u>
      <center>
        <h2 style="color: #947eed" id="headStyle">STUDENT REGISTRATION FORM</h2>
      </center>
    </u>

    <div class="StudentForm">
      <form>
        <label class="labelStyle" for="FIRST NAME">FIRST NAME: </label>
        <input
          class="padding"
          type="text"
          id="fname"
          name="fname"
        /><br /><br />
        <div>
          <label class="labelStyle" for="LAST NAME">LAST NAME:</label>
          <input
            class="padding"
            type="text"
            id="lname"
            name="lname"
          /><br /><br />
        </div>
        <label class="labelStyle" for="DOB">DATE OF BIRTH:</label>
        <input class="padding" type="date" id="DOB" name="DOB" /><br /><br />
        <label class="labelStyle" for="email">EMAIL ID:</label>
        <input
          class="padding"
          type="text"
          id="email"
          name="email"
        /><br /><br />
        <label class="labelStyle" for="phone">MOBILE NUMBER:</label>
        <input
          class="padding"
          type="tel"
          id="phone"
          name="phone"
          maxlength="10"
        /><br /><br />

        <label class="labelStyle" for="gender">GENDER:</label>
        <input class="padding" type="radio" name="gender" value="male" /> Male
        <input type="radio" name="gender" value="female" /> Female<br /><br />
        <label class="labelStyle" for="address">ADDRESS:</label>
        <textarea class="padding" name="Address" rows="5" cols="50"></textarea
        ><br /><br />
        <label class="labelStyle" for="city">CITY:</label>
        <input class="padding" type="text" id="city" name="city" /><br /><br />
        <label class="labelStyle" for="pincode">PINCODE:</label>
        <input
          class="padding"
          type="text"
          id="pincode"
          name="pincode"
          maxlength="6"
        /><br /><br />
        <label class="labelStyle" for="state">STATE:</label>
        <input
          class="padding"
          type="text"
          id="state"
          name="state"
        /><br /><br />
        <label class="labelStyle" for="country">COUNTRY:</label>
        <input
          class="padding"
          type="text"
          id="country"
          name="country"
          value="INDIA"
          readonly="readonly"
        /><br /><br />
        <label class="labelStyle" for="hobbies">HOBBIES:</label>
        <input
          class="padding"
          type="checkbox"
          name="Hobby_Drawing"
          value="drawing"
        />
        DRAWING
        <input type="checkbox" name="Hobby_Singing" value="singing" /> SINGING
        <input type="checkbox" name="Hobby_Dancing" value="dancing" /> DANCING
        <input type="checkbox" name="Hobby_Others" value="OTHERS" /> OTHERS
        <input type="text" id="others" name="Hobby_Others" /><br /><br />
        <div style="display: flex; flex-direction: row">
          <label class="labelStyle" for="qualification">QUALIFICATIION:</label>
          <table border="2">
            <th>S.NO</th>
            <th>Examination</th>
            <th>Board</th>
            <th>Percentage</th>
            <th>Year Of Passing</th>

            <tr>
              <td>1</td>
              <td>Class X</td>

              <td><input type="text" name="ClassX_Board" /></td>
              <td><input type="text" name="ClassX_Percentage" /></td>
              <td><input type="text" name="ClassX_YearOfPassing" /></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Class XII</td>

              <td><input type="text" name="ClassXII_Board" /></td>
              <td><input type="text" name="ClassXII_Percentage" /></td>
              <td><input type="text" name="ClassXII_YearOfPassing" /></td>
            </tr>

            <tr>
              <td>3</td>
              <td>Graduation</td>

              <td><input type="text" name="Graduation_Board" /></td>
              <td><input type="text" name="Graduation_Percentage" /></td>
              <td><input type="text" name="Graduation_YearOfPassing" /></td>
            </tr>
          </table>
        </div>
        <label class="labelStyle" for="courses">COURSES APPLIED FOR:</label>

        <input class="padding" type="radio" name="course" value="BCA" /> BCA
        <input type="radio" name="course" value="BCA" /> B.Com
        <input type="radio" name="course" value="BCA" /> B.Sc

        <br /><br />

        <center>
          <button class="Buttons" type="submit" placehovalue="Submit">
            Submit
          </button>
          <button class="Buttons" type="Reset" placehovalue="Reset">
            Reset
          </button>
        </center>
      </form>
    </div>
  </body>
</html>
Editor is loading...