onlyforbopi
9/26/2018 - 4:19 PM
HTML.CSS.JS.Forms.good practices.v1
HTML.CSS.JS.Forms.good practices.v1
fieldset {
padding:10px;
border-radius:10px;
}
label {
display:inline-block;
margin-bottom:10px;
}
input {
float:right;
margin-right:70px;
width:150px;
}
input:invalid {
background-color:pink;
}
input:valid {
background-color:lightgreen;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form example</title>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>Personal informations</legend>
<label for="firstName">First name:</label>
<input type="text" id="firstName" required name="firstName">
<br>
<label for="lastName">Last name:</label>
<input type="text" id="lastName" required name="lastName">
<br>
<label for="email">Email:</label>
<input type="email" id="email" required name="email">
<br>
<label for="age">Age:</label>
<input type="number" min=0 max=120 step=5 id="age" required name="age">
<br>
<label for="date">Birth date:</label>
<input type="date" id="date" required name="date">
</fieldset>
<button>Submit form</button>
</form>
</body>
</html>