Depot43-Unterlagen - Form Float Input

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Form Float Input</title>
	<style>
	body {
		font-family: sans-serif;
	}
	form {
		max-width: 400px;
		margin: auto;
	}
	div {
		height:60px;
	}
	label {
		color:grey;
		display:block;
	}
	input {
		width:100%;
		border: none;
		border-bottom: 2px solid grey;
		margin-bottom:24px;
		padding:8px;
		margin:2px;
		height:14px;
		width:300px;
		background:white;
		transition: height 1s ease-in-out;
	}
	input:focus {
		border-color:transparent;
		border-bottom: 2px solid red;
		height:20px;
	}
	input:focus + label {
		color:red;
	}
	</style>
</head>
<body>
	<form name="FloatInput">
		<div>
			<input id="prename" type="text"><label id="prename">Vorname</label>
		</div>
		<div>
			<input id="surname" type="text"><label id="surname">Nachname</label>
		</div>
		<div>
			<input id="email" type="email"><label id="email">Email Addresse</label>
		</div>
		<div>
			<input id="phone" type="tel"><label id="phone">Telefonnummer</label>
		</div>
		<div>
			<input id="street" type="text"><label id="street">Strasse, Nummer</label>
		</div>
		<div>
			<input id="place" type="text"><label id="place">PLZ, Ort</label>
		</div>
	</form>
</body>
</html>


 

            

Hinweis

Animiert ist das Input-Textfeld. Es liegt innnerhalb eine DIV-Elements mit fixer höhe, anderfalls würde sich bei jeder Animation das ganze Formular bewegen.

transition: height 1s ease-in-out;

Das Label wird ohne Animation auf Rot gestellt, wenn das dazugehörende Input-Textfeld im Fokus ist.