I am designing HTML form using CSS but input label text showing below the input box.

Question

My CSS code is not working properly. The input box label text is not placing in align. I tried many solutions for HTML form CSS but did not get any best solution. I am using the HTML table and CSS to design the HTML form. The input box text is showing below the input box type text. 

This is my HTML form   

HTML code 

<form action="" method="post" name="form1">

        <table align="center" width="50%" border="0">

<tr> 

<td>Voucher No</td>

<td><input type="number" min=1 name="Voucher"></td>

</tr>  <tr>

<td>Invoice No:</td>

<td><input type="number" min=1 name="Invoice"></td>

</tra> 

 <tr>

<td>Particulars</td>

 <td><input type="text" pattern="[a-zA-Z][a-zA-Z ]{2,}"  name="particulars"></td>

 </tr>

<tr>

<td>Date</td>

<td><input type="date" name="Date"></td>

 </tr>

 <tr>

 <td></td>

 <td><input type="submit" name="Submit" value="Enter"></td>

 </tr> </table>

I have tried this CSS code - 

<style>
    form{
          font-family: sans-serif;
          font-size: 26px;
          
          }
    input{
           font-family: sans-serif;
           height: 40px;
           font-size: 20px;}
    td {
    font-size: 17px;
    font-family: sans-serif;
    }
    td select {
         width: 247px;
         height: 42px;
         margin-left:-246px;

    }
   
    body {
           margin-bottom: 23%;
         }
    input[type="text"]
    {
        margin-left:-246px;
     }
    input[value="Enter"]
    {
        margin-left:-424px;
        margin-bottom:20px;
        margin-top: 10px;
     }
    input[name="Voucher"]
    {
        margin-left:-246px;
        margin-bottom:20px;
        margin-top: 0px;
     }
    input[name="Invoice"]
    {
        margin-left:-246px;
        margin-bottom:20px;
        margin-top: -19px;
     }
    input[name="particulars"]
    {
        margin-left:-246px;
        margin-bottom:20px;
        margin-top: -19px;
     }
    input[name="Date"]
    {
        margin-left:-246px;
        margin-bottom:20px;
        margin-top: -19px;
        width:247px;
     }
   
   
       
    table {
                margin-left:100px;
                text-align: center;
          }
    table[id="tables"]
    {
                margin-left:420px;
    }
    select {
                 margin-left:-248px;
    }
           </style>       

How to solve my CSS problem for HTML form?

Comments

There is no CSS class included in HTML code . Where is your CSS code ?

Answer 1

This is not a way to design an HTML form. I am understanding your problem. You can solve this issue using the code below . Replace your CSS code to this. 

</style>

input[type=text] {

  width: 100%;

  padding: 10px 10px;

  margin: 8px 0;

  box-sizing: border-box;

}

input[type=date] {

  width: 100%;

  padding: 10px 10px;

  margin: 8px 0;

  box-sizing: border-box;

}

input[type=number] {

  width: 100%;

  padding: 10px 10px;

  margin: 8px 0;

  box-sizing: border-box;

}

input[type=submit] {

  width: 20%;

  padding: 10px 10px;

  margin: 8px 0;

  box-sizing: border-box;

  background-color:blue; 

}

</style>

It will help to design your HTML form. 

Comments

Thanks a lot, mam.

Answer 2

You are doing complex CSS. We do not need to do it. Change your CSS code to - 

</style>

input[type=text] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

}

input[type=date] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

}

input{

    width: 100%;

           

           height: 40px;

           font-size: 20px;}

</style>

 

No need to add CSS for one by one input box. You can manage CSS by input type 

Add CSS code for HTML form . 

Answer 3

First of thinking about HTML form designing using CSS. 

1.  You can use CSS for HTML form design using input type. 

If you want to design a type number, then use this type of CSS. 

input[type=number] { 

Your CSS attributes 

 } 

2. You can design an HTML form text using this type of CSS . 

input[type=text] { 

Your CSS attributes 

 } 

3. You can design the date box using CSS method. change type date. 

input[type=date ] { 

Your CSS attributes 

 } 

4. If you want to design an HTML submit button form, then use type submit. 

input[type=submit] { 

Your CSS attributes 

 } 

5 . Design a email input box use type = email . 

You can design HTML form using CSS type.