Форми та їх елементи


Форми необхідні для того, щоб було можливо отримувати від користувача будь-яку інформацію, відправляти ці дані на сервер, а там вже їх обробляти. У даному курсі не розглядається те, як треба обробляти дані отримані з форм, так як для цього необхідно вже знати мову програмування. В рамках цього курсу ви навчитеся просто виводити різні елементи форм на веб-сторінки.

Структура форм

Всі елементи форм повинні обов'язково знаходитися всередині контейнера <form>. У цьому тезі можуть перебувати атрибути, необхідні для правильної роботи форми.

У значенні атрибута action вказується той файл, який буде обробляти дану форму, атрибут method може двох варіантів: post або get. Атрибут enctype ="multipart/form-data" необхідний для того, щоб завантажувати файли.

Для того, щоб відокремити форму або її частина, для цього можна скористатися тегом <fieldset>, а всередину тега <legend> помістити назву даної форми або її частини. Тоді браузер виділить цю частину рамкою, в якій буде знаходиться назва.

 <form action=“file.php“  method=“post”  enctype =“multipart/form-data”>  
      <fieldset>  
                   <legend>Контактні дані</legend>  
          … 
       </fieldset> 
 </form> 

Елементи форм

В html існує 3 основних тега елементів форм

 <textarea cols=“30” rows=“5” name=“title” > 
 </textarea> 
 <select name=“year” multiple=“multiple“ size=“2”>  
 <option value=“1”>1981</option> 
 <option value=“2” selected=“selected”>1982</option> 
 </select> 

1. Тег  <textarea> використовується для того, щоб сформувати багаторядкове полі введення для великої кількості інформації. За допомогою атрибута cols можна задати ширину цього поля, а за допомогою атрибуту rows вказати число рядків даного поля. Тег  <textarea> є парним тегом.

2. Елемент <select> являє собою список, що випадає, елементи якого вказуються в тегу <option>. У цього тега існує кілька атрибутів. Щоб зробити можливість вибору декількох пунктів, необхідно задати атрибут multiple, в значенні якого також необхідно вказати multiple. В атрибуті size вказується число рядків списку, які побачить користувач в браузері. Якщо існує необхідність, щоб якийсь із елементів списку був обраний, то потрібно цьому елементу в тезі<option> задати атрибут selected. Тег <select> також є парним тегом.

3. Тег <input >. Він залежно від значення атрибуту type буде виглядати по-різному і мати різні значення. Тег <input > є уже поодиноким тегом.

<input type=“text” size=“50” /> 
<input type=“password” size=“30” /> 
<input type=“checkbox” checked="checked" />  
<input type=“radio” />  
<input type=“file” /> 
<input type=“submit” value=“зберегти” />  
<input type=“reset” value=“очистити” /> 
<input type=“button” value=“просто кнопка” />  

У першого тега <input > значення атрибута type ="text", це означає, що це звичайне однорядкове поле введення. У значенні атрибута size вказується розмір цього поля в символах.

<input > зі значенням password атрибуту type виглядає також, як і попередній, але він використовується для введення пароля і всі символи будуть у вигляді точок, тобто зашифровані.

Наступні два варіанти <input  type ="checkbox" /> і <input type ="radio" /> надають користувачеві можливість право вибору деяких пунктів. У першому випадку є можливість множинного вибору кількох пунктів у вигляді прапорців, а в другому - єдиного вибору у вигляді перемикачів. В обох випадках є можливість відзначити будь-який пункт за замовчуванням, якщо задати атрибут checked = "checked".

<input type ="file" /> надає користувачеві можливість вибору файлу на своєму комп'ютері, для того, щоб завантажити його на сервер.

Решта 3 тега <input /> - це кнопки. При натисканні на кнопку type ="submit" всі дані, введені у цій формі, будуть відправлені на сервер. Друга кнопка type ="reset" призначена для того, щоб очистити всі поля у формі. А третя type ="submit" це просто кнопка, при натисканні на яку нічого не станеться, але її, наприклад, можна прив'язати до події javascript. У всіх цих кнопок у значенні атрибуту value вказується той текст, який буде відображений на кнопці.

Тег <label><

За допомогою тега <label>< встановлюється зв'язок між певним елементом форми і того напису, який відповідає даному елементу. Особливо важливо використати цей тег, коли оформляються прапорці або перемикачі, так як, якщо користувач клацне за назвою пункту, цей пункт відзначиться.

<label> 
 <input type=“radio” /> 
 Вибери мене<br /> 
 </label> 
 <label> 
 <input type=“radio” /> 
 А краще мене<br /> 
 </label>