Архіви категорій: Форми

Форми HTML – теґ <select> – список з вибором

Залишити відповідь
Поширте інформацію:

Парний теґ <select> описує список з вибором, що випадає, або розкритий список з вибором.

Формат:

<select name="ім’я" [size="розмір"] [multiple]>
<option [value="значення1"] [selected]>Рядок1<option>
<option [value="значення2"] [selected]>Рядок2<option>
...
<option [value="значенняN"] [selected]>РядокN<option>
</select>

Параметр size визначає, скільки рядків на екрані займатиме список. Якщо size не задано, або задано size=1, буде відображатися список, що займає 1 рядок і розкривається (т. зв. комбобокс), інакше список буде займати size рядків і вертикальну смугу прокрутки в разі, якщо теґів <option> всередині більше, ніж значення size.

Якщо вказаний атрибут multiple, користувачу буде дозволено вибирати кілька рядків, утримуючи клавішу Ctrl (для списку, що розкривається, атрибут multiple не має сенсу).

Кожен рядок списку задається парним теґом <option>. Якщо в ньому заданий атрибут value, то відповідний рядок списку буде ідентифікуватися його значенням, якщо не заданий – рядок буде ідентифікуватися текстом між теґами <option> та </option> (тоді вважається, що значенням value є цей текст).

Текст між теґами <option> та </option> буде відображатися в браузері.

Якщо заданий атрибут selected, то відповідний рядок автоматично буде вибраним після завантаження форми.

Замикаючі теґи </option> можна опускати.

Що ж список з вибором передає сценарію на боці сервера при надсилання форми?

Зі списком, що випадає все зрозуміло: передається пара ім’я=значення,

ім’я задається атрибутом name теґа <select>, значення – це значення, визначене тегом <option> рядка, який вибрав користувач (значення атрибута value або вміст рядка теґами <option>).

А як же, коли список надає можливість вибору кількох рядків і користувач скористався цією можливістю?

Наприклад, маємо список

<select name="Sel" multiple>
<option>First
<option>Second
<option>Third
</select>

і користувач вибрав рядки First і Third.
Очевидно, серверному сценарію буде передано рядок:

Sel=First&Sel=Third

Виходить, при розборі параметрів інтерпретатором PHP змінній $_REQUEST[‘Sel’] буде присвоєно значення ‘First’, а тоді – значення ‘Third’ і значення ‘First’ буде втрачено?

Для вирішення даної проблеми передбачена можливість давати полям форми імена у вигляді масиву з “індексами”.

<select name="Sel[]" multiple>
<option>First
<option>Second
<option>Third
</select>

Тоді сценарію передасться рядок

Sel[]=First&Sel[]=Third

і інтерпретатор при його розборі створить масив з автозаповненням
$_REQUEST['Sel'] = array(0=>'First', 1=>'Third')

Отже, будуть збережені всі вибрані користувачем дані.

Зауважимо, що функціональність списку, що випадає, можна реалізувати за допомогою теґа <input type=”radio”>, а функціональність списку з можливістю множинного вибору можна реалізувати за допомогою теґа <input type=”checkbox”>.

Форми HTML – Теґ <textarea> – поле для введення тексту з багатьох рядків

коментарі 2
Поширте інформацію:

Цей теґ схожий на <input type=text>, але дозволяє відправити кілька рядків замість одного. Формат теґу:

<textarea name=ім'я [rows=висота] [cols=ширина] [wrap=тип]>
Текст, який буде відображений в полі на початку
</textarea>

Теґ має закриваючий парний. Параметр cols задає ширину поля в символах, параметр rows – його висоту в символах. Параметр wrap визначає, як буде виглядати текст в полі для введення. Може набувати одного з трьох значень (за замовчуванням мається на увазі none):

  • virtual – найбільш зручний тип для введення. З правого краю поля розміщується смуга прокрутки і текст, який набирає користувач, зовні виглядає розбитим на рядки, ширини, відповідної полю для введення, причому перенос робиться по словах. Проте всередині символ нового рядка вставляється лише при натисканні клавіші <Enter>;
  • physical – залежить від реалізації браузера, зазвичай дуже схоже на none;
  • none – текст відображається так, як вноситься. Якщо він не поміщається в полі, активізуються смуги прокрутки (в тому числі і горизонтальна).

Після відправлення форми текст, що ввів користувач, як звичайно, передається парою значень ім’я=текст, аналогічно з тегом однорядкового поля для введення <input type=text>.

Форми HTML – Теґ <input> – різні поля для введення

Залишити відповідь
Поширте інформацію:

Існує багато різновидів цього теґу. Нижче перераховані найбільш вживані. В квадратних дужках вказані необов’язкові параметри.

Текстове поле (text)

<input type = text name = ім'я [value = значення] [size = розмір] [maxlength = число]>

Створює поле для введення тексту приблизно в size знаків і максимально допустимою довжиною maxlength. Якщо задане значення атрибута value, то в текстовому полі початково буде відображений вказаний рядок.

Поле для введення пароля (password)

<input type = password name = ім'я [value = значення] [size = розмір] [maxlength = число]>

Повністю аналогічне теґу <input type = text>, але символи, які набирає користувач, не будуть відображатися на екрані.

Приховане текстове поле (hidden)

<input type = hidden name = ім'я value = значення>

Створює невідображуване (приховане) поле, яке застосовується, щоб передати сценарію деяку службову інформацію.

Незалежний перемикач (checkbox)

<input type = checkbox name = ім'я value = значення [checked]>

Генерує незалежний перемикач (прапорець). Якщо користувач встановлює галочку, сценарію передається рядок ім’я = значення, інакше не передається нічого. Якщо заданий атрибут checked, прапорець буде початково встановлений, інакше – скинутий.

Залежний перемикач (radio)

<input type = radio name = ім'я value = значення [checked]>

Відображає залежний перемикач (т.зв. радіокнопку). Вона відрізнається від прапорця тим, що прапорці незалежні один від одного, а радіокнопка може бути вибрана лише одна із своєї групи. Групу утворюють радіокнопки з однаковими значеннями атрибута name

Кнопка відправлення форми (submit)

<input type = submit [name = ім'я] value = текст_кнопки>

Створює кнопку підтвердження з іменем name і з текстом на кнопці value. Якщо параметр name заданий сценарію разом із іншими параметрами буде передана й пара ім’я = текст_кнопки.

Кнопка скидання форми (reset)

<input type = reset value = текст_кнопки >

Створює кнопку, при натисканні якої всі елементи форми будуть скинуті в початкові значення. Форма не відправляється на сервер.

Малюнок для відправлення форми (image)

<input type = image [name = ім'я] src = зображення >

Створює зображення, при натисканні якого мишею відбувається те ж саме, що й при натисканні кнопки submit, за винятком того, що сценарію будуть передані координати точки, в якій відбувся клік мишею (відраховані від лівого верхнього кута малюнка). Якщо атрибут name заданий, то атрибути будуть передані у форматі ім’я_x=X&ім’я_y=Y, де (X,Y) – координати зображення. Якщо ж атрибут name не заданий, то у форматі x=X&y=Y