HTML form with underlining for handwritten information

Question

I need to make some forms in HTML that a customer will need to print and write some entries by hand then scan or fax.

So I want there to be an area for signing like "Sign ____"

Underscores are all good if the underline is a limited length, but what if I have a number of lines that need to go all the way across the page (or in some cases table cell) with some text in front of each??

So:

Item 1: ____________
An Item 2: _________
This is item 3: ____
1 more item: _______

The trouble is if I use underscores, the underscores don't finish at the same places and it looks wrong or it warps the size of the cell. The best thing would be to underline white space but that's just not possible.

Answer 1

Wrap it in <pre> tags </pre>.

It will use a monospaced font so your underscore 'lines' will end at the same position. You may have noticed this also happens in your question above ;-)

Answer 2

So build some block elements with a border-bottom. Those will look like underlines and you can play with colors, thicknesses and whatnot.

A pragmatic solution: I would make each line a 2-column table, give the left column (with the text) a width of 0% (which will expand to the minimum needed) and the right column (empty with underline) a width of 100% (which will take up the remaining space); and I'd put an empty block with a bottom border into that right table cell.

This design of mine violates some ideals held by many other Web designers. I'm not saying this is a fantastic or very standards-compliant design, I only claim it's simple and it works.

Answer 3

Try using a CSS rule like

text-decoration: underline;

or

border-bottom: 1px solid black;