Основні теги веб-форм

Інтерактивність веб-форм

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

Веб-форми зазвичай використовуються для виконання пошуку, відправки е-мейла, запису, коментаря, логінації користувача і т.ін.

Приклад форми відправки е-мейла з сайта на скриньку власника сайта:

*) E-mail or phone must be not empty.

При натисканні на кнопку "Submit" дані форми відправляться на сервер, там буде сформоване е-мейл повідомлення і відправлене за вказаною у налаштуваннях чи у скрипті адресою.

Батьківські теги вебформ

Тег <form> об’єднує елементи в одну форму. На одній сторінці може бути декілька форм.

Основні атрибути тега <form> є action та method.

action - атрибут, що вказує на файл-обробник форми на сервері, часто це є або сама поточна сторінка (наприклад, index.html) чи деякий php-файл, типу mail_sender.php

method - атрибут, що вказує на спосіб обробки даних форм. Може приймати два значення: POST - дані відправляються на сервер через запит; GET - дані передаються у рядку URL-адреси, їх розмір може бути не більше 4 кб (включаючи саму URL-адресу).

Приклад GET-запиту:
http://google.com/search?lang=en&q=css3+html5

Приклад тега:
<form action="sender.php" method="post">
  ...
</form>

Тег <fieldset> об’єднує декілька елементів в одну групу всередині форми. У невеликих формах його краще не використовувати.

Тег <legend> відповідає за напис над елементами.

Select one or more items:

<form>
  <fieldset>
    <legend>Select one or more items:</legend>
    ...
  </fieldset>
  <p><input type="submit" value="Submit"></p>
</form>

Тег <label> - це супровідний текст до елементів форм.

Потрібно або огортати цим тегом елемент форми, чи прописувати спеціальний атрибут for, а самому елементу задавати id.

Елемент <label> клікабельний, якщо клацнути по ньому мишою, то елемент форми, до якого він відноситься, стане активним.

<p><label><input type="checkbox" name="cb1"> I like books</label></p>
<p><input type="checkbox" name="cb2" id="cb2"> <label for="cb2">I like boxes</label></p>

Увага! Всі елементи форм, окрім кнопок та прихованих полів, повинні мати свій <label>.

Тег input

Тег <input> відповідає за відображення майже всіх елементів. Те, як буде виглядати елемент - регулює атрибут type:

<input type="text">
<input>

 

<input type="password">

 

<input type="hidden">

 

<input type="radio">

 

<input type="checkbox">

 

<input type="button">

 

<input type="file">

 

<input type="submit">

 

<input type="reset">

<textarea></textarea> - поле вводу тексту.

<textarea>Some text</textarea>