Предмет: Інформатика (Модуль. Веб-технології)
Тема: Використання форм. Основні елементи форми.
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Використання форм. Основні елементи форми
Урок:
Використання форм. Основні елементи форми
15.03.2023
Опис уроку (учням цей опис не показується):
Вміст уроку:
1
1
Урок 25
Предмет: Інформатика (Модуль. Веб-технології)
Тема: Використання форм. Основні елементи форми.
Введення інформації можна організувати не лише через діалогові вікна, а й за допомогою форм — наборів елементів керування які забезпечують взаємодію людини з програмою. Користувач може вводити інформацію з клавіатури, а також вибираю чи потрібні перемикачі чи прапорці. Його дії потім опрацьовує програма-сценарій.
<form>...</form> - це основний елемент всіх форм, парний тег. Форма може мати декілька атрибутів. Основні з них:
action, значенням якого є URL для передачі на вузол інформації з форми;
metod, що приймає значення get або post (визначення способу передачі даних форми до вузла).
<form method="post" action="mailto:ivan.nykyrsa@gmail.com.net">
</form>
Вирізняють п'ять основних елементами, що розміщуються на формі, а саме:
текстові поля;
перемикачі;
прапорці;
списки;
кнопки.
Більшість з них створюється за допомогою непарного тегу <input>
text - текстове поле.
password - поле з паролем.
radio - перемикач.
checkbox - прапорець.
hidden - приховане поле.
button - кнопка.
submit - кнопка для відправлення форми.
reset - кнопка для очищення форми.
image - кнопка із зображенням.
file - поле для відправлення файлу.
Тег <input> може мати різні атрибути.
type – визначає елемент управління;
name - ім'я елемента управління;
value – значення елемента управління (атрибут є обов'язковим лише для перемикача radio);
size – ширина поля елемента управління в пікселях (для елементів text і password ширину поля визначають в символах);
maxlength – максимальна кількість символів, котрі приймає елемент управління;
checked – відмічений прапорець checkbox (перемикач radio);
src – вказівник на рисунок, що використовується в формі як графічна кнопка.
У HTML5 істотно розширений перелік таких елементів. Завдяки цим нововведенням форми стали привабливішими, а також значно спрощується перевірка правильності введення (валідація) клієнтом даних у форму.
Надсилання форми
Отже, розробник веб-сторінки має змогу отримати відповіді користувача на поставлені запитання, не обмежуючись діалоговими вікнами методів Confirm та Prompt. Форми можна проектувати відповідно до своїх потреб, додавати до них зображення та інші елементи. Після заповнення форми користувач надсилає дані на
подальше опрацювання.
Розглянемо приклад форми
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя сторінка 2</title>
</head>
<body>
<form>
<fieldset>
<legend>Реєстрація</legend>
Прізвище:<br>
<input type="text" name="firstname"><br>
Ім'я:<br>
<input type="text" name="lastname">
<br>
<input type="radio" name="gender" checked> Чоловік<br>
<input type="radio" name="gender" > Жінка<br>
<input type="radio" name="gender" > Інше <br>
<input type="submit" value="Відправити">
</fieldset>
<br>
<fieldset>
<legend>Трішки про Вас</legend>
<p>Оберіть автомобіль, який би Ви придбали?</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<p>Які страви Вам до вподоби?</p>
<input type="checkbox" name="vehicle1" > Борщ<br>
<input type="checkbox" name="vehicle2" > Шашлики <br>
<input type="checkbox" name="vehicle2" > Пельмені <br>
<p>Залиште свої коментарі</p> <br>
<textarea> </textarea> <br>
</fieldset>
</form>
</body>
</html>
Вигляд форми у браузері
Домашнє завдання
1. Записати основні визначення уроку у робочий зошит.
2. За поданим вище зразком створити власну форму. Надіслати створену форму вчителеві.
Рефлексія від 3 учнів
Сподобався:
0
Так: 3
Ні: 0
Зрозумілий:
0
Так: 3
Ні: 0
Потрібні роз'яснення:
0
Ні: 3
Так: 0