Практичні завдання для самостійного вивчення HTML.
Любомир Іваницький

8 урок


Інтерактивні елементи управління.
1.Тег <INPUT> в залежності від використаного атрибута type, створюється відповідний тип інтерактивного елементу:
- <input type="text"> текстове поле для вводу тексту; Спробуй введи
- <input type="password">текстове поле для вводу паролю; Спробуй введи
- <input type="number">текстове поле для вводу та вибору стрілочками номера ; Спробуй введи
- <input type="radio">перемикач; Спробуй зміни
- <input type="checkbox"Head>прапорець; Спробуй зміни

Перед інтерактивними елементами рекомендується використовувати тег label - мітка, який пов'язує текст і поле введення.
Наприклад.
<label>Email</label>
<input type="email">



Завдання 1.
Створіть нову Web-сторінку input.html. В цій сторінці використовуючи вказані вище теги створіть форму для вводу:
прізвища(text), паролю(password), кількості дітей(number), чоловік чи жінка(checkbox)- прапорець. Заміжний чи не заміжній обирається перемикачем.

2.Тег текстовий редактор <textarea> </textarea>:
Наприклад.
<textarea rows="10" cols="45"> Заповніть автобіографію</textarea>
Атрибути rows="10" та cols="45" використовують для задання ширини(стовпці) і висоти(рядки) в символах.


Завдання 2.
Добавте до сторінки input.html, поле автобіографія, з шириною 20 і висотою 45.

3.Тег поле зі списком <select> </select>:
Код для цього тегу внизу.
<select>
  <option>січень</option>
  <option>лютий</option>
  <option>березень</option>
  <option>квітень</option>
  <option>травень</option>
  <option>червень</option>
  <option>липень</option>
  <option>серпень</option>
  <option>вересень</option>
  <option>жовтень</option>
  <option>листопад</option>
  <option>грудень</option>
</select>


Якщо додати атрибут multiple, можна надати можливість вибрати декілька варіантів:


Завдання 3.
Добавте до сторінки input.html, поле вибору поточного місяця.

Завдання 4.
- Створіть нову Web-сторінку privat.html за таким зразком.
Малюнок емблеми приват банку вирізати в Paint і вставити в форму вводу, як файл зображення.
Повернутись на початок сторінки