Custom Form

by theodore_steiner

HTML

<form id="formStyle10" runat="server">
         
      <ul class="tabs">

          <li>
              <input type="radio" name="tabs" id="tab-1" checked />
              <label for="tab-1">Information</label>
              
              <div id="tab-content-1" class="tab-content">
                  <p class="pTitles">Personal Information</p>
                  <div class="clearFix"></div>
                  <div class="thinLine"></div>
                  <div class="clearFix"></div>
                  
                  <p>First Name</p>
                  <p id="lastName">Last Name</p>
                  <div class="clearFix"></div>
                  <input type="text" name="firstName" id="firstNameBox" />
                  <input type="text" name="lastName" id="lastNameBox" />
                  <div class="clearFix"></div>

                  <p>Address</p>
                  <p class="city">City</p>
                  <div class="clearFix"></div>
                  <input type="text" name="addressBox" class="addressBox" />
                  <select class="citySelect">
                      <option>Select</option>
                      <option>City 2</option>
                      <option>City 3</option>
                      <option>City 4</option>
                  </select>
                  <div class="clearFix"></div>

                  <p>Postal Code</p>
                  <p id="province">Province</p>
                  <div class="clearFix"></div>
                  <input type="text" name="postalCode" class="postalCode" />
                  <select id="provinceSelect">
                      <option>Select</option>
                      <option>Prov 1</option>
                      <option>Prov 2</option>
                      <option>Prov 3</option>
                  </select>
                  <div class="clearFix"></div>

                  <p>OECTA Unit</p>
                  <p id="oID">OECTA ID</p>
                  <div class="clearFix"></div>
               ...

CSS

body
    {
        margin-left: 0;
        margin-top: 0;
        background-color: #F5F5F5;
    }

    .clearFix
    {
        clear: both;
    }

    p
    {
        font-size: 13px;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-left: 35px;
        margin-top: 15px;
        color: #696969;
        float: left;
             
    }

    #lastName
    {
        margin-left: 300px;
    }

    .city
    {
      margin-left: 318px;
    }

    #province
    {
        margin-left: 294px;
    }

    #oID
    {
        margin-left: 294px;
    }

    .postalCode
    {
        width: 300px;
        height: 25px; 
        margin-left: 35px;
    }

    #schoolName
    {
        margin-left: 285px;
    }

    #courseFee
    {
        margin-left: 268px;
    }

    #courseEndDate
    {
        margin-left: 258px;
    }

    .netIncome
    {
        margin-left: 255px;
    }

    .lastNameDependent
    {
        float: left;
        margin-left: 200px;
    }

    .ageDependent
    {
        float: left;
        margin-left: 200px;
    }

    #ontarioTeachingCert
    {
        float: left;
        margin-top: 10px;
    }

    #certificateOfQualification
    {
        float: left;
        margin-top: 10px;
    }

    #letterOfPermission
    {
        float: left;
        margin-top: 10px;
    }

    #other
    {
        float: left;
        margin-top: 10px;
    }

    #previousBursaryYears
    {
        margin-left: 81px;
    }

    .oectaPositionReference
    {
        margin-left: 332px;
    }

    #daytimeTele
    {
        margin-left: 295px;
    }

    #teachingYears
    {
        margin-left: 241px;
    }

    #membershipStatus
    {
        margin-left: 279px;
    }
   
    
        
    
    
    
    
     .pTitles
    {
        font-size: 18px;
        margin-top: 15px;
        margin-bottom: 8px;
        margin-left: 35px;
        color: #696969;
        font-weight: bold;
    }

    .thinLine
    {
        height: 0.5px;
        width: 671px;
 ...