HTML-форма с подчеркиванием для рукописной информации

Question

Мне нужно создать несколько форм в HTML, которые клиенту нужно будет распечатать и написать вручную, а затем отсканировать или отправить по факсу.

Итак, я хочу, чтобы была область для подписи, такая как «Sign ____________»

Все подчеркивания хороши, если подчеркивание имеет ограниченную длину, но что, если у меня есть ряд строк, которые необходимо пройти по всей странице (или в некоторых случаях в ячейке таблицы) с некоторым текстом перед каждым?

Итак:

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

Проблема в том, что если я использую подчеркивания, подчеркивания не заканчиваются в одних и тех же местах и ​​выглядят неправильно, или искажает размер ячейки. Лучше всего было бы подчеркнуть пробел, но это просто невозможно.

Answer 1

Итак, постройте некоторые блочные элементы с border-bottom. Они будут выглядеть как подчеркивание, и вы можете играть с цветами, толщиной и еще много чего.

Прагматичное решение: Я бы сделал каждую строку таблицей из 2 столбцов, присвоил бы левому столбцу (с текстом) ширину 0% (которая будет расширена до необходимого минимума) и правый столбец (пустой с подчеркиванием) шириной 100% (который займет оставшееся пространство); и я бы поместил пустой блок с нижней границей в эту правую ячейку таблицы.

Этот мой дизайн нарушает некоторые идеалы многих других веб-дизайнеров. Я не говорю, что это фантастический или очень соответствующий стандартам дизайн, я только утверждаю, что он прост и работает.

Answer 2

Заверните в tags .

Он будет использовать моноширинный шрифт, поэтому ваши строки подчеркивания будут заканчиваться в той же позиции. Возможно, вы заметили, что это также происходит в вашем вопросе выше; -)

Answer 3

Попробуйте использовать правило CSS, например

text-decoration: underline;

или

border-bottom: 1px solid black;