Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
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


Чувашия-это моя Россия

Ссылки на JavaScript - form.

Определение и использование. Объект форма < form> представляет собой HTML форму. Для каждого тега < form> в HTML документе создается объект Форма. Формы используются для получения пользовательского ввода, и содержат элементы ввода, как текстовые поля, флажки, радио-кнопки, кнопки отправки и многое другое. Форма может также содержать меню, текстовое поле, Fieldset, легенду и элементы маркировки. Формы используются для передачи данных на сервер.

Объект форма очень популярен настоящее время, точнее очень востребован и необходим для создания интерактивного интернет маркетинга и много чего другого. Важно, чтобы данные, ведённые пользователем были корректными( правильными по сути и написанию). И чтобы форма была отправлена с верными данными необходимо все данные в форме верифицировать, то есть проверить.

Информация, введенная в форму < form>, посылается обратно на сервер либо отправляется по электронной почте на необходимый адрес. Весь фокус в том, что введеная пользователем в форму информация корректна ли? Как об этом узнать?

Относительно просто и быстро проверить содержание формы перед пересылкой в Глобальную Сеть-Интернет можно с помощью языка JavaScript.

Создадим необходимые коды языка JavaScript - скрипты для простой проверки валидности( правильности) тега формы. Пусть HTML-страница содержит два элемента для ввода текста. В первый тег пользователь должен вписать свое имя, во второй тег написать адрес электронной почты. Вы можете ввести туда какую-нибудь информацию и нажать клавишу. Попробуйте также нажать клавишу, не введя в форму никакой информации.

При вводе информации в первый элемент Вы будете получать сообщение об ошибке, если ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности( точного написания). Хотя, это не гарантирует, что пользователь введет не то имя. Браузер не будет возражать против чисел. Когда Вы ввведете '13', то получите приглашение 'Привет, 13!'. Так что данная проверка не совсем полная.

Второй элемент формы более сложно для проверки. Введите простую строку - Ваше имя. Сделать это не удастся до тех пор, пока Вы не укажите @ в Вашем имени. Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @( собачки). Такому условию отвечает и одиночный символ @, даже несмотря на то, что это бессмысленно. В Глобальной Сети-Интернет каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна:


< html>
< head>
< script language="JavaScript">

function test1(form) {
  if (form.text1.value == "")
    alert("Пожалуйста, введите строку!")
  else { 
   alert("Привет, "+form.text1.value+"! Форма заполнена корректно!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Неверно введен адрес e-mail!");
  else alert("OK!");
}

< /script>
< /head>

< body>
< form name="first">
Введите Ваше имя:< br>
< input type="text" name="text1">
< input type="button" name="button1" value="Проверить" onClick="test1(this.form)">

Введите Ваш адрес e-mail:< br>
< input type="text" name="text2">
< input type="button" name="button2" value="Проверить" onClick="test2(this.form)">
< /body>
< /html>

Введите Ваше имя:

Введите Ваш адрес e-mail:

Рассмотрим сначала HTML-код в разделе body. Тут создаем два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям передаем комбинацию this.form. Такая комбинация позволит адресоваться в самой функции именно к тем элементам, которые потребуются.

Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, сравниваем строку с " ". Когда окажется, что введенная строка соответствует " ", тогда ясно, что на самом деле ничего введено не было. И пользователь получит сообщение об ошибке. Когда что-то было введено верно, пользователь получит подтверждение - ok.

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

Рассмотрим функцию test2(form). Тут вновь сравнивается введенная строка с пустой стокой - " "( чтобы удостовериться - что-то действительно было введено посетителем). К команде if добавили комбинацию символов || - оператор OR( ИЛИ). Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, и будет выполняться следующая команда скрипта. Выдает сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @( второй оператор в команде if следит за тем, чтобы введенная строка содержала @).

Проверка на присутствие определенных символов. В некоторых случаях Вам понадобится ограничивать информацию, вводимую в форму, лишь некоторым набором символов или чисел. Например, телефонные номера - представленная информация должна содержать лишь цифры. То есть необходимо проверять, являются ли введенные данные числом. Сложность ситуации состоит в том, что большинство людей вставляют в номер телефона еще и разные символы - например: 01234-56789, 01234/56789 or 01234 56789( с символом пробела внутри). Поэтому должны дополнить скрипт процедурой проверки цифр и некоторых символов:


< html>
< head>
< script language="JavaScript">
function check(input) {
  var ok = true;

  for (var i = 0; i < input.length; i++) {
    var chr = input.charAt(i);
    var found = false;
    for (var j = 1; j < check.length; j++) {
      if (chr == check[j]) found = true;
    }
    if (!found) ok = false;
  }
 
  return ok;
}

function test(input) {

  if (!check(input, "1", "2", "3", "4",
        "5", "6", "7", "8", "9", "0", "/", "-", " ")) {

    alert("Входа нет ok.");
  }
  else {
    alert("Пожалуйста,входите ok!");
  }
}

// -->
< /script>
< /head>

< body>
< form>
Telephone:
< input type="text" name="telephone" value="">
< input type="button" value="Проверить"
  onClick="test(this.form.telephone.value)"> 
< /form>
< /body>
< /html>

Telephone:

Функция test() указывает, какие из введенных символов признаются правильными( корректными).

Какие существуют возможности для передачи информации, внесенной в форму< form>? Самый простой способ состоит в передаче данных формы по электронной почте. Если Вы хотите, чтобы за вносимыми в форму данными следил сервер, то Вы должны использовать интерфейс CGI( Common Gateway Interface). С помощью JavaScript Вы не сможете создать книгу читательских отзывов, поскольку JavaScript лишен возможности записывать данные в какой-либо файл на сервере. Делать это Вы можете только через интерфейс CGI. Соответствующий скрипт будет простым текстом HTML. И никакого программирования на JavaScript здесь вовсе не нужно! Конечно за исключением того случая, если Вам понадобится перед пересылкой проверить данные, занесенные в форму - и здесь уже Вам действительно понадобится JavaScript.


< form method=post action="mailto:varnar56@mail.ru" enctype="text/plain">
Нравится ли Вам эта страница?
< input name="choice" type="radio" value="1">Да< br> < input name="choice" type="radio" value="2" CHECKED>Нравиться< br> < input name="choice" type="radio" value="3">Не совсем< br> < input name="submit" type="submit" value="Отправлять"> < /form>
Нравится ли Вам эта страница?
Да
Нравиться
Не совсем

Параметр enctype="text/plain" используется для того, чтобы пересылать именно простой текст без каких-либо кодируемых частей. Это значительно упрощает чтение такой почты. Если Вы хотите проверить форму прежде, чем она будет передана в сеть, то для этого можете воспользоваться программой обработки событий onSubmit. Вы должны поместить вызов этой программы в тэг:


function validate() {
  // check if input ok
  // ...

  if (inputOK) return true
    else return false;
}

...

< form ... onSubmit="return validate()">< /form>

Форма, составленная таким образом, не будет послана в Интернет, если в нее внесены некорректные данные.

С помощью метода focus() Вы можете сделать форму более дружественной. Вы можете выбрать, который элемент будет выделен в первую очередь. Либо Вы можете приказать браузеру выделить ту форму, куда были введены неверные данные. То есть, что браузер сам установит курсор на указанный Вами элемент формы, так что пользователю не придется щелкать по форме, прежде чем что-либо занести туда:


function setfocus() {
  document.first.text1.focus();
}

Эта запись могла бы выделить первый элемент для ввода текста в скрипте. Вы должны указать имя для всей формы - в данном случае она называется first - и имя одного элемента формы - text1. Если Вы хотите, чтобы при загрузке страницы данный элемент выделялся, то для этого Вы можете дополнить Ваш тэг < body> атрибутом onLoad. Это будет выглядеть как:


< body onLoad="setfocus()">

function setfocus() {
  document.first.text1.focus();
  document.first.text1.select();
}

Форма Объект Коллекции

Коллекция Описание
elements Возвращает коллекцию элементов в форме

Форма Свойств Объекта

Свойство Описание
acceptCharset Устанавливает или возвращает значение accept-charset атрибут в виде
action Устанавливает или возвращает значение атрибута action в форме
enctype Устанавливает или возвращает значение атрибута enctype в форме
length Возвращает число элементов в форме
method Устанавливает или возвращает значение атрибута method в форме
name Устанавливает или возвращает значение атрибута name в форме
target Устанавливает или возвращает значение атрибута target в форме


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: