<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;
}

External CSS

  1. https://codepen.io/tutsplus/pen/vYrpEwd.css

External JavaScript

This Pen doesn't use any external JavaScript resources.