Форми необхідні для того, щоб було можливо отримувати від користувача будь-яку інформацію, відправляти ці дані на сервер, а там вже їх обробляти. У даному курсі не розглядається те, як треба обробляти дані отримані з форм, так як для цього необхідно вже знати мову програмування. В рамках цього курсу ви навчитеся просто виводити різні елементи форм на веб-сторінки.
Структура форм
Всі елементи форм повинні обов'язково знаходитися всередині контейнера
У значенні атрибута action вказується той файл, який буде обробляти дану форму, атрибут method може двох варіантів: post або get. Атрибут enctype ="multipart/form-data" необхідний для того, щоб завантажувати файли.
Для того, щоб відокремити форму або її частина, для цього можна скористатися тегом , а всередину тега помістити назву даної форми або її частини. Тоді браузер виділить цю частину рамкою, в якій буде знаходиться назва.
Елементи форм
В html існує 3 основних тега елементів форм
1. Тег використовується для того, щоб сформувати багаторядкове полі введення для великої кількості інформації. За допомогою атрибута cols можна задати ширину цього поля, а за допомогою атрибуту rows вказати число рядків даного поля. Тег є парним тегом.
2. Елемент
. У цього тега існує кілька атрибутів. Щоб зробити можливість вибору декількох пунктів, необхідно задати атрибут multiple, в значенні якого також необхідно вказати multiple. В атрибуті size вказується число рядків списку, які побачить користувач в браузері. Якщо існує необхідність, щоб якийсь із елементів списку був обраний, то потрібно цьому елементу в тезі задати атрибут selected. Тег
3. Тег . Він залежно від значення атрибуту type буде виглядати по-різному і мати різні значення. Тег є уже поодиноким тегом.
У першого тега значення атрибута type ="text", це означає, що це звичайне однорядкове поле введення. У значенні атрибута size вказується розмір цього поля в символах.
зі значенням password атрибуту type виглядає також, як і попередній, але він використовується для введення пароля і всі символи будуть у вигляді точок, тобто зашифровані.
Наступні два варіанти і надають користувачеві можливість право вибору деяких пунктів. У першому випадку є можливість множинного вибору кількох пунктів у вигляді прапорців, а в другому - єдиного вибору у вигляді перемикачів. В обох випадках є можливість відзначити будь-який пункт за замовчуванням, якщо задати атрибут checked = "checked".
надає користувачеві можливість вибору файлу на своєму комп'ютері, для того, щоб завантажити його на сервер.
Решта 3 тега - це кнопки. При натисканні на кнопку type ="submit" всі дані, введені у цій формі, будуть відправлені на сервер. Друга кнопка type ="reset" призначена для того, щоб очистити всі поля у формі. А третя type ="submit" це просто кнопка, при натисканні на яку нічого не станеться, але її, наприклад, можна прив'язати до події javascript. У всіх цих кнопок у значенні атрибуту value вказується той текст, який буде відображений на кнопці.
Тег
За допомогою тега встановлюється зв'язок між певним елементом форми і того напису, який відповідає даному елементу. Особливо важливо використати цей тег, коли оформляються прапорці або перемикачі, так як, якщо користувач клацне за назвою пункту, цей пункт відзначиться.