Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Ноябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 39


Номер: 39

Дата: 2008-11-30

Архив Рассылки

Самоучитель HTML

Справочник по CSS
Самоучитель по HTML и CSS

Добрый день.

Для тех, кто только присоединился к нашей рассылке и не знаком с HTML, доступен для обязательного скачивания «Самоучитель HTMl» по адресу http://htmlbook.ru/download/?id=4. Также появился «Самоучитель CSS», в который вошли темы, уже опубликованные в нашей рассылке. Темы переработаны, добавлены вопросы для проверки и задания для самостоятельно решения. Впрочем, ответы тоже имеются.

Скачать Самоучитель CSS

Свои отзывы о самоучителях присылайте мне по адресу vlad@htmlbook.ru.

Поскольку рассылка разделилась на две части: CSS и формы, то сегодня речь пойдет только о них, т.е. о формах и их элементах.

Формы. Поле для пароля

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

<input type="password" параметры>

Параметры поля перечислены в табл. 5.1.

Табл. 5.1. Параметры поля с паролем
Параметр Описание
size Ширина текстового поля, которое определяется числом звездочек моноширинного шрифта.
maxlength Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками.

Создание поля для пароля показано в примере 5.1.

Пример 5.1. Поле для пароля 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Ввод пароля</title>
 </head>
 <body> 
  <form action="handler.php">
   <p><b>Логин:</b> <input type="text" maxlength="25" size="40" name="text"></p>

   <p><b>Пароль:</b> <input type="password" maxlength="15" size="40" name="pass"></p>

   <p><input type="submit"></p>
  </form> 
 </body> 
</html>

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

Формы. Многострочный текст

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

Синтаксис создания следующий.

<textarea параметры>
текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Допустимые параметры перечислены в табл. 6.1.

Табл. 6.1. Параметры многострочного текста
Параметр Описание
cols Ширина поля в символах.
disabled Блокирует доступ и изменение элемента.
name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly Устанавливает, что поле не может изменяться пользователем.
rows Высота поля в строках текста.
wrap Параметры переноса строк.

Создание поля многострочного текста показано в примере 6.1.

Пример 6.1. Многострочный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Текстовое поле</title>

 </head>
 <body> 
  <form action="handler.php">
   <p><b>Введите ваш отзыв:</b></p>
   <p><textarea rows="10" cols="45" name="comment"></textarea></p>

   <p><input type="submit"></p>
  </form>
 </body>
</html>

Формы. Кнопки

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <INPUT> и тега <BUTTON>.

Рассмотрим вначале добавление кнопки через <INPUT> и его синтаксис.

<input type="button" параметры>

Параметры кнопки перечислены в табл. 7.1.
Табл. 7.1. Параметры кнопок
Параметр Описание
name Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Значение кнопки и одновременно надпись на ней.

Создание кнопки с разными параметрами показано в примере 7.1.

Пример 7.1. Добавление кнопки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Кнопка</title>

 </head>
 <body> 
  <form action="handler.php">
   <p><input type="button" name="press" value=" Нажми меня нежно "></p>

  </form>
 </body>
</html>

В результате получим следующее.

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

Второй способ создания кнопки основан на использовании тега <BUTTON>. Он по своему действию напоминает результат, получаемый с помощью тега <INPUT>. В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы. В примере 7.2 показано создание кнопки с текстом и рисунком.

Пример 7.2. Кнопки, созданные с помощью тега <BUTTON>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Кнопка</title>
 </head>
  <body>
    <form action="handler.php"> 
     <p>

      <button>Кнопка с текстом</button>
      <button><img src="/images/umbrella.gif" width="25" height="32" alt="Зонтик"> Кнопка с рисунком</button>

    </p>
  </form> 
 </body>
</html>

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

Кнопка SUBMIT

Для отправки данных на сервер предназначена специальная кнопка SUBMIT. Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега <FORM>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.

Синтаксис создания кнопки SUBMIT зависит от используемого тега <INPUT> или <BUTTON>.

<input type="submit" параметры>
<button type="submit">Надпись на кнопке</button>

Параметры такие же, что и у обычных кнопок (пример 7.3).

Пример 7.3. Кнопка для отправки данных на сервер

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Кнопка</title>
 </head>
 <body>
  <form action="handler.php" method="get">

   <p>...</p>
   <p><input type="submit"></p>
  </form>
 </body>

</html>

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, на кнопке автоматически появится надпись «Подача запроса» для русской версии браузера Internet Explorer, «Отправить запрос» для русской версии Firefox или «Submit Query» для Netscape.

Кнопка RESET

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" параметры>
<button type="reset">Надпись на кнопке</button>

В примере 7.4 показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега <INPUT>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».

Пример 7.4. Кнопка для очистки формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Кнопка</title>

 </head>
 <body>
   <form action="handler.php">
    <p><input type="text" value="Введите текст"></p>

    <p><input type="submit" value="Отправить"><input type="reset" value="Очистить"></p>
  </form>

 </body>
</html>

Значение кнопки RESET никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать параметр value, на кнопке по умолчанию будет добавлен текст «Сброс» или «Reset».

Copyright 2007—2008 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное