CSS for Label does not apply to the form

Hi could anyone please help me to find out why the CSS does not apply to my labels. I have used the inline-block in my label but still does not work. I would like to align my form input boxes and labels. At the moment the input box starts just after the label. Thanks

Here is my code

'''

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: black;}
p    {color: black;}

label {display:inline-block;}

div {margin-bottom: 5px;}


input {
        padding: 5px 10px;
      
      }
</style>
</head>

<body>
<form method="post" action="connect.php">
  
    <h1>Doctor Registration Form</h1>
    <p>Please fill in this form to register a doctor</p>
    <hr>

    <div label for="DOCTOR_ID">DOCTOR ID</label>
    <input type="number" placeholder="Enter ID" name="DOCTOR_ID" id="DOCTOR_ID">
</div>
    <div label for="DOCTOR_FNAME">FIRST NAME</label>
    <input type="text" placeholder="Enter first name" name="DOCTOR_FNAME" id="DOCTOR_FNAME" maxlength="15">
</div>
    <div label for="DOCTOR_LNAME">LAST NAME</label>
    <input type="text" placeholder="Enter last name" name="DOCTOR_LNAME" id="DOCTOR_LNAME" maxlength="25">
</div>
    <div label for="DOC_ADDRESS">ADDRESS</label>
    <input type="text" placeholder="Enter address" name="DOC_ADDRESS" id="DOC_ADDRESS" maxlength="40">
</div>
    <div label for="DOC_CONTACTNUM">PHONE NUMBER</label>
    <input type="text" placeholder="Enter phone number" name="DOC_CONTACTNUM" id="DOC_CONTACTNUM" maxlength="10">
</div>
    <div label for="DOC_EMAIL">EMAIL</label>
    <input type="text" placeholder="Enter Email" name="DOC_EMAIL" id="DOC_EMAIL" maxlength="35">
</div>
<button type="reset" class="resetbtn">Reset</button>
<button type="submit" class="registerbtn">Register</button>



</form>
</body>
</html>

''' You can see in the picture the form elements not aligned

CSS for Label does not apply to the form

0 Answers