<form>
<label for="name">Name: </label>
<input type="text" id="name" name="name" placeholder="Monty">
<br>
<label for="name">Company Email Address: </label>
<input type="email" id="email" name="email" placeholder="joe@email.com">
<br>
<label for="name">Age: </label>
<input type="number" id="age" name="age" min="10" max="80" placeholder="30">
<br>
<label for="name">Favorite Website: </label>
<input type="url" id="website" name="website" placeholder="https://code.tutsplus.com">
</form>
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
font-size: 1.25rem;
}
form, p {
margin: 20px;
}
p.note {
font-size: 1rem;
color: red;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
margin-left: 20px;
padding: 4px;
margin-bottom: 20px;
font-family: 'Lato';
width: 300px;
}
label {
width: 250px;
display: inline-block;
}
This Pen doesn't use any external JavaScript resources.