Управление расположением элементов и текста формы с помощью HTML-таблиц
В коде примеров форм, приведенном выше в этой главе, не используются никакие другие элементы размещения объектов на форме, кроме дескрипторов абзацев (<р>) и новых строк (<br>). Тем не менее, в некоторых случаях группу флажков или переключателей необходимо расположить вертикально или горизонтально, что позволяет улучшить внешний вид формы. Аналогично, при создании формы вопросов и ответов вопросы удобно расположить в левой части формы, а ответы на них - в правой части. К счастью, на форме можно использовать таблицы, при этом в ячейки таблицы можно помещать целые формы.
Предположим, например, что на форме содержится многострочное текстовое поле ввода, как показано на рис. 3.16, надпись для которого расположена в нижнем левом углу поля (такое расположение имеет место по умолчанию при помещении текста и графики в один абзац).
Рис. 3.16. Надпись перед элементом формы, расположенная по умолчанию в левом нижнем углу элемента
ПРАКТИКУМ
Для переноса надписи "Сообщение:" ("Message:") в верхний левый угол элемента формы поместите надпись и элемент формы в таблицу с двумя столбцами, как показано в приведенном ниже коде:
<table border="0" cellspacing="0" width="100%" id="TextboxTable"cellpadding="0” height="63"><tr><td width="10%" valign="top" height="63">Сообщение:</td><td width="90%" height="63"><textarea name="TextMessage" rows="5" cols="60"></textarea></td></tr></table>
Разделите текст надписи и элемент формы, поместив их в отдельные ячейки таблицы. Таким образом, вы получите возможность независимо выравнивать надпись и поле ввода (элемент формы). Вставьте надпись в левый столбец таблицы, а поле - в правый столбец. Затем укажите браузеру на необходимость выравнивания текста в левом столбце по верхнему краю, установив значение атрибута valign дескриптора <td> равным "top". После этого задайте значение атрибута height обоих дескрипторов <td> равным высоте многострочного тестового поля в пикселях. В результате браузер выведет на экран текстовую надпись возле верхнего левого угла текстового поля, как показано на рис. 3.17.
Рис. 3.17. Часть формы с надписью, расположенной в верхнем левом углу многоестрочного поля ввода, и неупорядоченными флажками
ПРАКТИКУМ
Помимо возможности выравнивания надписей и элементов формы, таблица может использоваться для визуальной группировки элементов формы. Предположим, например, что необходимо выровнять флажки, находящиеся под многострочным полем ввода на рис. 3.14. Поскольку надпись каждого флажка представляет собой одну строку текста, надпись и флажок могут находиться в одной ячейке таблицы. (Если флажок содержит надпись, состоящую из нескольких строк текста, флажок и надпись нужно было бы помещать в отдельные ячейки,что позволило бы выравнивать флажок желаемым образом относительно его надписи, как это было сделано с надписью "Сообщение:" и многострочным полем ввода в предыдущем практикуме.) Если поместить флажки, приведенные на рис.3.17, в многострочную таблицу с несколькими столбцами, код которой находится ниже, можно расположить флажки, как показано на рис. 3.18.
<p>Области интересов:<br/><table border="0" cellpadding="0" cellspacing="0" width="100%" id="CheckboxTable"><tr><td width="143" align="left" valign="top">Операционные системы:</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="Win98"/>Windows 98</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="WinXP"/>Windows XP</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="WinNT"/>Windows NT</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="WinME"/>Windows ME</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="Win2000"/>Windows 2000</td></tr><tr><td width="143" align="left" valign="top">Snbsp;</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="Novell"/>Novell</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="Unix"/>Unix</td><td width="129" align="left" valign="top"><input type="checkbox" name="OS" value="Other"/>Другая</td></tr></table>
Рис. 3.18. Часть формы с выровненными и визуально сгруппированными флажками
Обратите внимание, что таблицы используются для выравнивания элементов формы, но сами остаются невидимыми. При создании формы иногда бывает удобно установить значение атрибута border дескриптора <table> формы равным 1, что позволит увидеть ячейки таблицы. Затем, после выполнения выравнивания элементов формы "сетку" таблицы можно снова отключить, установив значение атрибута border равным 0.