1. Text (Текстові поля)
Атрибут type = "Text"– за замовчанням створює однорядкове текстове поле, в якому можна редагувати вже введений|запроваджений| текст або вводити|запроваджувати| свій;
<INPUT TYPE=”text”>
Так виглядає поле для введення тексту (одного рядку тексту).
Атрибут size = "N"- розмір текстового поля по ширині в символах, які можуть
бути видимими в полі одночасно, за замовчанням =20символам.
При введенні більшої кількості символів поле буде
автоматично прокручуватися.
Атрибут maxlength = "N" - максимальна кількість символів, які можна ввести|запровадити| в
дане поле, включаючи пробіли. За замовчанням - кількість
символів не обмежена.
Атрибут value = "..." задає вміст текстового або іншого типу поля.
Якщо атрибут value не заданий, то текстове поле початково|вихідний| буде порожнім|пустим|.
Практична частина
Приклад створення форми .|зразок|
<FORM>
<INPUT type = " text" name ="text" size = "20" maxlength = "30"
value = " Введіть|запровадьте| текст">
</ FORM>
Створіть і перегляньте форму, а також введіть свій текст.
Завдання 1.
Змініть створену форму, задайте полю name ім’я-”address” та задайте атрибуту value значення своєї адреси. Ця адреса буде присутня у полі до тих пір поки користувач не зміне її на свою.
2. Текстове поле для введення пароля - Рassword.
Замість значення " text" у атрибуті type, можна ввести|запровадити| значення password.
Атрибут type = "password", в цьому випадку текстове поле служить для
введення пароля. Текст, що вводиться|запроваджується| в нього, не відобра-
жається|відображується|, а з'являються|появляються| спецсимволи ***
Завдання 2.
Створіть форму з паролем і перегляньте її дію.
Броузер перешле вам те, що вводив користувач вашої форми (у вигляді нормальних символів), але оточуючі не будуть |зразок| бачити , що вводив ваш відвідувач. Іноді це дуже зручно.
3. Тег TEXTAREA –створює багаторядкове текстове поле. Використовується
для введення у форму об'ємної текстової інформації,
наприклад для вводу текстових повідомлень, коментарів.
Для створення полів цього типу замість конструкції
<INPUT TYPE=TEXTAREA> використовується спеціальний дескриптор:
<TEXTAREA>........</TEXTAREA > парний тег|.
Між цими тегами| може розташовуватися текст, який поміщається в це поле. Якщо початкове|вихідне| поле має бути порожнім|пустим|, то між тегами| нічого не пишемо.
Формат тега: <TEXTAREA NAME=ім’я_поля R0WS=rr COLS=cc wrap=”virtual”>, де атрибут cols - задає ширину поля у вигляді кількості колонок символів;
атрибут rows - задає кількість рядків;
wrap - задає спосіб перенесення|переносу| слів, за замовчання ="off" перенесення|перенос| не відбувається, а якщо =”VIRTUAL” текст форми буде автоматично переноситися на другий рядок, коли Ваш відвідувач буде щось набирати у полі формі, та дані форми до Вас прийдуть у вигляді одного великого рядку( без переносів).
Для роботи з текстовими полями використовують два булевих атрибута: disabled та readоnly.
Атрибут disabled блокує поле від можливості змінення поля, навіть не
можливе встановлення в нього курсору вводу.
Атрибут readоnly робить поле доступним тільки для читання, воно виглядає
як „неактивне”, але можливо встановити курсор, наприклад
для копіювання інформації яка там знаходиться.
Тема: Вивчення тегу INPUT.
Мета: Навчити студентів створювати форми з використанням полів типу:
прапорець (Checkbox) та перемикач (Radio).
|виробляється,справляється|
1. Поля - Прапорці (Checkbox)
Атрибут type = " Checkbox" тегу INPUT.
створює 1 прапорець. Якщо потрібно створити набір з|із| 5 прапорців,
доведеться|припаде| п'ять разів написати:
<INPUT type ="Checkbox" name = flag N > і задати відповідні атрибути.
Для того, щоб один або декілька прапорців були встановлені|установлені| за замовчанням у відповідних дескрипторах, необхідно використовувати атрибут checked.
Атрибут checked - можна використовувати і для перемикача але|та| тільки|лише| одного. Всі елементи такого типу повинні мати різне |також| ім'я, а значення value, для всіх, має бути однаковим.
Приклад 1. Створіть і перегляньте форму.
Імена полів та друзів можете вводити свої
Текст форми:
|зразок|
Кого з цих молодиків ви вважаєте своїм другом? <BR>
<INPUT TYPE=CHECKBOX NAME="N1" VALUE="YES" CHECKED> Эд Холлеран <BR>
<INPUT TYPE=CHECKBOX NAME="N2" VALUE="YES"> Рик Вайнберг <BR>
<INPUT TYPE=CHECKBOX NAME="N3" VALUE="YES" CHECKED> Том Студд <BR>
<INPUT TYPE=CHECKBOX NAME="N4" VALUE="YES"> Бургермастер Мастербургер <P>
У даному прикладі вказано які прапорці будуть вибрані за замовчанням, атрибут checked (поки ваш відвідувач не обере інше).
Ваш відвідувач може вибрати одне, друге, або нічого, або одразу усе. У даному випадку вибір вашого відвідувача ви отримаєте у вигляді: Ed=YES Tom=YES.Якщо відвідувач нічого не вибере, то нічого вам і не перешлеться.
2. Поля - Перемикачі ( Radio Buttons)
Атрибут type = " radio" –створює перемикач.
При роботі з|із| перемикачами можливий вибір тільки|лише| одного
значення і всі елементи такого типу повинні мати одне і те саме|також|
ім'я, а значення мають бути різними.
Приклад 2.
<FORM> Як провести вихідні: <BR>
<INPUT type = "radio" name = "party" value ="go"> піти на вечірку <BR>
<INPUT type = "radio" name = "party" value = "not go"> не піти на вечірку <BR>
</FORM>
Створіть і перегляньте форму.|зразок|
Приклад 3. Змініть форму Прикладу1, замінюючі тип поля CHECKBOX на тип поля-radio. Вкажіть відмінність дії цих полів у формах.
Завдання для СРС
Створіть форму вибору графіку робочих днів, враховуючи що такі дні як Понеділок та Вівторок є обов’язковими робочими днями для усіх співробітників і вибору не підлягають.
3.Приховані поля (HIDDEN). Існують поля, які не відображаються|відображуються| на екрані, type=hidden.
<INPUT type=hidden name="formname" value="Friend Form 1">
Зміст|вміст,утримання| поля hidden посилається у вигляді пари name/value (ім'я/значення) разом з рештою інформації форми. Вашому відвідувачу|візитеру| ці поля, коли він заповнює форму, будуть невидимими.
"Приховане" поле hidden може використовуватися для внутрішніх цілей серверної програми. Наприклад, якщо програма генерує для кожного користувача|| Web-сайту окрему персональну сторінку з|із| формою, то в "приховане" поле вона може включити унікальне ім'я користувача.
<INPUT TYPE="hidden" ID="hiddenusername" VALUE="vasya_pupkin"> .
І згодом, коли користувач відправить введені|запроваджені| дані назад серверній програмі, вона знатиме, від кого прийшли ці дані.
Або якщо ви працюєте в компанії, яка хоче дізнатися|упізнати,взнати,пізнати|, як йдуть справи|речі| з|із| їх новим продуктом. Для цього створюється форма-опит|опитування|, що містить|утримує| стандартні поля типу: ім'я, прізвище, можливість|спроможність| вибрати ("прапорці") подобається продукт клієнту чи ні|або ні| і таке інше. Але|та| є невелика проблема. Ви розміщуєте шість варіантів форми на шести різних сайтах фірм, які поширюють|розповсюджують| Ваш новий продукт. І вам потрібно знати, що і звідки прийшло. Що ж робити|чинити|? Ось|от| тут вам і допоможуть приховані поля форми.
<INPUT type=hidden name="forname" value="Version 1"> ...для першої версії
<INPUT type=hidden name="forname" value ="Version 2"> ...для другої версії
Значення (назва) для пари name/value може бути будь-яким.
Елемент file дозволяє відправити серверній програмі будь-який файл і є полем введення, де вводиться|запроваджується| ім'я файлу, і кнопку Відкрити|відчинити|, що виводить на екран стандартний діалог відкриття|відчинення| файлу Windows. При цьому значення атрибуту method тега| <form> має бути "post".