Як зробити html форму
Щоб організувати взаємодію сайта з відвідувачем в його сторінках треба передбачити можливості для введення інформації і відправки її на сервер. Для цього в мові опису веб-сторінок HTML (HyperText Markup Language - «мова розмітки гіпертексту») передбачений спеціальний набір тегів. Що це за теги і як, користуючись ними створити в сторінці вебформу для заповнення відвідувачем?
Вам знадобиться
- Базове знання мови HTML
Інструкція
1
HTML-теги, які повідомляють браузеру, що в цьому місці сторінки необхідно відобразити форму і її елементи, розміщуються в коді між відкриває тегом lt; .formgt; і закриває lt; ./ formgt ;. Хто відкриває тег повинен містити обов`язкову інформацію - атрибути, повідомляють куди саме треба відправити інформацію з форми і яким методом потрібно це зробити. Крім того, якщо сторінка містить більше однієї форми, то кожна повинна мати власне ім`я. З урахуванням всього цього відкриває тег може виглядати так:
2
Після відкриваючого тега форми нам слід розмістити елементи форми, які більше підходять для введення користувачем потрібного типу даних. Такими елементами можуть бути: Текстове поле введення:Тут, як і у всіх інших тегах "input", атрибут "type" задає тип елемента, "name" - ім`я змінної, яке буде відправлено разом з введеними в це поле даними, а "value" - це значення за замовчуванням, яким буде заповнене тестове поле введення. --Поле Введення пароля:--Поле для «мітки з галочкою»:Тут наявність атрибута "checked" означає, що за замовчуванням галочка там буде стояти .-- Група перемикачів, з яких потрібно вибрати тільки один:
Зверніть увагу - у всіх елементів групи має бути однакове ім`я (name), але різні значення (value). На сервер буде передано тільки одне значення - то, яке відзначить відвідувач або те, що було вибрано за замовчуванням (атрибутом checked) .-- Список, що випадає:Тут кожен тег "option" - рядок в списку, що випадає. Як і для групи перемикачів на сервер буде передано тільки одне значення з поля, вибраного відвідувачем, або обраного за замовчуванням (тут - атрибутом selected) .-- багаторядкова текстове поле:Атрибути "cols" і "rows" задають ширину (в знаках) і висоту (в рядках) поля для введення тексту .-- Приховане поле:Це поле не буде видно заповнює форму, але теж буде відправлено разом з іншими даними .-- Поле вибору файлу для відправки:Відправлення файлу вимагає, щоб в відкриває форму тезі були додаткові атрибути. Як мінімум, слід додати тег "enctype". Наприклад, так:і для відправки заповненої форми на сервер:Значення, вказане в атрибуті "value" для кнопок - це напис на самій кнопці.
Зверніть увагу - у всіх елементів групи має бути однакове ім`я (name), але різні значення (value). На сервер буде передано тільки одне значення - то, яке відзначить відвідувач або те, що було вибрано за замовчуванням (атрибутом checked) .-- Список, що випадає:Тут кожен тег "option" - рядок в списку, що випадає. Як і для групи перемикачів на сервер буде передано тільки одне значення з поля, вибраного відвідувачем, або обраного за замовчуванням (тут - атрибутом selected) .-- багаторядкова текстове поле:Атрибути "cols" і "rows" задають ширину (в знаках) і висоту (в рядках) поля для введення тексту .-- Приховане поле:Це поле не буде видно заповнює форму, але теж буде відправлено разом з іншими даними .-- Поле вибору файлу для відправки:Відправлення файлу вимагає, щоб в відкриває форму тезі були додаткові атрибути. Як мінімум, слід додати тег "enctype". Наприклад, так:і для відправки заповненої форми на сервер:Значення, вказане в атрибуті "value" для кнопок - це напис на самій кнопці.
3
У найпростішому варіанті html-код веб-форми в зборі може бути таким:Виглядати в браузері він буде так:
Статті за темою "Як зробити html форму"
Оцініть, будь ласка статтю
