Створення HTML-форм тег INPUT

Створення HTML-форм: тэг INPUT

Тег застосовується до створення більшості полів форми. Атрибут TYPE цього тега вказує, яке саме поле створюється, а решта атрибутів визначають параметри цього поля. Існують такі типи полів: текстове, поле пароля, прапорець, перемикач, приховане поле і поле файлу. За допомогою тега створюються також кнопки Submit та Reset (Надіслати та Очистити). Нижче ми розглянемо все це докладніше.

Зараз я хочу поговорити про атрибути NAME та VALUE, які є у всіх полів. Коли дані передаються серверу, вони організовуються в пари: ім'я-значення. Атрибут NAME дозволяє вам ідентифікувати (пройменувати) кожне поле у формі. Взагалі кажучи, форма служить щоб зв'язати з кожним полем (ім'ям) деяке значення. Атрибут VALUE дозволяє задати це значення. Сенс цього атрибуту залежить від типу поля.

Поле у вигляді за промовчанням є текстовим. У таке поле можна вводити текст у вигляді одного рядка. При створенні поля ви можете явно вказати його тип, задавши атрибут TYPE у тезі .

За допомогою атрибуту VALUE можна встановити значення поля за промовчанням. Якщо цей атрибут вказано, його значення виводиться у полі до того, як користувач введе туди нове значення.

Атрибути SIZE і MAXLENGTH позначають ширину поля, що відображається, і максимальну кількість символів, яку можна в нього ввести. Ви повинні вказувати розумне значення атрибуту MAXLENGTH, але ви не можете покладатися на його значення у своїх програмах CGI. Відвідувач вашої сторінки може передати дані програмі без використання форми, і ви повинні враховувати це під час програмування. Є кілька способів передати дані програмі, не дотримуючись обмежень, накладених формою. Наприклад, користувач може завантажити форму, модифікувати її тапередати дані. Крім того, він може просто написати програму та передати дані вашій CGI-програмі без допомоги броузера взагалі.

Ось приклад тега, що створює текстове поле:

Ось так виконується цей код:

Поле для введення пароля аналогічне текстовому, за винятком того, що воно маскує введення користувача так, що сторонній не може побачити пароль, підглядаючи через ваше плече. Але потрібно мати на увазі, що дані в цьому полі не кодуються при передачі броузеру.

Все-таки це поле має дві важливі властивості. По-перше, воно оберігає ваш пароль від загального огляду і, по-друге, візуально повідомляє користувачеві, що він вводить пароль.

Ви можете створити поля для введення пароля, вказавши в атрибуті TYPE значення password. Інші атрибути задаються так само, як і для звичайного текстового поля. Ось приклад коду і відразу зразок його виконання:

password "NAME=" password " size="10" maxlength="10">

Прапорець служить для двійкового вибору - він або встановлений або скинутий. Коли користувач клацає на прапорці, його значення змінюється протилежне. Якщо прапорець було встановлено, він скидається, і навпаки. Якщо прапорець встановлений в момент передачі даних формі, його пара ім'я-значення передається серверу, якщо він був скинутий, сервер нічого не передається.

Щоб створити прапорець, необхідно задати атрибуту TYPE значення checkbox . Атрибуту VALUE необхідно надати деяке значення, інакше ви не зможете перевірити стан цього прапорця, оскільки буде недостатньо даних для формування пари ім'я-значення. Будь-яке значення ви присвоєна атрибуту VALUE, це просто умовне значення, яке можна перевірити в CGI-програмі. Зазвичай його задаючияк yes чи no.

У прапорця може бути ще один атрибут - CHECKED. Він не має значення, просто якщо його встановлено, прапорець при відкритті сторінки буде встановлений, якщо не вказаний - прапорець буде скинутий. Ось приклад коду і відразу зразок його виконання:

Ваші інтереси: checkbox " NAME="books" value="yes">Книги checkbox " NAME="music" value="yes">Музика

Перемикач призначений для вибору кількох можливих відповідей. Коли ви вибираєте один із варіантів, то обраний раніше скидається. Англійською перемикач називається radio button, тобто. радіокнопка (за аналогією зі старими автомобільними приймачами, у яких при натисканні кнопки деякої радіостанції раніше натиснута кнопка вискакувала).

Перемикач створюється за допомогою тега , у якому атрибут має значення радіо. Кожен тег створює тільки одну кнопку перемикача, тому якщо вам потрібно створити кілька зв'язкових кнопок, ви повинні кілька разів застосувати тег і щоразу атрибуту NAME давати те саме ім'я.

Як і у випадку з прапорцями, кнопку перемикача можна вибрати заздалегідь за допомогою атрибуту CHECKED . Якщо в одній групі кнопок ви надаєте атрибут CHECKED одразу кільком кнопкам, то при відкритті сторінки буде відзначено лише останню кнопку в групі. Ось приклад коду та зразок його виконання:

Ваш місячний дохід: $100 $250 $500++

Існує такий тип поля, від якого, на перший погляд, немає користі. Приховані поля можуть містити дані, які користувач не може змінити. Більше того, приховане поле взагалі не відображається на сторінці. Однак дані, записані в цьому полі, існують і передаються броузеру з іншими даними. А броузер, у свою чергу, передаєїхньому серверу.

Щоб створити приховане поле, ви повинні вказати атрибут TYPE зі значенням hidden. Крім цього атрибута прихованого поля можуть бути атрибути NAME і VALUE. Створюється приховане поле так:

Зазвичай, приховані поля застосовують на сторінках, згенерованих програмами, якщо програміст хоче передати на сервер деяку інформацію, яку він не хоче показувати користувачеві. Наприклад, замовлення на покупку складається із двох бланків. всі дані, введені в перший бланк, програма поміщає у приховані поля другого бланка і лише після цього передає все на сервер.

Файлові поля призначені для того, щоб користувач міг за допомогою форми передати файл на сервер. Для створення такого поля атрибут типу поля дається значення file. У такому полі користувач може вказати файл на своєму комп'ютері, і при передачі даних цей файл буде відправлений разом з ними. Форма, що має файлові поля, повинна застосовувати метод передачі POST і тип кодування multipart/form-data.

Файлове поле зовні схоже на текстове, в якому записано шлях до файлу, і поруч із пін розташована кнопка (Огляд), клацання по якій розкриває вікно пошуку файлу. Якщо вибір файлу робиться за допомогою вікна, шлях до файлу копіюється в поле.

Ось фрагмент коду, який створює файлове поле:

Кнопка скидання (Reset) призначена для скидання всіх введених користувачем даних. Якщо для деякого поля був вказаний атрибут VALUE, то при натисканні на кнопці скидання в поле заноситься значення цього атрибута. Якщо такий атрибут не було вказано, поле просто очищається. Для створення кнопки скидання атрибута TYPE дається значення reset.

Атрибут VALUE самої кнопки визначає її напис. Ось приклад створення кнопки скидання:

Кнопка передачі (Submit) використовується для передачі данихформи на сервері. Як саме дані передадуть і куди, визначається в тегу при створенні форми. Для створення кнопки передачі атрибуту TYPE надається значення reset.

Атрибут VALUE визначає її напис. Ось приклад створення кнопки передачі: