Student Registration Form in HTML with Validation

The world is changing rapidly due to the modern technology of the web. Nowadays, most of the life tasks we are doing via the internet. Whether it is about applying for a job or online course, we need to register on a specific website. Every webmaster tries to develop user-friendly signup forms whether he is creating an e-commerce website or educational website. So, today I’m going to build a student registration form in HTML with form fields validation.

Generally, the form validation process requires JavaScript to validate form fields before submitting it. But, what will be your reaction if I say that it’s quite possible without JavaScript? Off course! it’s possible using HTML5 built-in validation. Not only this, but you can also display (valid & invalid entries) messages to users using pure CSS.

As you have seen on the demo page (browse demo page if you didn’t check), this student registration form is quite simple and straightforward. However, you can add more input fields as you need. Similarly, you can fully customize it with CSS according to your template. So, let’s start with the HTML coding.

HTML for Student Registration Form

The following is the complete HTML structure for the student registration form. You can add more input fields in it, with the mentioned class (and ids structure). I just left the form action attribute blank, also add it where you want to submit (or handle) form data.

<form class="reg-form">
   <p class="helper-text">* denotes a required field</p>
   <div class="field-row">
      <label class="form-label" for="firstName">First name</label>
      <input type="text" id="firstName" class="field text-field first-name-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label cf" for="lastName">Last name</label>
      <input type="text" id="lastName" class="field text-field last-name-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label" for="initials">Father Name</label>
      <input type="text" id="initials" class="field text-field initials-field">
   </div>
   <div class="field-row">
      <label class="form-label" for="dateOfBirth">Date of birth</label>
      <input type="date" id="dateOfBirth" class="field date-field dob-field" min="1900-01-01" max="2015-09-18"  required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label" for="tel">Tel</label>
      <input type="tel" id="tel" class="field text-field tel-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label" for="hs">High School Name</label>
      <input type="text" id="hs" class="field text-field hs-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label" for="tel">Permanent Address</label>
      <input type="tel" id="tel" class="field text-field address-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label">Your Level</label>
      <select class="form-dropdown field">
         <option value="1st Year"> 1st Year </option>
         <option value="2nd Year"> 2nd Year </option>
         <option value="3rd Year"> 3rd Year </option>
         <option value="4th Year"> 4th Year </option>
         <option value="5th Year"> 5th Year </option>
      </select>
   </div>
   <div class="field-row">
      <label class="form-label" for="email">Email</label>
      <input type="email" id="email" class="field text-field email-field" required>
      <span class="message"></span>
   </div>
   <div class="field-row">
      <label class="form-label"> Degree Program</label>
      <select class="field form-dropdown">
         <option value="BS in Pre-Med Physics"> BS in Pre-Med Physics </option>
         <option value="BS in Physics minor in Economics"> BS in Physics minor in Economics </option>
         <option value="BS in Physics minor in Finance"> BS in Physics minor in Finance </option>
         <option value="BS in Physics with specialization in Material Science"> BS in Physics with specialization in Material Science </option>
         <option value="BS in Physics with specialization in Medical Instrumentation"> BS in Physics with specialization in Medical Instrumentation </option>
         <option value="MS in Physics"> MS in Physics </option>
         <option value="PhD in Physics"> PhD in Physics </option>
      </select>
   </div>
   <div class="field-row">
      <label class="form-label"></label>
      <button class="form-button">Register</button>
   </div>
</form>

In the above HTML, select dropdowns are optional. However, you can update their values according to your course/requirements. Besides this, you can also add a stylish radio button for policy agreement in your student registration form.

CSS Styles & Form Validation

Now, its time to style the registration form using CSS. The following code snippet defines the basic layout of the form. If you want to customize the form design, you can set the custom background color and box-shadow.

.reg-form {
  background: #fff;
  box-sizing: border-box;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.4);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 15px auto;
  padding: 15px;
  width: 600px;
}

.form-heading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  margin: 5px;
}

.helper-text {
  font-size: 12px;
  margin-botom: 10px;
  text-align: right;
}

The following CSS defines the styles for form row and fields.

.field-row {
  position: relative;
  width: 100%;
}

.form-label {
  display: inline-block;
  font-size: 16px;
  margin: 0 5px 5px 0;
  text-align: right;
  width: 100px;
}

.field {
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  padding: 10px;
  margin-bottom: 15px;
  width: 240px;
}
.field.field-short {
  width: 70px;
}

Mark required field with * and basic style for required message. If you want to set a custom color for * symbol, just add a new color property just after the content.

.message {
  display: inline-block;
}

:required + .message::before {
  content: "* ";
}

Now, differentiate valid and invalid fields with border colors using CSS valid and invalid selector.

.text-field:focus:required:valid {
  outline: green solid 2px;
}
.text-field:focus:required:invalid {
  outline: orange solid 2px;
}
.date-field:focus:in-range {
  outline: green solid 2px;
}
.date-field:focus:out-of-range {
  outline: orange solid 2px;
}

.website-field:focus:valid {
  outline: green solid 2px;
}
.website-field:focus:invalid {
  outline: orange solid 2px;
}

Define some CSS styles for the signup button. If you want to customize it, you can change its background, padding, and font-size, etc.

.form-button {
  background: linear-gradient(180deg, #808080, #2a2a2a);
  border: none;
  border-radius: 0;
  color: white;
  display: inline-block;
  padding: 10px;
  font-size: 16px;
}

Finally, add field validation messages (to show the users) using focus pseudo-selector. If you have added any new field in the registration form, you can also validate it using the same technique. Just target your new input (with its id or class) and :focus:invalid + .message::after {}.

.first-name-field:focus:invalid + .message::after {
  color: orange;
  content: "Required your first name";
}

.last-name-field:focus:invalid + .message::after {
  color: orange;
  content: "Required your last name";
}

.dob-field:focus:out-of-range + .message::after {
  color: orange;
  content: "Date is out of range";
}

.tel-field:focus:invalid + .message::after {
  color: orange;
  content: "Required telephone number";
}

.email-field:focus:invalid + .message::after {
  color: orange;
  content: "Required email address";
}
.hs-field:focus:invalid + .message::after {
  color: orange;
  content: "Required high school name";
}

.address-field:focus:invalid + .message::after {
  color: orange;
  content: "Required permanent address";
}

.website-field:focus:invalid + .message::after {
  color: orange;
  content: "Required valid URL";
}

I hope you have completed your student registration form with the help of this HTML form validation tutorial. If you have any questions about the signup form, feel free to comment below.