Отправляет 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
31
Автор
ImHoster.net

Статистика

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

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


Номер: 43

Дата: 2008-12-24

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

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

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

Справочник по CSS

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

Добрый день.

Вначале текст на правах рекламы.

Кстати, в процессе создания сайта, а именно, в момент его публикации в Интернете приходится сталкиваться сразу с двумя моментами: регистрация домена и выбор хостинга.

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

Лучшим выбором кто делает и то и другое, по-моему, может быть регистратор доменных имен http://reg.ru. Они же предоставляют профессиональный хостинг на странице http://reg.ru/hosting

Почему именно они? Да просто такого количества различных удобств и «фишечек» вряд ли удастся найти где-то еще. Оцените, например «Регистрация по SMS». Ну, как вам?

А еще: регистрация доменов более чем в 50-ти зонах мира, возможность регистрации по партнерским ценам от 85 рублей, хостинг под почту или сайт в лучшем дата центре России, скидки на любые услуги 25% при оплате электронными деньгами!

Это еще далеко не все. На официальном сайте вы найдете еще 100 различных преимуществ. Учтите, важно сделать правильный выбор регистратора и хостинга компании, потому что с ними предстоит сотрудничество в несколько лет.

Продолжаем тему об HTML-формах.

Формы. Поле с изображением

Поле с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром action тега <FORM>.

Изображение в форме создается следующим образом.

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

Параметры перечислены в табл. 12.1.
Табл. 12.1. Параметры поля с изображением
Параметр Описание
align Определяет выравнивание изображения.
alt Альтернативный текст для кнопки с изображением.
border Толщина рамки вокруг изображения в пикселах.
name Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы.

Хотя по своему назначению указанное поле похоже на кнопку SUBMIT, его параметры совпадают с параметрами тега <IMG>, который добавляет изображение на веб-страницу.

В примере 12.1 показано использование поля с изображением.

Пример 12.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><input type="text" size="35">
   <input type="image" src="/images/imgbutton.gif" alt="Отправить форму на сервер"></p>

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

Результат данного примера показан на рис. 12.1.

Рис. 12.1

Рис. 12.1. Форма с графической формой

Перед использованием указанного поля требуется подготовить изображение в графическом редакторе.

Формы. Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле. Такой элемент формы отображается как текстовое поле, рядом с которой располагается кнопка Обзор. При нажатии на эту кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.

Синтаксис поля для отправки файла следующий.

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

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

Создание поля для отправки файла показано в примере 13.1.

Пример 13.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 enctype="multipart/form-data" method="post">
   <p><b>Укажите файл для отправки на сервер:</b>

   <input type="file" size="30"></p>
   <p><input type="submit" value="Отправить"></p>

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

Результат данного примера показан ниже.

Укажите файл для отправки на сервер:

Параметр формы enctype со значением multipart/form-data нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу.

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

Переход между полями формы с помощью табуляции

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

Замечание

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

Следующие поля формы (теги) могут иметь параметр tabindex: <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>. В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере 14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз.

Пример 14.1. Использование параметра tabindex

<!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 name="bio" method="POST" action="handler.php">

  <table width="100%" cellspacing="0" cellpadding="4">
   <tr valign="top"> 
    <td >
     Ваше имя:<br> <input name="name" type="text" tabindex="1" size="30">

    </td>
    <td>
     Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30"> 
    </td>

   </tr>
   <tr valign="top">
    <td>
     Телефон:<br>
     <input name="tel" type="text" tabindex="2" size="30"> 
    </td>

    <td>
     Пол:<br>
     <select name="gender" tabindex="4">
      <option selected>Мужской</option>

      <option>Женский</option>
      <option>Гермафродит</option>
     </select></td>
   </tr>

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