понеділок, 16 березня 2026 р.

Створіть просту вебформу "Анкета учня", у якій користувач може ввести свої дані

 


Створення простої вебформи «Анкета учня»

Мета роботи

Навчитися створювати прості вебформи за допомогою HTML, оформлювати їх за допомогою CSS та використовувати JavaScript для зміни елементів сторінки.


Завдання

Створіть просту вебформу «Анкета учня», у якій користувач може ввести свої дані.

У формі повинні бути:

  1. Заголовок сторінки «Анкета учня» у папці Anketa_Ivan

  2. Поле для введення Імені

  3. Поле для введення Прізвища

  4. Поле для введення Класу

  5. Вибір улюбленого предмета (випадаючий список)

  6. Поле коментар

  7. Кнопка «Надіслати»

  8. Вибір статі (радіокнопки)

  9. Після вибору статі повинно змінюватися зображення

За замовчуванням повинно відображатися стандартне зображення.

HTML код (index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Анкета учня</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<h1>Анкета учня</h1>

<form>

<label>Ім'я:</label><br>
<input type="text"><br><br>

<label>Прізвище:</label><br>
<input type="text"><br><br>

<label>Клас:</label><br>
<input type="number"><br><br>

<label>Улюблений предмет:</label><br>
<select>
<option>Інформатика</option>
<option>Математика</option>
<option>Історія</option>
<option>Англійська мова</option>
</select>

<br><br>

<label>Коментар:</label><br>
<textarea></textarea>

<br><br>

<button>Надіслати</button>

</form>

<br>

<form>

<p>Оберіть стать:</p>

<input type="radio" name="gender" onclick="showImage('male')"> Чоловіча<br>

<input type="radio" name="gender" onclick="showImage('female')"> Жіноча<br>

<input type="radio" name="gender" onclick="showImage('other')"> Інше

</form>

<br>

<img id="photo" src="https://prodigits.co.uk/pthumbs/screensavers/down/fun/animals_lulrz6zt.gif">

<script>

function showImage(g){

if(g=="male"){
document.getElementById("photo").src="https://png.pngtree.com/png-vector/20240913/ourmid/pngtree-cartoon-pig-png-image_12930203.png";
}

if(g=="female"){
document.getElementById("photo").src="https://png.pngtree.com/png-clipart/20240228/original/pngtree-pig-head-valentine-png-image_14444543.png";
}

if(g=="other"){
document.getElementById("photo").src="https://prodigits.co.uk/pthumbs/screensavers/down/fun/animals_lulrz6zt.gif";
}

}

</script>

</body>
</html>

CSS код (style.css)

body {
font-family: Arial;
background-color: #f2f2f2;
text-align: center;
}

form {
background-color: white;
width: 300px;
margin: auto;
padding: 20px;
border-radius: 10px;
}

input, select, textarea {
width: 90%;
padding: 5px;
margin-top: 5px;
}

button {
background-color: green;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover{
background-color: darkgreen;
}

img{
width:200px;
height:200px;
object-fit:contain;
margin-top:20px;
}

Додаткове завдання (10–12 балів)

  1. Додати поле Електронна пошта

  2. Додати вибір статі (радіокнопки)

  3. Змінити колір кнопки при наведенні курсора

  4. Зробити обов'язкові поля для введення



Вказівки до виконання додаткового завдання (10–12 балів)

1. Додати поле Електронна пошта

У формі після поля Прізвище або Клас додайте нове поле введення.

Використайте тип email, щоб браузер перевіряв правильність електронної адреси.

<label>Електронна пошта:</label><br>
<input type="email"><br><br>

2. Додати вибір статі (радіокнопки)

Радіокнопки дозволяють вибрати тільки один варіант із кількох.

Додайте у форму такий код:

<p>Оберіть стать:</p>

<input type="radio" name="gender"> Чоловіча<br>

<input type="radio" name="gender"> Жіноча<br>

<input type="radio" name="gender"> Інше

Важливо:
усі радіокнопки повинні мати однаковий атрибут name, щоб можна було вибрати лише один варіант.

3. Змінити колір кнопки при наведенні курсора

У файлі style.css використайте псевдоклас :hover.

Додайте такий код:

button:hover {
background-color: darkgreen;
}

Коли користувач наведе курсор на кнопку, її колір зміниться.

4. Зробити обов'язкові поля для введення

Щоб користувач не міг надіслати форму без заповнення даних, використовується атрибут required.

Приклад:

<input type="text" required>

Додайте required до основних полів:

<input type="text" required>
<input type="email" required>
<input type="number" required>
<textarea required></textarea>

Тепер браузер не дозволить відправити форму, поки поля не будуть заповнені.

✅ Після виконання додаткового завдання форма повинна:

  • містити поле електронної пошти

  • дозволяти вибір статі

  • змінювати колір кнопки при наведенні

  • вимагати обов'язкове заповнення полів

Опубліковано о
Мітки:

Немає коментарів:

Дописати коментар

Підписатися на: Дописати коментарі (Atom)