Совместите одну форму и две текстовые области - PullRequest
0 голосов
/ 12 января 2012

У меня есть ФОРМА, которая содержит 32 * 50 TEXTAREA и кнопку Submit .

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

Если я хочу это сделать, я должен использовать толькоHTML?Если так, то как?Стол с одной строкой и тремя тд?(Пример кода будет очень кстати).

Или вы бы предпочли CSS?

Ответы [ 3 ]

3 голосов
/ 12 января 2012

textarea является встроенным элементом, и они будут выровнены по горизонтали, если контейнер достаточно большой по ширине. Итак, смотрите http://jsfiddle.net/FATfJ/ Я не знаю, является ли это именно то, что вам нужно.

код:

<form id="a-form">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</form>

#a-form textarea {width: 100px;}
2 голосов
/ 12 января 2012

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

Если вы предпочитаете горизонтальную прокрутку при недостаточном горизонтальном пространстве, вы можете использовать таблицу из одной строки. В разметке не было бы ничего особенного:

<table><tr><td><textarea ...></textarea>
           <td><textarea ...></textarea>
           <td><textarea ...></textarea>
</table>

Но если вы хотите настроить рендеринг, лучше всего это сделать с помощью CSS.

Если элементам textarea нужны метки, как обычно, вы можете поместить их в другой ряд таблицы (в начале).

1 голос
/ 12 января 2012

В идеале вам нужно хорошее сочетание CSS и HTML. Возможно, вы могли бы использовать наборы полей, чтобы поместить ваши поля и затем плавать их рядом друг с другом, используя CSS. Вы можете установить ширину, поля и т. Д. С помощью CSS, и вы сможете выстроить все таким образом.

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

...