<p class="note">Fields marked with * are required.</p>
<form>
<label for="name">Name: *</label>
<input type="text" id="name" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required>
<br>
<label for="name">Company Email Address: *</label>
<input type="email" id="email" name="email" placeholder="joe@company.com" pattern=".+@company\.com" required>
<br>
<label for="name">Age: </label>
<input type="number" id="age" name="age" min="10" max="80" placeholder="30">
<br>
<label for="name">Favorite Tuts+ Website: *</label>
<input type="url" id="website" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required>
</form>
form, p {
margin: 20px;
}
p.note {
font-size: .75rem;
color: red;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
margin-left: 20px;
padding: 6px 4px;
margin-bottom: 20px;
width: 300px;
}
label {
width: 250px;
display: inline-block;
}
This Pen doesn't use any external JavaScript resources.