Введення даних користувачем у форми HTML
Одне з основних відмінностей нової версії HTML (4.0) від попередніх полягає в тому, що тепер веб-сторінка може відстежувати дії користувача і реагувати на них, змінюючи свій вигляд. У цьому розділі ми розглянемо кілька прикладів такої реакції. Однак спочатку давайте розглянемо класичний спосіб взаємодії з користувачем, що з'явився ще в попередніх версіях мови.
Цей спосіб полягає в побудові так званих форм. Він полягає в тому, що на веб-сторінку виводиться, наприклад, кілька текстових полів, куди користувач може ввести який-небудь текст, а потім за допомогою спеціальної кнопки відправити його серверу. Замість введення тексту користувачеві може бути запропоновано вибрати кілька пунктів із заготовленого списку або відзначити прапорцями потрібні пункти і т. П. Така взаємодія з користувачем вельми умовно - адже інформація, яку він ввів і відправив, все одно обробляється на стороні сервера.
Отримання інформації від користувача
Як приклад давайте розглянемо сторінку для відгуків клієнтів про послуги гіпотетичної фірми "Ледар". Це, звичайно, буде не зовсім те, що зазвичай мається на увазі під книгою відгуків на сайті. Просто ми надамо користувачеві можливість ввести інформацію і відправити її на сервер (як вже вона буде там оброблятися, ми зараз розглядати не будемо).
Отже, візьмемо заголовок і праву частину веб-сторінки. Тільки додамо посилання на сторінку "Послуги" і знімемо її з "Книги відгуків":
В кінці форми повинен стояти закриває тег . Все, що знаходиться всередині, можна буде повідомити сервер. Для відправки даних форми традиційно використовується кнопка з назвою Submit (Надіслати). Для її створення можна використовувати тег з атрибутом TYPE = "submit":
Атрибут VALUE = при цьому визначає напис на кнопці. Якщо його не поставити, то на кнопці буде написано Submit. Які ж дані будуть відправлені? Для початку давайте запитаємо у користувача його ім'я, виділивши для цього невелику однорядкове текстове поле, і думка про послуги фірми, для чого виділимо многострочное текстове поле.
Поля для введення тексту
Щоб створити однорядкове текстове поле, потрібно також скористатися тегом , але вже з атрибутом TYPE = "text". При цьому його ширина задається за допомогою атрибута SIZE =. Щоб програмі обробки даних (або людині, яка буде в цих даних розбиратися) було зрозуміло, які дані до якого полю відносяться, бажано для кожного поля вказати атрибут NAME =. В даному випадку ми запитуємо у користувача його ім'я, тому нехай значенням цього атрибуту буде слово Ім'я (по-англійськи теж Name):
При цьому атрибут VALUE = визначає, що буде спочатку написано в текстовому полі. Зверніть увагу на те, що атрибут SIZE = визначає тільки видиму ширину текстового поля, але зовсім не обмежує кількість вводяться користувачем символів. Якщо ж треба ввести таке обмеження, то слід користуватися атрибутом MAXLENGTH =.
- Добре, - скажете ви, - але як користувач дізнається, що від нього вимагається ввести в це поле?
Щоб дати йому "підказку", можна просто написати її текст перед текстовим полем:
Ваше ім'я: