CODEWITHSUNDEEP
htmlcssformsalignment
cassie
cassie

Reputation: 31

aligning text fields in css html form

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>

Upvotes: 3

Views: 73

Answers (3)

UzUmAkI_NaRuTo
UzUmAkI_NaRuTo

Reputation: 575

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>

Upvotes: 0

yk11
yk11

Reputation: 768

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%;
}

Upvotes: 0

Nitish Kumar
Nitish Kumar

Reputation: 316

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.

Upvotes: 1

Related Questions