Щоб організувати взаємодію сайту з відвідувачем у його сторінках треба передбачити можливості для введення інформації та відправки її на сервер. Для цього в мові опису веб-сторінок HTML (HyperText Markup Language - "мова розмітки гіпертексту") передбачено спеціальний набір тегів. Що це за теги і як, користуючись ними створити на сторінці веб-форму для заповнення відвідувачем?
Вам знадобиться
- Базове знання мови HTML
Інструкція
1. HTML-теги, які повідомляють переглядачеві, що в цьому місці сторінки необхідно показати форму та її елементи, розміщуються між відкриваючим тегом < .form > і закриваючим < ./form >. Відкриваючий тег повинен містити обов 'язкову інформацію - атрибути, які повідомляють куди саме треба надіслати інформацію з форми і яким методом потрібно це зробити. Крім того, якщо сторінка містить більше однієї форми, кожна повинна мати власне ім 'я. З урахуванням всього цього відкриваючий тег може виглядати так:< form name = "" thisFormName "" method = "" POST "" action = "" > Тут атрибут "" name "" - назва форми, атрибут "" method "" визначає спосіб відправки даних (можливі методи POST або GET) Якщо адресу не вказувати, дані будуть передані на URL цієї ж самої сторінки. Як правило, такі інтерактивні сторінки формуються універсальними скриптами, які забезпечують і отримання/обробку даних з цієї ж самої сторінки.
2. Після відкриття теґу форми нам слід розмістити елементи форми, які більше підходять для введення користувачем потрібного типу даних. Такими елементами можуть бути:Текстове поле вводу:< input name = "" textField "" type = "" text "" value = "" Це текстове поле ""/> Тут, як і у всіх інших тегах" "input" ", атрибут" "type" "визначає тип елемента," "name" "- ім 'я< input name = "" passField "" type = "" password ""/> --Поле для" мітки з галочкою ":< input name = "" checkBox "" type = "" checkbox "" value = "" 1 "" checked = "" checked ""/> Тут наявність атрибута" "checked" "означає, що за замовчуванням галочка там буде варта. --Група< input name = "" radceBox "" type = "" radio "" value = "" 0 "" checked = "" checked ""/> < input name =" "radceBox" "type =" "radio" "value =" На сервер буде передано лише одне значення - те, яке позначить відвідувач або те, що було обрано за замовчуванням (атрибутом checked) .Випадний список:< select name = "" selectField "" > < option value = "" value1 "" > Поле перше </option > < option value = "" value2 "" selected = "" selected "" &g Як і для групи перемикачів на сервер буде передано лише одне значення з поля, обраного відвідувачем, або обраного за замовчуванням (тут - атрибутом selected) .Многострокове текстове поле:< textarea name = "" textRows "" cols = "" 50 "" rows = "" 5 "" > Тут багатостроковий текст </textarea > Атрибути "" cols "і" rows "" задають ширину (в знаках) і висоту (в строці< input name = "" hiddenField "" type = "" hidden "" value = "" Приховане поле ""/> Це поле не буде видно заповнювальному форму, але теж буде надіслано разом з іншими данними. --Поле вибору файлу для надсилання:< input name = "" fileField "" type = "" file ""/> Надсилання файла вимагає, щоб у відкритому формі теги були додаткові атрибути. Як мінімум, слід додати тег "enctype" ". Наприклад, так:< form name = "" thisFormName "" method = "" POST "" enctype = "" multipart/form-data "" action = "" > --Кромі цього у форму можна помістити кнопки - для очищення введених у форму даних:< input name = "" resetButton "" type = "" reset "" value = "" Очистити ""/> і для надсилання заповненої форми на сервер:< input name = "" submitButton "" type = "" submit "" value = "" Надіслати ""/> Значення, вказане в атрибуті" "value" "для кнопок - це напис на самій кнопці.
3. У найпростішому варіанті html-код веб-форми в зборі може бути таким:< form action = "" name = "" thisFormName "" method = "" POST "" > < input name = "" visitorName "" type = "" text "" value = "" Вкажіть ваше ім 'я ""/