Question

So I am trying to have input textboxes as well as their descriptions, and I want each to be ultimately of equal length. Like for example, I would have a textbox that would look like this:

Username: [             ]

However, lets say I also had a input textbox which said “OS:”

I would like it to be like this:

Username: [             ]
OS:       [             ]

And I would like this to be true for each and every input field inside of a table (or not in a table? I am not sure)

How would I do this?

EDIT:

I have multiple fields, all of which I want to be the same length, i.e.:

Username:     [             ]      Machine Name: [             ]
OS:           [             ]      Model:        [             ]

Here is my code:

<form action="addrecord.psp" method="get">
<table>
<tr><td>Username: <input type="text" name="uname" size="12"/></td>
<td>Machine Name:<input type="text" name="mname" size="8" /></td>
<td>Make: <input type=text" name="make" size="8" /></td>
<td>Model: <input type="text" name="model" size="8"/></td>
<td>Service Tag: <input type="text" name="service" size="8"/></td></tr>
<tr><td>Processor: <input type="text" name="processor" size="12"/></td>
<td>Processor Speed: <input type="text" name="speed" size="4"/></td>
<td>Amount of RAM: <input type="text" name="ram" size="3"/></td>
<td>Type of RAM: <input type="text" name="ram2" size="4"/></td>
<td>RAM Speed: <input type="text" name="rspeed" size="4"/></td></tr>
<td>Graphics Card: <input type="text" name=graphics" size="8"/></td>
<td>Wired Mac Add: <input type="text" name="wired" size="17"/></td>
<td>Wireless Mac Add: <input type="text" name="wireless" size="17"/></td></tr>
<tr><td>OS: <input type="text" name="os" size="12"/></td>
<td>Deploy Date: <input type="text" name="deploy" size="12"/></td>
<td>Last Check-up: <input type="text" name="checkup" size="12"/></td>
<td><input type="submit" value="Submit" /></td></tr>
</table>
</form>

I don’t believe my new form, with the fieldsets is submitting correctly, I get the following callback:

Traceback (most recent call last):

File “/usr/lib/python2.7/dist-packages/mod_python/importer.py”, line 1537, in HandlerDispatch
default=default_handler, arg=req, silent=hlist.silent)

File “/usr/lib/python2.7/dist-packages/mod_python/importer.py”, line 1229, in _process_target
result = _execute_target(config, req, object, arg)

File “/usr/lib/python2.7/dist-packages/mod_python/importer.py”, line 1128, in _execute_target
result = object(arg)

File “/usr/lib/python2.7/dist-packages/mod_python/psp.py”, line 337, in handler
p.run()

File “/usr/lib/python2.7/dist-packages/mod_python/psp.py”, line 243, in run
exec code in global_scope

File “/var/www/inventory/addrecord.psp”, line 34, in
VALUES(%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)””” , (username, mname, make, model, service, processor, speed, ram, ram2, rspeed, graphics, wired, wireless, os, deploy, checkup))

File “/usr/lib/pymodules/python2.7/MySQLdb/cursors.py”, line 174, in execute
self.errorhandler(self, exc, value)

File “/usr/lib/pymodules/python2.7/MySQLdb/connections.py”, line 36, in defaulterrorhandler
raise errorclass, errorvalue

OperationalError: (1048, “Column ‘user’ cannot be null”)

Answer 1

More valid way to do it:

<style>

fieldset { 
    overflow: hidden; 
    margin-bottom: 5px;
    display: inline-block;
    width: 270px;
}

label { float: left; width: 120px; }

input { width: 120px; }

</style>

<fieldset>
  <label for="username">Username:</label>
  <input type="text" id="username" />
</fieldset>
<fieldset>
  <label for="mname">Machine Name:</label>
  <input type="text" id="mname" />
</fieldset>
<fieldset>
  <label for="os">OS:</label>
  <input type="text" id="os" />
</fieldset>
<fieldset>
  <label for="model">Model:</label>
  <input type="text" id="model" />
</fieldset>

This way you will also focus focus cursor on fields then their labels are clicked.

Example: http://jsfiddle.net/6SVp7/1/