Constraining size of forms

[ChilliBoy]

Hi,

Is there any way of constraining the the size of forms?

I'm try to get 3 seperate forms - 2 input boxes and a pull down menu within a small table cell. They should fit, but for some reason there is always a gap between the input boxes - creating the table cell to distort past the desired size.

Can you specify the height of the boxes? And how can you get them to stack without gaps?

If you could constrain them to pixels it would be good as Netscape seems to produce much large boxes than IE.

cheers for the help.

[zippow]

Heya Chilliboy

The size of a form text box is actually determined by what the font, and the size of the font you use. To change this attribute you must change the "styles" for the text box.
here is an example...

<input type="text" size="20" style="font-family: Tahoma; font-size: 10pt">

You will find that different fonts and different font sizes will determine the LENGTH of the text box, no matter what the "size=" value is.
for instance a text box with "font-size=20" and "size=10"
will be bigger than a text box with "font-size="10" and "size =10"

As for height goes, I'm not sure if there is any way of changing the height attribute for a text box. You can however embed a table in the form to help organise things.
For instance (the following code wont work, its just a breif outline)
<form>
<table>
</table>
</form>

Hope this helps...

[shane]

Hi ChilliBoy,

Try the following:

<form>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><input type="text" style="font-size: 10px; width: 100px" value="" maxlength="10"></td>
      <td><input type="text" style="font-size: 10px; width: 100px" value="" maxlength="10"></td>
      <td>
        <select style="font-size: 10px; width: auto" name="" size="1">
          <option value="1">text 1</option>
          <option value="2">text 2</option>
          <option value="3">text 3</option>
        </select>
      </td>
    </tr>
  </table>
</form>

I wasn't sure if you wanted the form elements vertical or horizontal. There's a whole load more style attributes you can apply, check http://www.w3.org/Style/CSS/ for more info.

Shane


<Edited by shane on 02-02-2001 at 06:27 PM>

[AlexW]

Browser's form rendering is one of the most variable things in HTML. Each form element has a built in buffer zone around it, but it's different on each browser and version.

Putting each element into table cells minimises the buffer though unfortunately it can't be eliminated .

I use similar code to shane except I add a SIZE tag, which Netscape prefers, and usually an onFocus javscript to clear the VALUE from the textbox when it's clicked on. Like this.

<input type=text name=search_box size=8 style="font-family: Verdana,Geneva,Arial; font-size: 8pt; width=85" onFocus=this.value='' value="Search for...">

Also, if you're trying to work in a small area, I've found it best to put the FORM tags inside the TABLE but outside the table rows ( <TABLE><FORM><TR><TD><INPUT></TD></TR></FORM></TABLE>).

ALthough probably not technically correct, it works fine in all browsers, and tends to remove the annoying buffer zone that the <FORM> tags automatically introduce even before you've added any form elements.

Alex
<Edited by AlexW on 02-02-2001 at 11:14 PM>

[ChilliBoy]

Cheers for all this advice - its very useful.

I'm using a lot of CSS throughout my site, and was wondering if I can use CSS on forms. This could probably help a great deal with size constraints.

Does anyone use CSS on Forms - and know the correct sort of syntax?

Also I have seen on a couple of sites where two stacked input boxes have NO buffer zone. Unfortunately I can't remember the URL's - has anyone seen this on a site so I could ahve a look at the code.

Cheers once again.

[shane]

ChilliBoy,

I couldn't get the input boxes to stack without a buffer in IE5. The best I could do was the following with the applied styles.

<style>
table.mytable{
  padding: 0px;
  margin: 0px;
  background-color:#9999cc
}
tr.myrow {
  padding: 0px;
  margin: 0px;
}
td.mycell {
  padding: 0px;
  margin: 0px;
  background-color: #ccccff
}
form.myform {
  padding: 0px;
  margin: 0px;
}
input.myinput, select.myselect{
  padding: 0px;
  margin: 0px;
  font-size: 10px;
  color:#0033cc;
  border-style: solid;
  border-width: 1px;
  border-color:#000000
}
</style>

<form class="myform">
  <table class="mytable" border="0" cellspacing="0" cellpadding="0">
    <tr class="myrow">
      <td class="mycell">
      <input class="myinput" type="text" style="width: 100px" size="10" value="" maxlength="10">
      </td>
    </tr>
    <tr class="myrow">
      <td class="mycell">
        <input class="myinput" type="text" style="width: 100px" size="10" value="" maxlength="10">
      </td>
    </tr>
    <tr class="myrow">
      <td class="mycell">
      <select class="myselect" name="" size="1">
        <option value="1">text 1</option>
        <option value="2">text 2</option>
        <option value="3">text 3</option>
      </select>
      </td>
    </tr>
  </table>
</form>

If you use the size attribute of the form element tags the size will differ between IE and Netscape. However, if you set the style width attribute in pixels they'll be the same size.

If you use the stye attribute 'font-size' specify the size in pixels not points to get the same look across platforms. This can cause printing problems but you can't have everything.

Shane

<Edited by shane on 02-03-2001 at 11:46 AM>

[ChilliBoy]

Thanks for all this help - very useful.