form elements
Элементы форм
Пример<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms</title>
<style>
body {
font-family: Arial;
font-size:12px;
user-select: none;
}
[type="color"] {
height:30px; margin:5px;
}
legend {
color:#990088;
font-weight:bold;
display:inline-block;
margin-bottom:10px;
border: solid 1px;
border-radius: 3px;
padding: 4px 8px;
}
fieldset {
border:inset 1px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
padding-bottom:10px;
float: left;
min-width: 200px;
width: max-content;
margin: 20px;
}
fieldset *:not([type="radio"]):not([type="checkbox"]) {
display: block;
margin: 10px;
padding: 10px;
float: none;
border:inset 1px;
}
</style>
</head>
<body>
<h1>Элементы форм</h1>
<fieldset>
<legend>Дата и время</legend>
Дата: <input type="date"/><br/>
Время: <input type="time"/>
<br/><br/>
</fieldset>
<fieldset>
<legend>Выбор животного</legend>
<!-- ==================== S E L E C T ======================= -->
Животное:
<select>
<optgroup label="Животные Африки">
<option value="Крокодил">Крокодил</option>
<option value="Бегемот">Бегемот</option>
<option value="Жираф">Жираф</option>
</optgroup>
<optgroup label="Домашние животные">
<option value="Собака">Собака</option>
<option value="Лошадь">Лошадь</option>
<option value="Корова">Корова</option>
</optgroup>
</select>
<br/>
<!-- ============= П Е Р Е К Л Ю Ч А Т Е Л И =============== -->
<input type="radio" name="animal" value="Леопард"/>Леопард
<input type="radio" name="animal" value="Пума"/>Пума
<input type="radio" name="animal" value="Ягуар"/>Ягуар
</fieldset>
<fieldset>
<legend>Выбор страны</legend>
<!-- ================ C H E C K B O X =================== -->
<input type="checkbox" name="country" value="Украина"/>Украина
<input type="checkbox" name="country" value="Дания"/>Дания
<input type="checkbox" name="country" value="Шотландия"/>Шотландия
</fieldset>
<fieldset>
<legend>Выбор цвета</legend>
<!-- ==================== C O L O R ======================= -->
Фон: <input type="color" value="#ffff00"/>
Текст: <input type="color" value="#990055"/>
</fieldset>
<fieldset>
<legend>Результат</legend>
<!-- ==================== D E M O ======================= -->
<br/><br/>Результат: <input type="text" id="demo" />
<textarea rows="4" cols="70" id="demo_txt"></textarea>
<!-- ================== Progress bar =================== -->
<progress value="30" max="100" onclick="this.value++;"></progress>
</fieldset>
</body>
</html>
Всемирная паутина
Пример
Flexbox Froggy
