Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 22619 / 9393 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Лекция 6:

Формы HTML и ввод данных

< Лекция 5 || Лекция 6: 123456 || Лекция 7 >
Текстовая область

В отличие от текстового поля <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>

Пример выполнения данного HTML-кода

< Лекция 5 || Лекция 6: 123456 || Лекция 7 >
Дарья Федотова
Дарья Федотова
Мария Иванова
Мария Иванова
Александр Романцов
Александр Романцов
Россия, Москва, Московский Государственный Открытый Университет, 2008
Кирилл Иванов
Кирилл Иванов
Россия, п. Новоорск