Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Form</title>
	<style>
	html {
		font: 16px/1.4 Sans-Serif;
	}
	form input {
		border: 2px solid gray;
		margin:2px;
		padding:6px;
		transition: background 0.8s;
	}
	label {
		padding:12px;
		transition: color 0.8s;
	}
		form input:focus {
			background:red;
			color:white;
		}
		form input:focus + label {
			color:red;
		}
	</style>
</head>
<body>
	<form>
		<div>
			<input id="name" name="name" type="text"><label for="name">Vorname</label>
		</div>
		<div>
			<input id="surname" name="suename"><label for="surname">Nachname</label>
		</div>
		<div>
			<input id="phone" name="phone" type="tel"><label for="phone">Telefon</label>
		</div>
		<div>
			<input id="colors" name="colors" type="radio"><label for="colors">Blau</label>
			<input id="colors" name="colors" type="radio"><label for="colors">Rot</label>
			<input id="colors" name="colors" type="radio"><label for="colors">Gelb</label>
		</div>
	</form>
</body>
</html>


 

            

Hinweis

Mit der CSS-Eigenschaft "transition" lassen sich Formulare einfach animieren. Beim Textfeld wird die Hintergrundfarbe animiert:

transition: background 0.8s;

Beim Label wird die Textfarbe animiert:

transition: color 0.8s;

Aktiviert wird die Animation mit der Pseudoeigenschaft :focus

form input:focus {
    background:red;
 }
 form input:focus + label {
    color:red;
 }