Form does not align properly

user_13711843 0
Viewed 89

So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.

<form align="center">
  <p>Name:
    <input type="text">
  </p>
  <p>Address    
    <input type="text">
  </p>
  <p>Email ID:
    <input type="text">
  </p>
  <p>How many Peices of fruit<br>
     do you eat per day?
    <input type="radio" name="rdbGender" id="rdbGender"> 0 
    <input type="radio" name="rdbGender" id="rdbGender">1
    <input type="radio" name="rdbGender" id="rdbGender">2<br>
    <input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
  </p>
  <label>Degree:</label> 
  <select multiple>
    <option selected>apple</option>
    <option>banana</option>
    <option>plum</option>
    <option>pomegranate</option>
  </select>
  <p>Would you like a <br /> brochure?  
    <input type="checkbox" align="right">
  </p>
  <input type="submit">         
</form>

How it was supposed to look like

How it looks like

html
3 Answers

I had a hard time understand how you had been writing this code:

<form align="center">

and

<input type="checkbox" align="right"/>

As align is not a valid attribute of an input or form tag.

But what it looks like is that it used, and has long since been removed.

https://www.w3.org/TR/html401/present/graphics.html#adef-align

Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:

enter image description here

So that suggests to me that you are using an old browser.

I recommend using the MDN documentation to see what is elements are supported.

However, if you are supporting outdated then that's a whole discipline in itself.

This page lists all available HTML attributes:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.

<form>
  <table>
    <tr>
      <td align="right">Name:</td>
      <td><input type="text"></td>

    </tr>

    <tr>
      <td align="right">Address</td>
      <td><input type="text"></td>
    </tr>

    <tr>
      <td align="right"> Email ID:</td>
      <td> <input type="text"></td>

    </tr>

    <tr>
      <td align="right"> How many Peices of fruit do you eat per day?</td>
      <td>
        <input type="radio" name="rdbGender" id="rdbGender"> 0
        <input type="radio" name="rdbGender" id="rdbGender">1
        <input type="radio" name="rdbGender" id="rdbGender">2<br>
        <input type="radio" name="rdbGender" id="rdbGender">More than 2          </td>
    </tr>

    <tr>
      <td align="right">
        Degree:
      </td>
      <td>

        <select multiple>
          <option selected>apple</option>
          <option>banana</option>
          <option>plum</option>
          <option>pomegranate</option>
        </select>
      </td>
    </tr>

    <tr align="right">
      <td> Would you like a brochure</td>
      <td align="left"> <input type="checkbox"></td>
    </tr>

    <tr>
      <td></td>
      <td> <input type="submit"></td>
  </table>
</form>

Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.

user_10684460

Do you want like this? Only html:

<form>
  <table align="center">
    <tr>
      <td align="right">Name &nbsp;</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td align="right"><br>Address &nbsp;</td>
      <td><br><input type="text"></td>
    </tr>
    <tr>
      <td align="right"><br>Email ID &nbsp;</td>
      <td><br><input type="text"></td>
    </tr>
    <tr>
      <td>
        <label for="rdbGender">
          <br>
          How many Peices of fruit &nbsp;<br> do you eat per day?<br><br><br><br>
        </label>
      </td>
      <td>
        <input type="radio" name="rdbGender" id="rdbGender">0<br>
        <input type="radio" name="rdbGender" id="rdbGender">1<br>
        <input type="radio" name="rdbGender" id="rdbGender">2<br>
        <input type="radio" name="rdbGender" id="rdbGender">More than 2
      </td>
    </tr>
    <tr>
      <td align="right">
        <br>
        <label for="degree">
          My favourite fruit &nbsp;<br><br><br><br><br>
        </label>
      </td>
      <td>

        <select id="degree" multiple>
          <option selected>apple</option>
          <option>banana</option>
          <option>plum</option>
          <option>pomegranate</option>
        </select>
      </td>
    </tr>

    <tr align="right">
      <td> Would you like a &nbsp;<br>
        brochure &nbsp;
      </td>
      <td align="left"> <input type="checkbox"></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <br>
        <input type="submit">
      </td>
  </table>
</form>

user_125782600

I suggest you to use CSS Grid to accomplish this job:

form {
  display: grid;
  grid-template-columns: 150px 200px;
  text-align: center;
}

.first-column {
  text-align: right;
}

input, select {
  margin-left: 5px;
  margin-bottom: 5px;
}

.check-area label {
  display: block;
  text-align: left;
}

.submit-button {
  grid-column-start: 2;
  text-align: left;
}
<form>
  <label class="first-column">Name:</label><input type="text">
  <label class="first-column">Address</label><input type="text">  
  <label class="first-column">Email ID:</label><input type="text">
  <div class="first-column">
    How many Peices of fruit<br>do you eat per day?
  </div>
  <div class="check-area">
    <label>
      <input type="radio" name="rdbGender" id="rdbGender">0
    </label>
    <label>
      <input type="radio" name="rdbGender" id="rdbGender">1
    </label>
    <label>
      <input type="radio" name="rdbGender" id="rdbGender">2
    </label>
    <label>
      <input type="radio" name="rdbGender" id="rdbGender">More than 2
    </label>
  </div>
  <label class="first-column">Degree:</label> 
  <select multiple>
    <option selected>apple</option>
    <option>banana</option>
    <option>plum</option>
    <option>pomegranate</option>
  </select>
  <label class="first-column">Would you like a<br>brochure?</label>    
  <input type="checkbox" align="right">
  <div class="submit-button"><input type="submit"></div>
</form>

user_27048520
Related