CODEWITHSUNDEEP
htmlcssformshtml-table
Jarco
Jarco

Reputation: 1775

Styling a table OR a list based form so that the labels and input fields width are set dynamically

I need to create a form as shown in this image:

enter image description here

I am unsure if it is even possible to do with html. The problem is that I can't get the labels width to change to exactly be as width as the content.

I tried it with tables and also with a ul list. Tables have the problem with the table size and lists the problem of the alignment.

I don't prefer one way or the other. I just want it to work.

Is there a way to do this?

edit: Html:

<form>
  <table>
    <tr><td>NAAM</td><td class="rechts"><input type="text" name="naam" /></td></tr>
    <tr><td>VOORNAAM</td><td class="rechts"><input type="text" name="voornaam" /></td></tr>
    <tr><td>E-MAIL</td><td class="rechts"><input type="text" name="voornaam" /></td></tr>
    <tr><td></td><td><input type="radio" name="vraag" value="vraag" /> VRAAG
                     <input type="radio" name="vraag" value="nieuwsbrief" /> NIEUWSBRIEF<td></tr>
    <tr><td></td><td class="rechts"><textarea rows="4" cols="50"></textarea></td></tr>
    <tr><td></td><td class="rechts"><input type="submit" value="Verzenden" /></td></tr>
  </table>
</form>

css:

#contactleft{ /* So: This is a div floating to the left with the adress etc */
 width: 250px;
 margin-top:50px;
 padding-top:10px;
 float:left;
 border-right: solid #b5b5b5 2px;
}
#contactleft p{
 margin-left:50px;
 font-family: Ubuntu Condensed;
 font-size: 14pt;
 line-height:1.5em;
}
#contactright{ /* So: This is the div where the form is in. */
 float:right;
 width:690px;
 margin-top:50px;
 padding-bottom: 20px;
 font-family: Ubuntu Condensed;
 font-size: 14pt;
 line-height:1.5em;
 list-style-type:none;
}
#contactright form{
  padding-top: 10px;
  padding-left: 50px;
}
#contactright form table{

}
#contactright form table td{

}
#contactright .rechts{
  width: 100%;
  padding-right: 150px;
}
#contactright .rechts input{

  width: 100%;
}

Edit: I did it the ugly way. I just made a new table for every row and that delivered the result I needed.

Upvotes: 0

Views: 760

Answers (1)

samir chauhan
samir chauhan

Reputation: 1543

Instead of table use this and style it accordingly :

      <div>
        <form name="test_form" method="post" action="">
            <label for="f_name">NAAM</label>
            <input type="text" name="f_name" size="35" /><br /><br />
            <label for="f_name">VOORNAM</label>
            <input type="text" name="f_name" size="29" /><br /><br />
            <label for="f_name">EMAIL</label>
            <input type="text" name="f_name" size="35" /><br /><br />
            <label for="f_name">VRAAG OF NIEUWSBRIEF (KEUZEMENU)</label><br />
            <textarea cols="33" rows="4"></textarea><br /><br />
            <input type="submit" name="submit" value="VERZENDEN" />
        </form>
    </div>

Upvotes: 2

Related Questions