Среда, 13.12.2017, 12:28
Приветствую Вас Гость | RSS

Информационный блог

Создаем форму

  Рассказав на Web-странице о сфере своей деятельности, мы можем предполагать ,что познакомившиеся с этой информацией посетители сайта захотят связаться с компанией. Чтобы ускорить и облегчить им процедуру связи, достаточно поместить на данной странице специальную форму, заполнив которую,посетитель сайта передаст компании информацию, которую он считает нужным послать.
  Подобные формы широко используются на Интернет-сайтах. После заполнения формы пользователем специальная программа-обработчик или, как ее еще называют, скрипт, обрабатывает полученные данные и передает их по назначению.
  Посмотрим как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на странице и автоматически отправить ее по электронной почте нашей компании. Но сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тэгов <p></p>, и выровнять по центру с помощью атрибута aling=center.
     Вставьте пустую строку между закрывающим тэгом </ul> u </body> и введите в этой строке следующий код:
     <p aling=center>Если у вас есть вопросы или предложения, напишите нам:</p>
  Каждая форма начинается тэгом <form> и заканчивается тэгом  </form>. HTML-документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и тэги могут размещаться внутри формы без ограничений. Открывающий тэг<form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик, или адрес сервера, который будет обрабатывать форму. Так как сообщение,посетителя, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action="mailto: komp@narod.ru".
  Еще один атрибут тэга  <form>-method- определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post:method=post. Таким образом, элемент <form>...</form> будет иметь иметь примерно такой вид:
             <form action="mailto: komp@narod.ru" method=post >
             </form>
     Добавьте в документе spisok.html пустую строку перед закрывающим тэгом </body> и введите указанный код, вставив в качестве значения атрибута aktion вместо komp@narod.ru свой адрес электронной почты.
  Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат тэги <textarea></textarea>. В качестве атрибутов открывающего тэга <textarea> необходимо указать количество строк (rows) и колонок (cols), а также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, например:
              <textarea rows=5 cols=40 name=Comments></textarea>
  Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем Comments (Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тэгами <center></center>.
  Вставьте пустую строку перед закрывающим тэгом </form> и введите следующий элемент, создающий текстовое поле:
  <center><textarea rows=5 cols=40 name=Comments></textarea></center>
  Здесь для центрирования текстового поля мы использовали тэги <center></center>, а не атрибут align=center тэга <p>, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и некоторые браузеры, например, Nestcape Communicator, могут игнорировать данный атрибут для поля формы. 
  Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то элемент управления. например, кнопка. Создать такой элемент управления очень легко с помощью одиночного тэга <imput> с атрибутом type. Если нужно создавать кнопку, то значение этого атрибута должно быть submit (передать):  <imput type=submit>
  Такой элемент по умолчанию выведет на странице кнопку с надписью Submit Query (Подача запроса). Чтобы изменить надпись на кнопке, достаточно включить в данный тэг атрибут value с нужным вам значением, например: value="Отправить". Напомним, что значение атрибутов, в которых используются символы, отличные от латинских, следует обязательно заключать в кавычки.
     Вставьте пустую строку перед закрывающим тэгом </form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:
                <p><center><imput type=submit value="Отправить"></center></p>
  В результате элемент <form>...</form> должен принять следующий вид:
                <form action="mailto:komp@narod.ru" method=post>
                <center><textarea rows=5 cols=40 name=Comments></testarea><center>
                <p><center><imput type=submit value="Отправить"></center></P>
                </form>
  Напомним еще раз, что в качестве значения атрибута action в открывающем тэге <form> следует указать ваш адрес электронной почты.
  Работу формы можно проверить.
     Щелкните мышью на текстовом поле ввода в окне браузера. В этом месте появится текстовый курсор.
     Введите в текстовом поле несколько слов.
     Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с предупреждением о том, что форма передаст ваш адрес E-mail получателю.
     Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждением закроется.
  Если бы соединение с Интернетом было установлено, то данные из формы были бы отправлены и через некоторое время вы получили бы их по электронной почте. Но так как соединение не установлено, то, в зависимости от настроек вашей почтовой программы, или появится сообщение о невозможности отправить почту, или данные из формы будут помещены  в папку исходящих сообщений.
Меню сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Все о сетевом бизнесе
  • Copyright MyCorp © 2017