Як зробити html форму

Як зробити html форму

Щоб організувати взаємодію сайту з відвідувачем в його сторінках треба передбачити можливості для введення інформації і відправки її на сервер. Для цього в мові опису веб-сторінок HTML (HyperText Markup Language — «мова розмітки гіпертексту») передбачений спеціальний набір тегів. Що це за теги і як, користуючись ними створити в сторінці веб-форму для заповнення відвідувачем?

Вам знадобиться

Базове знання мови HTML

Інструкція

  1. HTML-теги, які повідомляють браузеру, що в цьому місці сторінки необхідно відобразити форму та її елементи, розміщуються в коді між відкриває тегом і закриває. Відкриває тег повинен містити обов’язкову інформацію — атрибути, що повідомляють куди саме треба відправити інформацію з форми і яким методом потрібно це зробити. Крім того, якщо сторінка містить більше однієї форми, то кожна повинна мати власне ім’я. З урахуванням всього цього відкриває тег може виглядати так:

    <form name=»thisFormName» method=»POST» action=»">

    Тут атрибут «name» — ім’я форми, атрибут «method» задає спосіб надсилання даних (можливі методи POST або GET), а атрибут «action» повинен вказувати URL скрипта на сервері, якому треба відправити дані з форми. Якщо адреса не вказувати, то дані будуть передані на URL цієї ж самої сторінки. Як правило, такі інтерактивні сторінки формуються універсальними скриптами, які забезпечують і отримання / обробку даних з цієї ж самої сторінки.
  2. Після відкриваючого тега форми нам слід розмістити елементи форми, які більше підходять для введення користувачем потрібного типу даних. Такими елементами можуть бути:

    Текстове поле вводу:

    <input name=»textField» type=»text» value=»Ето текстове поле» />

    Тут, як і у всіх інших тегах «input», атрибут «type» задає тип елемента, «name» — ім’я змінної, яке буде надіслано разом із введеними в це поле даними, а «value» — це значення за замовчуванням, яким буде заповнено тестове поле введення.

    -

    Поле введення пароля:

    <input name=»passField» type=»password» />

    -

    Поле для «мітки з галочкою»:

    <input name=»checkBox» type=»checkbox» value=»1″ checked=»checked» />

    Тут наявність ознаки «checked» означає, що за замовчуванням галочка там буде стояти.

    -

    Група перемикачів, з яких потрібно вибрати тільки один:

    <input name=»radioBox» type=»radio» value=»0″ checked=»checked» />

    <input name=»radioBox» type=»radio» value=»1″ />

    Зверніть увагу — у всіх елементів групи має бути однакове ім’я (name), але різні значення (value). На сервер буде передано тільки одне значення — те, яке відзначить відвідувач або те, що було вибрано за замовчуванням (атрибутом checked).

    -

    Випадаючий список:

    <select name=»selectField»>

     <option value=»value1″> поле перше </ option>

     <option value=»value2″ selected=»selected»> поле другого </ option>

     <option value=»value3″> Поле третє </ option>

    </ Select>

    Тут кожен тег «option» — рядок в списку, що випадає. Як і для групи перемикачів на сервер буде передано тільки одне значення з поля, вибраного відвідувачем, або вибраного за замовчуванням (тут — атрибутом selected).

    -

    Багаторядкове текстове поле:

    <textarea name=»textRows» cols=»50″ rows=»5″> Тут багаторядковий текст </ textarea>

    Атрибути «cols» і «rows» задають ширину (в знаках) і висоту (в рядках) поля для введення тексту.

    -

    Приховане поле:

    <input name=»hiddenField» type=»hidden» value=»Скритое поле» />

    Це поле не буде видно заповнює форму, але теж буде надіслано разом з іншими даними.

    -

    Поле вибору файлу для відправки:

    <input name=»fileField» type=»file» />

    Відправлення файла вимагає, щоб у відкриваючому форму теге були додаткові атрибути. Як мінімум, слід додати тег «enctype». Наприклад, так:

    <form name=»thisFormName» method=»POST» enctype=»multipart/form-data» action=»">

    -

    Крім цього у форму можна помістити кнопки — для очищення введених у форму даних:

    <input name=»resetButton» type=»reset» value=»Очістіть» />

    і для відправки заповненої форми на сервер:

    <input name=»submitButton» type=»submit» value=»Отправіть» />

    Значення, вказане в атрибуті «value» для кнопок — це напис на самій кнопці.
  3. Як зробити html форму
    У найпростішому варіанті html-код веб-форми в зборі може бути таким:

    <form action=»" name=»thisFormName» method=»POST»>

     <input name=»visitorName» type=»text» value=»Укажіте ваше імя» /> <br />

     <textarea name=»textRows» cols=»50″ rows=»5″> Введіть текст повідомлення <br /> <br />

     <input name=»submitButton» type=»submit» value=»Отправіть» />

    </ Form>

    Виглядати в браузері він буде так: