Урок 9. Форми. Частина 1

Здрастуй, шановний читачу.

Це перша частина дев`ятого уроку вивчення html, в якому ми поговоримо про форми. З даного уроку ви дізнаєтеся як створити форму, які бувають елементи форм. Даний урок дуже важливий.

Перед прочитанням даного уроку рекомендую пройти попередні уроки:

Урок 1. Що таке html?
Урок 2. Частини, заголовки
Урок 3. Списки
Урок 4. Зображення
Урок 5. Посилання. Частина 1
Урок 5. Посилання. Частина 2
Урок 6. Атрибути
Урок 7. Таблиці
Урок 8. Виділення тексту

Відео: Румунське мереживо Урок 50 частина 1 з 9 Проста брида

Теорія та практика

Розуміння форм дуже важлива частина вивчення технології html. За допомогою форм можна створити форму зворотного зв`язку, коментарі на сайті і т.д. Перейдемо до прикладів:

123456789101112131415161718192021222324252627282930

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;/headgt;lt;bodygt;lt;formgt;lt;pgt; Ваше ім`яlt;/pgt;lt;input type="Text" name="Name" value="Введіть ваше ім`я..." size="20" maxlength="15"gt;lt;pgt; Ваші інтересиlt;/pgt;lt;input type="Checkbox" name="Interest" value="Football" checkedgt; Футболlt;input type="Checkbox" name="Interest" value="Basketball"gt; Баскетболlt;input type="Checkbox" name="Interest" value="Hockey"gt; Хокейlt;pgt; Ваш вікlt;/pgt;lt;select name="Old" size="5"gt;lt;option value="18"gt; 18lt;/optiongt;lt;option value="19"gt; 19lt;/optiongt;lt;option value="20"gt; 20lt;/optiongt;lt;option value="21"gt; 21lt;/optiongt;lt;option value="22"gt, 22lt;/optiongt;lt;option value="22"gt; 23lt;/optiongt;lt;option value="22"gt; 24lt;/optiongt;lt;option value="22"gt; 25lt;/optiongt;lt;option value=«22»gt; 26lt;/optiongt;lt;/selectgt;lt;pgt; Введіть парольlt;/pgt;lt;input type="Password" name="Pass" size="10" maxlength="10"gt;lt;pgt; lt;input type="Reset" name="Reset" value="Очистити форму"gt; lt;/pgt;lt;/formgt;lt;/bodygt;lt;/htmlgt;

Як це виглядає в браузері:

Ви побачили багато полів форми і можливо сильно злякалися. Але не варто було цього робити :). Зараз ми розберемося що ми тут написали. Про все по порядку.

Форма створюється спеціальним тегом.

Тег є одним із елементів форми і дозволяє створювати різні елементи інтерфейсу для того щоб взаємодіяти з користувачем. У даного тега є атрибут type = "", який відповідає за тип форми. У нас є кілька випадків з різними типами.

типи тега
• text - якщо заданий даний тип у атрибута, значить в даний елемент можна вводити текст.
• checkbox - якщо заданий даний тип у атрибута, значить в даний елемент є чекбоксів (він в браузері вибирається галочкою).
• password - якщо заданий даний тип у атрибута, значить в даний елемент можна вводити пароль і він буде прихований кружечками.
• reset - якщо заданий даний тип у атрибута, значить даний атрибут призначений для скидання полів форми. Він уже заданий в html і ніяких додаткових команд прописувати не треба.

Як ви могли помітити у кожного елемента є своє унікальне ім`я. Воно задається в атрибуті name = "". Дане ім`я необхідно для того щоб ми могли потім передавати в файл обробник дані з тегів. Ім`я повинно бути унікальним. Атрибут size = "20" у першого задає довжину даного елемента на сторінці. А атрибут maxlength = "15" - задає максимальна кількість символів в елементі.

Зараз розглянемо як формується чекбокси:

...lt;pgt; Ваші інтересиlt;/pgt;lt;input type="Checkbox" name="Interest" value="Football" checkedgt; Футболlt;input type="Checkbox" name="Interest" value="Basketball"gt; Баскетболlt;input type="Checkbox" name="Interest" value="Hockey"gt; Хокей ...

Як це виглядає в браузері:

Для створення чекбокса необхідно в атрибуті type = "checkbox". Ім`я для однієї групи чекбоксів має бути однаковим. ! АЛЕ це торкається чекбоксів. Далі у кожного елемента чекбокса має бути унікальне значення атрибута value = "". Також є такий атрибут без значення. це атрибут checked - він встановлює виділеним чекбокс якому присвоєно даний атрибут.

І останнє що ми розглянемо в даному уроці це як формується випадаючий список(Select).

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

Відео: Відкритий урок "Генетика статі. Спадкування, зчеплене з підлогою" 9 клас. Частина 1

...lt;pgt; Ваш вікlt;/pgt;lt;select name="Old" size="5"gt;lt;option value="18"gt; 18lt;/optiongt;lt;option value="19"gt; 19lt;/optiongt;lt;option value="20"gt; 20lt;/optiongt;lt;option value="21"gt; 21lt;/optiongt;lt;option value="22"gt; 22lt;/optiongt;lt;option value="22"gt; 23lt;/optiongt;lt;option value=«22»gt; 24lt;/optiongt;lt;option value="22"gt; 25lt;/optiongt;lt;option value="22"gt; 26lt;/optiongt;lt;/selectgt; ...

Відео: HTML5 №9 Форми в HTML5 Частина 1

Як це виглядає в браузері:

Список, що випадає формується за допомогою тега . Потім задається ім`я для даного елемента в атрибуті name = «old" і видиме кількість записів у атрибуті size = "5". Потім всередині даного тега прописуються за допомогою тега . Усередині даного тегу пишуться значення, які будуть виводиться на сторінці а всередині атрибута value = "" прописуються значення, які передаватимуться оброблювачу (іншій сторінці) при передачі даних форми.

Даний урок виявився небагато великим. Але всі ці деталі дуже важливі для розуміння. Тому рекомендую вам ретельно в них розібратися, щоб рухатися далі. Сьогодні ми розглянули як створити форму і деякі елементи форми. Все це не дуже складно. Пробуйте все прописати руками. Тоді ви краще запам`ятайте їх і будете пам`ятати де і як їх застосувати.

Більше практикуйтеся!

Відео: HTML для початківців