|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 24675 / 10844 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Специальности: Программист, Разработчик интернет-проектов
Лекция 6:
Формы HTML и ввод данных
Текстовая область
В отличие от текстового поля <input type=text> текстовая область позволяет вводить многострочный текст большого объема. Такие области часто используются при вводе сообщений, комментариев.
Текстовая область описывается при помощи тегов <textarea> </textarea>, между которыми можно разместить предварительно отформатированный стандартный текст. Атрибуты cols и rows задают размер видимой области текстового поля.
В следующем примере создана текстовая область с предварительно введенным текстом.
<html> <body> <textarea rows="7" cols="30"> В данном примере мы создали текстовую область с шириной в 30 символов и высотой в 7 строк. Заданное значение высоты не ограничивает общий объем вводимого текста, а влияет только на размер отображаемой на экране текстовой области. Для просмотра всего текста необходимо воспользоваться полосой прокрутки. </textarea> </body> </html>
Пример выполнения данного HTML-кода
Внешний вид форм
Существуют различные способы оформления внешнего вида форм. Один из них основан на использовании пары тегов <fieldset> </fieldset>, которые позволяют объединить тематически близкие и рядом расположенные поля формы в группу и выделить ее визуально. Другой способ основан на применении стандартных средств форматирования HTML, включая цветовое и шрифтовое оформление, графику, таблицы и т.п.
Группировка полей формы
Теги <fieldset> </fieldset> объединяют поля формы в группы, выделяют их визуально, упрощают навигацию в форме с помощью клавиши [Tab] (в первую очередь обходятся поля в пределах группы). Для того чтобы объединить несколько элементов ввода или управления в группу достаточно поместить их внутри тегов <fieldset> </fieldset>. Закрывающий тег </fieldset> обязателен.
В следующем примере создается форма, содержащая поля для ввода имени и фамилии, объединенные в группу, а также кнопку отправки
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<fieldset>
Имя:
<input type="text" name="firstname" value="Билл">
<br>
Фамилия:
<input type="text" name="lastname" value="Гейтс">
</fieldset>
<input type="submit" value="отправить">
</form>
</body>
</html>Пример выполнения данного HTML-кода
При помощи пары тегов <legend> </legend> образованной группе полей можно присвоить имя. В следующем примере форма ввода дополнена полями для ввода информации о месте работы и занимаемой должности, объединенными во вторую группу. Каждой группе полей присвоен свой заголовок.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<fieldset>
<legend>Личные данные</legend>
Имя:
<input type="text" name="firstname" value="Билл">
<br>
Фамилия:
<input type="text" name="lastname" value="Гейтс">
<br>
Пол:
<input type="radio" name="Sex" value="Male" checked="checked"> Мужской
<input type="radio" name="Sex" value="Female"> Женский
</fieldset>
<fieldset>
<legend>Данные о работе</legend>
Место работы:
<input type="text" name="work" value="Microsoft">
<br>
Должность:
<input type="text" name="status" value="Президент">
</fieldset>
<input type="submit" value="отправить">
</form>
</body>
</html>Пример выполнения данного HTML-кода
Оформление форм стандартными средствами HTML
Несмотря на простоту использования тегов группировки <fieldset>, их возможности по оформлению форм весьма ограничены. Чаще всего для оформления внешнего вида форм используются стандартные средства HTML. В следующем примере показано, как с помощью таблицы поля формы выровнены друг под другом, а заголовок формы и кнопка отправки размещены по центру формы. Сама форма визуально выделена желтым цветом.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<table bgcolor="#FFFF99">
<tr>
<th colspan="2" align="center">Личные данные:</th>
</tr>
<tr>
<td align="right">Имя:</td>
<td align="left"><input type="text" name="firstname" value="Билл"></td>
</tr>
<tr>
<td align="right">Фамилия:</td>
<td align="left"><input type="text" name="lastname" value="Гейтс"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="отправить"></td>
</tr>
</table>
</form>
</body>
</html>