<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Форми: теги та їх атрибути</title>
</head>
<body>
<h1>Урок "Форми": теги та їх атрибути</h1>
<h2>Розкажіть трішки про себе</h2>
<p>Спробуйте створити подібну форму.</p>
<form>
<fieldset>
<legend>Коротко про себе</legend>
Ім'я:<br>
<input type="text" name="name"><br><br>
Прізвище:<br>
<input type="text" name="surname"><br><br>
Стать:<br>
<input type="radio" name="gender" value="male"> Чоловіча
<input type="radio" name="gender" value="female"> Жіноча
<br><br>
Вік:
<input type="number" name="age" min="1" max="120"> років
</fieldset>
<br>
<fieldset>
<legend>Детальніше про себе</legend>
<input type="radio" name="person" value="man"> Молодий чоловік<br>
<input type="radio" name="person" value="girl"> Дівчина
<br><br>
Дата народження:
<input type="date" name="birth"><br><br>
Сімейний стан:
<input type="text" name="family"><br><br>
Соціальний статус:
<input type="text" name="status"><br><br>
Місце проживання:
<input type="text" name="city">
</fieldset>
<br>
<fieldset>
<legend>Що Ви зазвичай робите на вихідних</legend>
<input type="checkbox" name="weekend" value="sleep"> Гуляю<br>
<input type="checkbox" name="weekend" value="fish"> Ходжу на рибалку<br>
<input type="checkbox" name="weekend" value="games"> Граю в ігри
</fieldset>
<br>
<p>Розповість про форми в книзі присвяченій HTML:</p>
<select>
<option>Сайт</option>
<option>Книга</option>
<option>Відео</option>
</select>
<br><br>
<p>Скільки книг Ви прочитали за своє життя:</p>
<input type="radio" name="books"> 0-10<br>
<input type="radio" name="books"> 11-20<br>
<input type="radio" name="books"> 21-50<br>
<input type="radio" name="books"> 50+
<br><br>
<p>Ваші коментарі</p>
<textarea rows="4" cols="30"></textarea>
<br><br>
<select size="3">
<option>Перша позиція</option>
<option>Друга позиція</option>
<option>Третя позиція</option>
</select>
<br><br>
<fieldset>
<legend>І на завершення</legend>
Email:<br><br>
<input type="email" name="email">
</fieldset>
<br>
<input type="submit" value="Відправити">
</form>
</body>
</html>
