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

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

Доменное имя
на самом деле выбрать домен для своего сайта, не такая простая задача как кажется на первый взгляд.

Хостинг сайтов
от выбора хорошего хостинга зависит «светлое» будущее созданного тобой сайта.

Основы HTML
язык html это основа Интернета, без этих знаний популярный сайт не сделаешь.

Свойства CSS
с применением стилевых таблиц значительно проще разрабатывать web-страницы и управлять сайтом.

Оптимизация
необходимые меры, предпринимаемые вебмастерами, для поднятия сайта на более высокие позиции.

Продвижение
продвигать сайт самостоятельно, без использования специальных сервисов, далеко непростая задача, но при правильном и грамотном подходе вполне выполнимая.

Поисковые системы
принцип работы поисковых систем, алгоритмы, факторы ранжирования.

Интересные статьи
здесь каждый найдёт для себя интересные статьи и ответы на вопросы связанные с созданием сайта.

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Формы в HTML


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

Для отправки формы на сервер используется кнопка SUBMIT, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда html форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки - Perl, PHP, С.

Содержание:

Для указания браузеру, где начинается и заканчивается html форма, используется тег FORM. Между открывающим и закрывающим тегами < FORM> и < /FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. В документе допускается наличие любого количества форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине формы не должны быть вложены одна в другую.

<form action=mail.php>
  В какой версии HTML появился элемент canvas?
<input type=radio name=answer value=а1>XHTML Basic 1.1
<input type=radio name=answer value=a2>HTML 4.01 Transitional
<input type=radio name=answer value=аЗ>HTML 5
<input type=submit value="Проверить">
</form>

Атрибуты тега FORM приведены ниже:

  • action - указывает обработчика, к которому обращаются данные формы при их отправке на сервер, в качестве обработчика может выступать CGI-программа или HTML-документ, а так же можно указать адрес электронной почты, начиная его с ключевого слова maiito.
  • enctype - устанавливает тип для данных, отправляемых вместе с формой.
  • method - этот параметр сообщает серверу о цели запроса, используют два основных метода: GET и POST:
    • get - этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке.
    • post - посылает на сервер данные в запросе браузера, что позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб.
  • target - после обработки формы данные возвращаются в виде html-документа, а с помощью этого атрибута можно определить окно, в которое будет загружаться итоговая веб-страница. Имя окна задаётся параметром NAME.
    • _blank - загружается в новом окне браузера;
    • _self - загружает страницу, возвращаемую обработчиком формы в текущее окно;
    • _parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;
    • _top - отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера, в противном случае этот параметр работает как _self.

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

Текстовое поле предназначено для ввода символов с клавиатуры. Различают три элемента формы, которые используются для этой цели, - однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле:

  • Однострочное текстовое поле - такое поле предназначено для ввода пользователем строки текста. Размер поля можно ограничить по ширине, но это делается больше для удобства дизайна, чтобы элемент можно было вместить в отведенное для него место. Текст при ограничении ширины поля можно писать как обычно, но при наборе введенные ранее символы скрываются.

    • maxlength - максимальное количество символов, разрешенных при наборе текста, если этот параметр опустить, то число вводимых символов неограничено.
    • name - имя поля, предназначено для того, чтобы обработчик формы мог идентифицировать поле.
    • size - ширина поля, физический размер зависит от настроек операционной системы и выбранного браузера.
    • value - начальный текст, содержащийся в поле.

Пример использования текстового поля приведен ниже:

<form action=mail.php>
  Введите имя:
<input type=text maxlength=25 size=20>
<input type=submit value=OK>
</form>

В браузере этот код будет выглядеть вот так:

Введите имя:

Ширина текстового поля - величина нестабильная и в разных браузерах может меняться в небольших пределах. Для html формы, которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. В этом случае лучше вообще отказаться от использования параметра size и заменить его стилями. К тому же CSS позволяет изменять цвет фона (background), тип шрифта (font) и рамки вокруг поля (border).

С применением стилей может выглядеть, примерно так:

Введите имя:
  • Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором отображается звездочками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Параметры поля для пароля аналогичны параметрам текстового поля. Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить права доступа.
<form action=mail.php>
Логин: <input type=text maxlength=25 size=20 name=text>
Пароль: <input type=password maxlength=15 size=20 name=pass>
<input type=submit value=OK>
</form>

Посмотрим, что получилось, в браузере:

Логин:    Пароль:
  • Многострочное текстовое поле - для создания области, в которую можно вводить несколько строк текста, предназначен тег TEXTAREA. В отличие от тега INPUT, в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Параметры поля отличаются от однострочного варианта и перечислены ниже:

    • cols - ширина текстового поля, которая определяется числом символов моноширинного шрифта.
    • disablet - блокирует доступ и изменение текстового поля. В таком случае оно отображается серым цветом и недоступным для активации пользователем.
    • name - определяет уникальное имя элемента TEXTAREA. Как правило, это имя применяется при отправке данных на сервер или для доступа к полю через скрипты. В качестве имени используется набор символов, включая числа и буквы.
    • readonly - когда к тегу TEXTAREA добавляется этот параметр, текстовое поле недоступно для изменения пользователем, в том числе в него не допускается вводить новый текст или модифицировать существующий.
    • rows - высота текстового поля, которая определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
    • wrap - параметр говорит браузеру о том, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, а когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки.

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

<form action=mail.php>
Введите имя:
<input type=text maxlength=25 size=20>
Введите ваш отзыв:
<textarea rows=5 cols=40></textarea>
<input type=submit value="Отправить">
</form>

В браузере увидим:

Введите имя:


Введите ваш отзыв:


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

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

Вначале готовим необходимое изображение, а затем добавляем его к тегу INPUT в виде фона, используя атрибут background. Исходный рисунок можно уменьшить в графическом редакторе или, наоборот, увеличить высоту поля, подгоняя его под высоту изображения. С этой целью применяется свойство height. В качестве аргумента параметра background необходимо использовать no-repeat, тогда рисунок будет отображаться только один раз и не станет повторяться, как это задано для фона по умолчанию. Чтобы не писать текст поверх рисунка, к стилю тега INPUT следует добавить атрибут padding-left. Он обеспечивает набор текста правее рисунка, а его значение зависит от ширины изображения.

Примерно так:

Логин: Пароль:

Из-за того, что текстовое поле изображается утопленным за счет трехмерной рамки, реальная высота области несколько меньше указанной высоты. Так, в данном примере используются рисунки высотой 34px, если установить такое же значение и для поля, то изображения окажутся обрезанными снизу. Чтобы этого не произошло, высота поля в примере задана больше. С той же целью можно установить другой вид рамки, используя стилевое свойство border.

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

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

Основных параметров всего два - это name и value. Атрибут name задает имя кнопки и предназначен для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в таком случае значение кнопки не передается на сервер. Значение кнопки и надпись на ней одновременно устанавливаются с помощью параметра value.

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

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

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

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

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

<button>Кнопка с текстом</button>
<button><img src=image/post.jpg width=25 height=34 align=absmiddle>Отправить</button>

Вот, что получилось:

  • Кнопка SUBMIT - предназначена для отправки данных на сервер. Её вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега FORM. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде html-документа. Что именно делает обработчик, зависит от автора сайта; так, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.
<form action=mail.php method=get>
<input type=submit>
</form>

Браузер отобразит:

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

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

<form action=mail.php method=get>
<input type=text value="Введите текст">
<input type=submit value="Отправить">
<input type=reset value="Очистить">
</form>

Посмотрим код html формы в отображении браузера:

  • Цветные кнопки - Вид и цвет кнопок зависит от операционной системы и браузера. Тем не менее можно изменить цвет кнопок по своему усмотрению, воспользовавшись стилями. Для этого требуется только добавить к кнопке атрибут background. Дополнительно можно поменять параметры шрифта, в частности цвет текста. Кроме однотонного цвета на кнопке можно использовать и фоновый рисунок, можно сделать заливку кнопки градиентом, да всё что угодно, насколько хватит фантазии...

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

<input type=radio name=имя, параметры>

У этого поля три основных параметра: name, value и checked:

  • name - однозначно идентифицирует поле, вдобавок, поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. Такой подход однозначно устанавливает принадлежность поля к определенной группе.
  • value - задает, какое значение будет отправлено на сервер. Здесь каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
  • checked - применяется для предварительного выделения пункта списка.

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

<form action=mail.php>
Сколко будет 2+2?
<input name=summa type=radio>3
<input name=summa type=radio>4
<input name=summa type=radio>Тьма
<input type=submit value="Выбрать">
</form>

В браузере форма будет иметь вид:

Сколко будет 2+2?
3
4
Тьма

Флажки (checkbox) используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбрать лишь один вариант, то для этого следует предпочесть переключатели (radiobutton).

Параметры флажков идентичны переключателям, а именно: name задает имя поля, value - его значение, a checked устанавливает флажок как помеченный. При этом каждый флажок, входящий в группу, рассматривается как независимый, поэтому имена и значения у них должны различаться.

<form action=mail.php>
C какими операционными системами вы знакомы?
<input class=col type=checkbox name=option1 value=a1 checked>Windows 95/98
<input class=col type=checkbox name=option2 value=a2>Windows 2000
<input class=col type=checkbox name=option3 value=a3>System X
<input class=col type=checkbox name=option4 value=a4>Linux
<input class=col type=checkbox name=option5 value=a5>X3-DOS
<input type=submit value="Выбрать">
</form>

Браузер отобразит:

C какими операционными системами вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS

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

<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>

Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тегаSELECT, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге OPTION, а также может изменяться с помощью стилей. Каждый пункт создается через тег OPTION, который должен быть вложен в контейнер SELECT. Если планируется отправлять данные списка на сервер, то следует поместить элемент SELECT внутрь формы.

Рассмотрим параметры тега SELECT, с помощью которых можно изменять вид и представление списка:

  • multiple - наличие параметра multiple дает команду браузеру отображать содержимое элемента SELECT как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов; если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1, список превращается в "крутилку", но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.
  • name - определяет уникальное имя элемента SELECT. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
  • size - задаёт высоту списка. Если значение параметра size=1, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу SELECT при size=1 список отображается как "крутилка". Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, значение параметра size=1.

Тег OPTION также имеет параметры, влияющие на вид списка, они представлены далее:

  • selected - делает текущий пункт списка выделенным. Если у тега SELECT добавлен параметр multiple, то можно выделять более одного пункта.
  • value - определяет значение пункта списка, которое будет отправлено на сервер.
<form action=mail.php>
Выбери цвет:
<select name=color>
<option value=s1>Красный
<option value=s2 selected>Синий
<option value=s3>Зелёный
<option value=s4>Жёлтый
</select>
<input type=submit value="Выбрать">
</form>

Что получилось:

Выбери цвет:

Для того чтобы можно было отправить на сервер файл, используется специальное поле, которое задается параметром type=fiie тега INPUT. Такой элемент формы отображается как текстовое поле, рядом с которым располагается кнопка Обзор (Browse). При нажатии на эту кнопку открывается окно для выбора файла, в котором пользователь может указать нужный файл. Код для создания поля для отправки файла показан ниже:

<form enctype="multipart/form-data" method=post>
Выбрать файл:
<input type=file size=30>
</form>

Параметр формы enctype="multipart/form-data" нужен для корректной передачи файла. Если его не указать, то будет передан лишь путь к файлу. Дополнительные параметры те же, что и для текстового поля. Поскольку графические файлы занимают относительно большой объем данных, их следует отправлять на сервер с помощью method=post, как показано в данном примере.

Выбрать файл:

Ниже приведён пример реально работающей формы обратной связи с PHP обработчиком, применённой на моём сайте:

HTML - код формы:

<form method="post" action="mail.php">
Имя:
<input type="text" class="style" name="name" size="30"/>
Е-mail:
<input name="email" type="text" class="style" size="30"/>
Сообщение:
<textarea name="mess" class="style" rows="8" cols="45"></textarea>
<input type="submit" value="Отправить сообщение"/> </form>

Подключаем PHP обработчик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма обратной связи</title>
</head>
<body>
<?php
if (isset($_POST['name'])) {$name = $_POST['name'];}
if (isset($_POST['email'])) {$email = $_POST['email'];}
if (isset($_POST['mess'])) {$mess = $_POST['mess'];}
if (empty($name))
{
echo "Не указано имя!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($email))
{
echo "Не указан e-mail!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
if (empty($mess))
{
echo "Сообщение не написано!";
echo "<a href=URL страницы на которой находится форма>Вернуться к заполнению формы</a>";
exit;
}
$to = "Адрес электронной почты, на который отправляются сообщения</a>";
$headers = "Content-type: text/plain; charset = windows-1251";
$subject = "Сообщение с вашего сайта";
$message = "Имя пославшего: $name \nЭлектронный адрес: $email \nСообщение: $mess";
$send = mail ($to, $subject, $message, $headers);
if ($send == 'true')
{
echo "Спасибо за отправку вашего сообщения!";
echo "<a href=index.html>Нажмите, чтобы вернуться на главную страницу";
}
else
{
echo "

Ошибка. Сообщение не отправлено!";
}
?>
</body>
</html>

Те данные, которые выделены красным, необходимо заменить на свои. Сохраняем файл как mail.php в корне сайта.

Добавляем CSS стили:

.style {
font:normal 12pt verdana;
border:solid 1px #808080;
color:#8A2BE2;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

Смотрим пример получившейся формы обратной связи, форма реально работает, комментируем, делимся мыслями.

Имя:

E-mail:

Сайт:



Введите два любых ненулевых числа и их сумму:
+ =

Клуб Миллион

Мультимедиа / К оглавлению / Таблицы в HTML

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

Удачи!


Как заработать на своём сайте
только лучшие и проверенные способы.

Как создать сайт для заработка
два самых денежных варианта.

Как заработать в интернете новичку
для тех кто ищет дополнительный заработок.

Партнерские программы
лучшие партнёрки для заработка в сети.

Сервисы для вебмастера
сделать и продвинуть свой собственный сайт будет намного проще если использовать специально предназначенные для этого онлайн сервисы.

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

Transitions и Animations CSS3
как придать индивидуальность веб-странице, используя переходы и анимацию CSS3.
Canvas HTML 5
отличные возможности для создания по настоящему интерактивных веб-приложений.

Полезные книги
книги по созданию, продвижению, поисковой оптимизации сайтов.

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.

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

Рынок Forex
это внебиржевой валютный рынок, участниками которого могут быть как крупные инвесторы, компании, так и рядовые жители любого уголка нашей планеты, имеющие доступ в интернет.