Перевірка інформації, введеної у форму
Форми широко використовують при створенні HTML-сторінок. Інформацію, введену у форму, часто посилають на сервер або відправляють електронною поштою. Перед цим бажано переконатися, що введена інформація коректна. Це легко зробити з допомогою мови JavaScript.
Розглянемо HTML-сторінку з двома елементами для введення тексту. В один потрібно вписати власне ім'я, в інший — адресу для електронної пошти. Натисніть клавішу, нічого попередньо не ввівши у форму. Натисніть також клавішу після введення інформації.
Щодо імені Ви будете отримувати запрошення заповнити форму, якщо туди нічого не буде введено. Але проглядач не заперечуватиме проти чисел в імені. Наприклад, після введення «2012» і натискання відповідної кнопки «Перевірка» Ви отримаєте повідомлення «Здоровенькі були, 2012! Форму заповнено!» Така перевірка неідеальна.
Щодо адреси електронної пошти Ви будете отримувати запрошення правильно заповнити форму, поки у введеній послідовності символів не буде символу @. У глобальній мережі кожна адреса електронної пошти містить символ @, тому така перевірка доречна.
Код має такий вигляд:
<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-пошти!");
else alert("Все гаразд!");
}
// --></script></head>
<body>
<form name="first">
Введіть Ваше ім'я:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Перевірка" onClick="test1(this.form)"><BR><BR>
Введіть Вашу адресу e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Перевірка" onClick="test2(this.form)">
</form>
</body></html>
Розгляне спочатку HTML-код разділу body. Тут лише створено два елементи для введення тексту і две кнопки. Останні викликають функції test1() або test2() залежно від того, яку з них натиснуто. Аргументом функції в обох випадках визначено this.form, що дозволить звертатися в самій функції саме до тих елементів, що потрібно.
Функція test1(form) перевіряє лише, чи є введений рядок порожнім (див. if (form.text1.value == "") ...) . Тут form — змінна, куди заносено величину, отриману при виклиці функції this.form. Можна отримати введений рядок, якщо до form.text1 дописати .value. Щоб пересвідчитися у тому, що рядок непорожній, його порівнюють з порожнім. Збіг тлумачать як те, що нічого не було введено. У цьому випадку користувач отримує запрошеннння: «Будь-ласка, введіть ім'я!» Інакше отримає привітання з повідомленням, що форму заповнено.
Розглянемо тепер функцію test2(form). Тут також порівнюють введений рядок з порожнім. Але є істотне доповнення: логічне «або», записане такими двома символами ||. Таким чином, вказівка if перевіряє, чи справджується хоча б одне з подальших двох висловлювань. Якщо рядок порожній або не містить @, буде отримано повідомлення: «Це не адреса для e-пошти!»
Перевірка на наявність певних символів
Інколи потрібно обмежити інформацію, що вводять у форму, певною множиною символів. Наприклад, при ввведенні номерів телефонів достатньо обмежитися цифрами це можна зробити таким чином:
<html><head><script language="JavaScript"><!-- hide
function test(input)
{
if (input.length == 0) alert("Порожній рядок!")
else { var s = "0123456789";
var k = 0;
for (var i = 0; i < input.length; i++)
for (var j = 0; j < s.length; j++) if (s[j] == input[i]) k++;
if (k == input.length) alert("Гаразд!")
else alert("Негаразд!");
}
} // -->
</script></head>
<body>
<form>Телефон:
<input type="text" name="telephone" value="">
<input type="button" value="Перевірка" name="button" onClick="test(this.form.telephone.value)">
</form></body></html>
Подання інформації, введеної у форму
Для відстеження сервером внесених у форму даних потрібно використовувати інтерфейс CGI (Common Gateway Interface). Останнє дає можливість автоматично опрацьовувати дані. Например, при роботі пошукових систем. Зазвичай вони подають форму, яка дає можливість створювати запит для пошуку у власній базі даних. Користувач отримує відповідь майже одразу після натискання відповідної кнопки. Ему не потрібно чекати, пока відповідальні за роботу сервера прочитають вказані ним дані, знайдуть і надішлють потрібну інформацію. Все це автоматично здійснює сам сервер. Власне JavaScript не дає можливість це зробити. З допомогою JavaScript неможливо створити книгу відгуків, бо JavaScript не має можливості записувати дані у файл на сервері. Це можна робити лише через інтерфейс CGI. Якщо Ви таки бажаєте створити создать книгу відгуків, які користувачі надсилатимуть електронною поштою, Вам доведеться заносити відгуки самотужки.
Відповідний код буде простим текстом HTML без програмування мовою JavaScript.
<form method=post action="mailto:kievoit@yandex.ru" enctype="text/plain">
Вам подобається ця сторінка?<br>
<input name="choice" type="radio" value="1">Так.<br>
<input name="choice" type="radio" value="2">Ні.<br>
<input name="choice" type="radio" value="3" CHECKED>Не певен.<br>
<input name="submit" type="submit" value="Надіслати">
</form>
Параметр enctype="text/plain" використано для того, щоб пересилати саме звичайний текст без будь-яких закодованих часнин. Це спрощує читання такої пошти. Для перевірки форми перед відсиланням тексту можна скористатися програмою опрацювання подій onSubmit. Достатньо розташувати виклик цієї програми в тег <form>.
Виділення певного елемента форми
З допомогою методу focus() можна встановити курсор на відповідний елемент форми. З допомогою методу select() можна виділити текст, набраний у поле форми. Проілюструємо це прикладом такої форми:
<form> <input type="text" name="text1" value="Потрібно виділити"> <input type="button" value="Виділення при натисканні" onClick="this.form.text1.focus();this.form.text1.select();"> </form>