aligning text fields in css html form

Question

I'm trying to make a website form look like this where the right side of text fields are aligned

When I change the size of the screen, the text fields are no longer in alignment. How can I keep them aligned regardless of screen size?

Here is my code:

<head>

  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <title>Coat Request Form</title>

    </head>

  <body>

    <form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

      <p>
        <input type=hidden name="oid" value="00Di0000000gO95">
        <input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq"> 

        <span style="display:inline-block" margin-right="30px">
          <label class="required" for="first_name" style="display:block">First Name</label> 
          <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
        </span>

        <span style="display:inline-block">
          <label class="required" for="last_name" style="display:block">Last Name</label>
          <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
        </span>
        <br>
        <span style="display:inline-block">
          <label class="required" for="email" style="display:block" >Email</label>
          <input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
        </span>

        <span style="display:inline-block">
          <label for="phone" style="display:block" >Phone</label>
          <input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
        </span>

        <br>

        <span style="display:inline-block">
          <label for="company" style="display:block">Company (optional)</label>
          <input id="company" maxlength="40" name="company" size="20" type="text" /><br>
        </span>

        <span style="display:inline-block">

          <label style="display:block">How many coats?</label>
          <input  id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>

        </span>


        <label style="display:block">Who are the coats for?</label>
        <textarea  id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" wrap="soft"></textarea><br>
        <input type="submit" name="submit" class="btn">

        <select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
          <option type="hidden" value="Coats">Coats</option> </select><br>
      </p>
    </form>
  </body>

Why not use bootstrap? v4-alpha.getbootstrap.com/components/forms - This will instantly make your form responsive. — Amjad
– Amjad, Commented Apr 19, 2016 at 18:21
Stop in-line styling, and adopt 'getbootstrap' CSS, start using it. — Riot Zeast Captain
– Riot Zeast Captain, Commented Apr 19, 2016 at 18:57

Nitish Kumar · Accepted Answer · 2016-04-19 18:25:22Z

1

You can use bootstrap for this purpose. Use the bootstrap style-sheet. As bootstrap provides responsive web design so your design will be aligned automatically based on the screen size. Enclose the fields in row. Then make two columns by adding the class "col-md-6", the problem will be solved. For more detail about how to use the bootstrap visit this link.

answered Apr 19, 2016 at 18:25

Nitish Kumar

3165 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yk11 · Accepted Answer · 2016-04-19 18:29:24Z

0

Using simple CSS you can align all the fields.

See the following jsfiddle: https://jsfiddle.net/h5w2LLjd/

CSS:

.right {
    float: right;
}

.left {
    float: left;
}

.full {
    width: 100%;
}

.clear {
    clear: both;
}

textarea {
    box-sizing: border-box;
    width: 100%;
}

answered Apr 19, 2016 at 18:29

yk11

7684 silver badges9 bronze badges

Comments

UzUmAkI_NaRuTo · Accepted Answer · 2016-04-19 18:37:30Z

Check this

<head>

  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <title>Coat Request Form</title>

    </head>

  <body>

    <form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

      <p>
        <input type=hidden name="oid" value="00Di0000000gO95">
        <input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq"> 

        <span style="display:inline-block" margin-right="30px">
          <label class="required" for="first_name" style="display:block">First Name</label> 
          <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
          <label class="required" for="last_name" style="display:block">Last Name</label>
          <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
        </span>
        <br>
        <span style="display:inline-block">
          <label class="required" for="email" style="display:block" >Email</label>
          <input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
          <label for="phone" style="display:block" >Phone</label>
          <input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
        </span>

        <br>

        <span style="display:inline-block">
          <label for="company" style="display:block">Company (optional)</label>
          <input id="company" maxlength="40" name="company" size="20" type="text" /><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">

          <label style="display:block">How many coats?</label>
          <input  id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>

        </span>


        <label style="display:block">Who are the coats for?</label>
        <textarea  id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" style:"position: absolute;
width: 98%;" wrap="soft"></textarea><br>
        <input type="submit" name="submit" class="btn">

        <select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
          <option type="hidden" value="Coats">Coats</option> </select><br>
      </p>
    </form>
  </body>

Collectives™ on Stack Overflow

aligning text fields in css html form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related