Урок "Форми. Створення форми"

Тема. Форми. Створення форми.

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

Тут слід зауважити, що html-форми самі по собі тільки дозволяють вводити інформацію, а ось обробляти її HTML не вміє (це все-таки мова розмітки, а не програмування). Для обробки інформації використовуються такі мови, як javascript, php і інші.

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

Отже, в html форма задається тегами <form> </ form> . Всі інші елементи форми розташовуються між цими тегами.

У тега <form> є кілька параметрів:

• name - ім'я форми. Необхідно, якщо на сторінці кілька форм
• action - визначає URL-адресу, за якою буде відправлена інформація введених користувачем
• method - визначає спосіб відправки інформації
• target - вказує ім'я вікна, в якому будуть відображатися результати обробки надісланої форми

На даному етапі можете не дуже вникати в ці параметри, їх призначення стане очевидним при вивченні мов обробки даних. А поки запам'ятайте, що всі елементи форми розташовуються між тегами <form> </ form> :

 

   <Form name = "forma1"> </ form>

Текстове поле

Просте однорядкове текстове поле, в яке можна вводити і редагувати текст. Здається тегом <input>

   <Form name = "forma1"> <input type = "text" name = "text1" size = "20" maxlength = "50" value = "Введіть текст"> </ form>

       

результат:

Top of Form

Bottom of Formпараметри:

• name - ім'я елемента,
• type - тип елемента (в даному випадку - text),
• size - розмір текстового поля в символах, які одночасно будуть видні, при введенні більшої кількості символів, вони будуть прокручуватися,
• maxlength - максимальна кількість символів, які можна ввести в поле, якщо опустити цей параметр, то число символів буде необмеженим,
• value - текст, який буде відображатися (його можна стерти), при відсутності цього параметра поле буде порожнім.

Можливі ще два параметри:

• disabled - блокує поле від будь-яких змін,
• readonly - робить поле доступним тільки для читання.

приклад:

   <Form name = "forma1"> <input type = "text" name = "text1" size = "20" maxlength = "50" value = "неактивне поле" disabled> <input type = "text" name = "text1" size = "20" maxlength = "50" value = "тільки для читання" readonly> </ form>

       

результат:

Top of Form 

Bottom of FormТекстове поле для введення пароля

Це таке ж текстове поле, як і попередній елемент. Різниця тільки в тому, що вводиться текст не відображається, замість нього з'являються спеціальні символи, наприклад зірочки. Найчастіше використовується при введенні паролів. Всі параметри такі ж, як у простого текстового поля, крім параметра type = "password" .

приклад:

   <Form name = "forma1"> Введіть пароль: <br> <input type = "password" name = "text1" size = "20" maxlength = "50"> </ form>

       

результат:

Top of FormВведіть пароль:

Bottom of FormСпробуйте ввести що-небудь в цьому полі.

Прапорці

Ви, звичайно, зустрічали подібний елемент:

Top of FormЯкими мовами ви володієте:

англійська німецький іспанська французький

Bottom of FormВін задається все тим же тегом <input> , причому один тег задає один прапорець. Потрібно чотири прапорця, доведеться чотири рази писати input.

приклад:

<Form name = "forma1"> Якими мовами ви володієте: <br> <input type = "checkbox" name = "lan1" value = "english" checked> англійська <input type = "checkbox" name = "lan2" value = "german"> німецька <input type = "checkbox" name = "lan3" value = "spanish"> іспанська <input type = "checkbox" name = "lan4" value = "french"> французький </ form>

       

Розглянемо його параметри:

• type - тип елемента (в даному випадку - checkbox),
• name - ім'я елемента, вказує програмі оброблювачу форми, який пункт вибрав користувач,
• value - значення елемента, вказує програмі оброблювачу форми значення пункту, який вибрав користувач. У нашому прикладі вибрано пункт англійська, отже, програма-обробник отримає: lan1 = "english",
• checked - їм зазвичай позначають найбільш ймовірні для вибору пункти, користувач клацанням миші може вибрати інші пункти.

Перемикачі

На відміну від прапорців, можна вибрати тільки один пункт. У зв'язку з цим значення параметра name повинні бути однакові для всіх елементів групи. Параметр type = "radio" , всі інші такі ж, як у прапорців.

приклад:

<Form name = "forma1"> Вкажіть вашу стать: <br> <input type = "radio" name = "sex" value = "man" checked> чоловічий <input type = "radio" name = "sex" value = " woman "> жіночий </ form>

       

результат:

Top of FormВкажіть вашу стать:

чоловічий  жіночий

Bottom of FormКнопки

Існує чотири види кнопок:

• submit - кнопка відправки вмісту форми web-серверу. Її параметри:
  • type = "submit" - тип кнопки,
  • name - ім'я кнопки,
  • value - напис на кнопці.
• image - графічна кнопка відправки вмісту форми web-серверу. Для її використання необхідно підготувати картинку кнопки, а потім використовувати її у вигляді кнопки. Її параметри:
  • type = "image" - тип графічної кнопки,
  • name - ім'я кнопки,
  • src - адреса картинки для кнопки.
• reset - кнопка, що дозволяє відновити всі значення за замовчуванням в формі. Її параметри:
  • type = "reset" - тип кнопки очищення,
  • name - ім'я кнопки,
  • value - напис на кнопці.
• button - довільна кнопка, її дії призначаються вами, тобто сама вона робити нічого не вміє. Її параметри:
  • type = "button" - тип довільної кнопки,
  • name - ім'я кнопки,
  • value - напис на кнопці.
  • onclick - вказує, що робити при натисканні на кнопку. Взагалі, у цього типу кнопок є і інші події (наприклад, подвійне клацання), але тут ми не будемо їх розглядати.

Якщо на формі кілька кнопок, то вони повинні мати різні назви.

Приклад коду:

<Form name = "forma1"> <input type = "submit" name = "submit" value = "Відправити"> <input type = "image" name = "but_img" src = "but.gif"> <input type = "reset" name = "reset" value = "Очистити"> <input type = "button" name = "button" value = "Відправити"> </ form>

       

результат:

Top of Form   

Bottom of FormКнопки можна задавати і по іншому, за допомогою тегів <button> </ button> . Можливості у таких кнопок трохи ширше, вони можуть мати вміст у вигляді тексту або картинки. Цей тег має наступні параметри:

• type - тип кнопки, може приймати значення:
  • reset - кнопка очищення форми,
  • submit - кнопка відправки даних,
  • button - кнопка довільного дії.
• name - ім'я кнопки,
• value - напис на кнопці.

Приклад коду:

<Form name = "forma1"> <button name = "submit" type = "submit"> <img src = "mail.gif" align = "absmiddle"> <font size = "4"> Надіслати </ font> < / button> </ form>

       

результат:

Top of Form Надіслати

Bottom of FormПоле для файлів

Поле для введення імені файлу, супроводжуване кнопкою Browse (Огляд), при натисканні на яку відкривається вікно перегляду дерева папок комп'ютера, де можна вибрати потрібний файл. Обраний файл приєднується до вмісту форми при відправці на сервер.

приклад:

<Form name = "forma1"> <input type = "file" name = "load" size = "50"> </ form>

       

результат:

Top of FormBottom of FormБагаторядкове текстове поле

Для об'ємних текстів, наприклад для поштових повідомлень, зручно використовувати саме цей елемент. Він створюється тегами <textarea> </ textarea> і має наступні параметри:

• name - ім'я поля,
• cols - ширина поля в символах,
• rows - кількість рядків тексту, видимих на екрані,
• wrap - спосіб перенесення слів:
  • off - перенесення не відбувається,
  • virtual - перенесення відображається, але на сервер надходить неподільна рядок,
  • physical - перенесення і на екрані і при надходженні на сервер.
• disabled - неактивне поле,
• readonly - дозволено тільки читання.

приклад:

Form name = "forma1"> <textarea cols = "20" rows = "3" wrap = "off"> </ textarea> <br> <textarea cols = "35" rows = "5" wrap = "virtual" > </ textarea> <br> <textarea cols = "50" rows = "7" wrap = "physical"> </ textarea> </ form>

       

результат:

Top of Form

Bottom of FormСпробуйте ввести текст і подивіться на різницю в значеннях параметра wrap .

Розкриваються списки

Списки бувають з можливістю вибору одного елемента і з множинним вибором. Задются і ті, і інші за допомогою тегів <select> </ select> , усередині яких розташовуються елементи значень, заданих тегом <option> . Розглянемо параметри цих тегів:

• <select> :
  • name - ім'я списку. Кожен обраний елемент списку при передачі на сервер буде мати вигляд: name.value, де значення (value) береться з тега option.
  • size - визначає кількість видимих елементів в списку: 1 - простий список, що розкривається, більше 1 - список з смугою прокрутки.
  • multiple - дозволяє вибрати кількох елементів списку.
• <option> :
  • selected - їм позначають найбільш ймовірний для вибору елемент списку, якщо список з множинним вибором, то можна помітити кілька пунктів.
  • value - значення, яке буде відправлено сервера, якщо пункт вибраний.

приклад:

<Form name = "forma1"> Яку мову ви хочете вивчати: <select name = "language" size = "1"> <option selected value = "html"> html <option value = "php"> php <option value = "java"> java </ select> <br> <br> Який час ви готові на це витратити: <br> <select name = "time" size = "3"> <option selected value = "1"> 1 місяць <option value = "2"> 2 місяці <option value = "3"> 3 місяці </ select> <br> <br> Які дні тижня для занять вас влаштують: <br> (вибирайте, натиснувши клавішу ctrl) <br > <select name = "day" size = "7" multiple> <option selected value = "mon"> П'ятниця <option value = "tue "> Неділя <option value =" wen "> Серед <option selected value =" thu "> четверг <option value =" fri "> Середа <option value =" sat "> Неділя <option value =" san "> Субота </ select> </ form>

       

результат:

Top of FormЯку мову ви хочете вивчати:  html php java

Який час ви готові на це витратити:

1 місяць 2 місяці 3 місяці

Які дні тижня для занять вас влаштують:

(вибирайте, натиснувши клавішу ctrl)

понеділок Вівторок середа четвер п'ятниця субота неділя

Bottom of FormІснують ще теги <optgroup> </ optgroup> , що дозволяють групувати елементи списку з яких-небудь ознаками. Наприклад, ми хочемо задати каталог сайтів у вигляді списку, тоді зручніше розбити його на групи за інтересами:

Top of FormКаталог сайтів:

                                                                        інтернет мобільники hardware вакансії працевлаштування резюме здоров'я краса діти

Bottom of FormДля цього нам і потрібні теги <optgroup> </ optgroup> з одним параметром label , який і задає назву групі елементів.

Приклад коду:

<Form name = "forma1"> Каталог сайтів: <br> <select name = "catalog" size = "9"> <optgroup label = "Комп'ютери"> <option value = "1"> інтернет </ option> <option value = "2"> мобільники </ option> <option value = "3"> hardware </ option> </ optgroup> <optgroup label = "Робота"> <option value = "4"> вакансії </ option> < option value = "5"> працевлаштування </ option> <option value = "6"> резюме </ option> </ optgroup> <optgroup label = "Будинок"> <option value = "7"> здоров'я </ option> <option value = "8"> краса </ option> <option value = "9"> діти </ Option> </ optgroup> </ select> </ form>

       

Зверніть увагу, в даному випадку необхідно вказувати закривають теги </ option> .

Написи

Всі елементи форми можна пов'язати з їх написами за допомогою елемента <label> і його параметра for , значенням якого є ім'я елемента, з яким пов'язуємо напис. наприклад:

<Form name = "forma1"> <label for = "load"> Вибирайте файл: </ label> <input type = "file" name = "load" size = "30"> </ form>

результат:

Top of FormВибирайте файл: 

Bottom of FormЧи варто його використовувати вирішувати вам. Мені здається, що без нього код коротше, а результат той же.

узагальнюючий приклад

<Html> <head> <title> Заголовок документа </ title> </ head> <body> <form name = "forma1"> <table border = "0" cellspacing = "5" cellpadding = "5"> <caption > Форма реєстрації </ caption> <tr> <td align = "right" valign = "top"> Ім'я </ td> <td> <input type = "text" name = "name" size = "25"> < / td> </ tr> <tr> <td align = "right" valign = "top"> e-mail </ td> <td> <input type = "text" name = "e-mail" size = " 25 "> </ td> </ tr> <tr> <td align =" right "valign =" top "> Пароль </ td> <td> <input type = "password" name = "password" size = "25"> </ td> </ tr> <tr> <td align = "right" valign = "top"> Повтор пароля </ td> <td> <input type = "password" name = "password2" size = "25"> </ td> </ tr> <tr> <td align = "right" valign = "top"> Пол </ td> <td> <input type = "radio" name = "sex" value = "man" checked> чоловічий <input type = "radio" name = "sex" value = "woman"> жіночий </ td> </ tr> <tr> <td align = "right" valign = "top"> Захоплення </ td> <td> <select name = "hobby" size = "7 "multiple> <option selected value =" 1 "> комп'ютери <option value =" 2 "> спорт <option value =" 3 "> ігри <option value =" 4 "> тварини <option value =" 5 "> автомобілі <option value = "6"> клуби <option value = "7"> музика </ select> </ td> </ tr> <tr> <td align = "right" valign = "top"> Ваші побажання </ td> <td> <textarea cols = "30" rows = "3" wrap = "physical"> </ textarea> </ td> </ tr> <tr> <td align = "right" colspan = "2" > <input type = "submit "name =" submit "value =" Відправити "> <input type =" reset "name =" reset "value =" Очистити "> </ td> </ tr> </ table> </ form> </ body > </ html>

результат:

Top of Form

Форма регістрації
ім'я
e-mail
пароль
Повтор пароля
Стать	чоловічий  жіночий
захоплення	комп'ютери спорт гри тварини автомобілі клуби музика
Ваші побажання

Bottom of FormНа цьому урок, присвячений формам, закінчений.