programminghead Logo

Registration Form Design in HTML and CSS with Code

Introduction :

A registration form Includes a List of Fields where user can Input data and Submit to Specified Location (Like MySQL Database).
A registration form can be used in Websites (for User registration), Schools (for Student Registration), Big Companies (For Accepting Resume, Job Application ETC) and in So many Other Industries.
Let's Begin our Tutorial (Registration Form Design in HTML and CSS with Code).

Registration form in HTML with CSS Source Code


<html>
  <head>
    <style>
      /* Form Styling Using CSS */
      form{
        width:350px;
        background-color:aquamarine;
        text-align:center;
        padding: 10px 0;
        margin:0 auto;
      }
      input{
        border:0;
        width:300px;
        height:40px;
        margin:0 auto;
        text-indent:10px;
      }
      p{
        text-align:left;
        text-indent:5%;
      }
    </style>
  </head>
  <body>
    <!-- Form Layout Using HTML -->
    <form action="target.php" method="POST">

      <p>First Name </p>
      <input type="text" name="firstN"/>
      
      <p>Last Name </p>
      <input type="text" name="lastN"/>
      
      <p>Email </p>
      <input type="text" name="Email"/>
      
      <p>Phone Number</p>
      <input type="text" name="Phone"/>
      
      <p>Click Submit</p>
      <input type="submit" />

    </form>

  </body>
</html>

Results

First Name

Last Name

Email

Phone Number


Click Submit


Login form HTML code

Creating a Login Form in HTML is exactly the same as creating a Normal HTML Form. We just need to Create two Input fields (One for Username and one for Password) where user can Insert login Data and one Log in Button to Submit that Login Data (Username and Password) {Please note: In this [Login and Sign Up Form] Examples, we are only going to Create an Interface of a Login Form. Which will not act exactly like a login Form (Where users can Log in and Visit there Profile). Because HTML and CSS Can Create Interfaces users to Interact. The log in Data Submissions, Verification and Password Matching Processes are done by SOme programming Languages like PHP and JQuery with the help of SQL Database.}

Login form HTML code [Example]


<html>
  <head>
    <style>
      /* Form Styling Using CSS */
      form{
        width:350px;
        background-color:aquamarine;
        text-align:center;
        padding: 10px 0;
        margin:0 auto;
      }
      input{
        border:0;
        width:300px;
        height:40px;
        margin:0 auto;
        text-indent:10px;
      }
      p{
        text-align:left;
        text-indent:5%;
      }
    </style>
  </head>
  <body>
    <!-- Form Layout Using HTML -->
    <form action="target.php" method="POST">

      <p>Username </p>
      <input type="text" name="UserName"/>
      
      <p>Password </p>
      <input type="password" name="Password"/>
      
      <p>Click Login</p>
      <input type="submit" value="Login" />

    </form>

  </body>
</html>

Results

Username

Password

Click Login


Sign Up form HTML code

For creating a Sign-Up form in HTML we need to use different HTML Forms ELements like Input Feilds, Text Feilds, Radio Buttons, Checkboxes, Dropdown Data Feilds and Submit Buttons(For Getting User Data like Name, Password, Hobby, age ETC).

Sign Up form HTML code [Example]


<html>
  <head>
    <style>
      /* Form Styling Using CSS */
      form{
        width:350px;
        background-color:aquamarine;
        text-align:center;
        padding: 10px 0;
        margin:0 auto;
      }
      input{
        border:0;
        width:300px;
        height:40px;
        margin:0 auto;
        text-indent:10px;
      }
      p{
        text-align:left;
        text-indent:5%;
      }
    </style>
  </head>
  <body>
    <!-- Form Layout Using HTML -->
    <form action="target.php" method="POST">

      <p>First Name </p>
      <input type="text" name="firstN"/>
      
      <p>Last Name </p>
      <input type="text" name="lastN"/>
      
      <p>Email </p>
      <input type="text" name="Email"/>
      
      <p>Phone Number</p>
      <input type="text" name="Phone"/>
      
      <p>Click Submit</p>
      <input type="submit" />

    </form>

  </body>
</html>

Results

First Name

Last Name

Email

Phone Number


Click Submit


Student registration form in HTML with css

The Process of Creating a Student Registration form is very Similar to the process of creating a Normal HTML form. Things we need to focus on Input Feild. So we are going to Create a Normal User Registration form with Input Feilds Related to an Student.

CSS responsive registration form

A responsive Registration form will make it easier to Fill the Form Data in Different Devices like PC, Mobile and Tablets. The Benefits of a Responsive Registration form is that it can Change its Layout / Elements according to the Device Width. So user can Easly Fill and Interacts with Forms Elements in Every Screen Resolution. Responsive Registration form in HTML

Student Registration form in HTML with Validation

As we all know that HTML is a Markup Language, not a Programming Language. So it's Impossible to Add a Form Validation Using HTML. That's why we Have to use JavaScript with HTMl. So we can Check user Input Data and Validate that data according to our Requirements.

Student Registration form in HTML with Validation Example:


<html>
  <head>
    <style>
      /* Form Styling Using CSS */
      #form{
        width:350px;
        background-color:aquamarine;
        text-align:center;
        padding: 10px 0;
        margin:0 auto;
      }
      input,select{
        border:0;
        width:300px;
        height:40px;
        margin:0 auto;
        text-indent:10px;
      }
      textarea{
        border:0;
        width:300px;
        margin:0 auto;
        text-indent:10px;
      }
      p{
        text-align:left;
        margin:2% 5%;
      }
      .errorBox{
        color:red;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <!-- Form Layout Using HTML -->
    <div id="form">

      <p>Full Name </p>
      <input type="text" name="firstN" id="name"/>
      <p id="errorname" class="errorBox"></p>

      <p>Email </p>
      <input type="text" name="Email" id="email"/>
      <p id="erroremail" class="errorBox"></p>

      <p>Stream</p>
      <select id="stream">
        <<option>Select Your Stream</option>
        <option>Arts</option>
        <option>Commers</option>
        <option>Science</option>
        <option>Medical</option>
      </select>
      <p id="errorstream" class="errorBox"></p>

      <p>Phone Number</p>
      <input type="number" name="Phone" id="phone"/>
      <p id="errorphone" class="errorBox"></p>

      <p>Address</p>
      <textarea rows="8" cols="80" id="address"></textarea>
      <p id="erroraddress" class="errorBox"></p>

      <p>Click Here</p>
      <input type="button" onclick="validateForm();" Value="Check Validation"/>

    </div>

    <script>
      function validateForm(){
        onlyChar("name");
        mailVal("email");
        streamVal("stream");
        phoneVal("phone");
        addressVal("address");
      }

      function onlyChar(data){
        var validate = /^[A-Za-z\s]+$/;
        var myvalue=document.getElementById(data);
        var myvalue2=document.getElementById("error"+data);
        if(myvalue.value.match(validate))
        {
          myvalue.style.border="2px solid lightgreen";
          myvalue2.innerHTML="";
        }
        else if(myvalue.value==""){
          myvalue.style.border="2px solid red";
          myvalue2.innerHTML="Please Enter your Full Name.";
        }
        else
        {
          myvalue.style.border="2px solid red";
          myvalue2.innerHTML="Special Characters Like $,!,*,&,# and Numbers are Not Allowed";
        }
      }

      function mailVal(data){
        var validate = "@";
        var myvalue=document.getElementById(data);
        var myvalue2=document.getElementById("error"+data);
        if(myvalue.value.includes(validate))
        {
          myvalue.style.border="2px solid lightgreen";
          myvalue2.innerHTML="";
        }
        else if(myvalue.value==""){
        myvalue.style.border="2px solid red";
        myvalue2.innerHTML="Please Enter Your EMail Address.";
        }
        else
        {
          myvalue.style.border="2px solid red";
          myvalue2.innerHTML="Must Include @ in Your Email Address";
        }
      }
        function streamVal(data){
          var myvalue=document.getElementById(data);
          var myvalue2=document.getElementById("error"+data);
          if(myvalue.value!="Select Your Stream")
          {
            myvalue.style.border="2px solid lightgreen";
            myvalue2.innerHTML="";
          }
          else if(myvalue.value=="Select Your Stream"){
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Plese Select Your Stream";
          }
          else{
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Undefined Data, Please Select the Given Data.";
          }
        }
        function phoneVal(data){
          var myvalue=document.getElementById(data);
          var myvalue2=document.getElementById("error"+data);
          if(myvalue.value.length==10)
          {
            myvalue.style.border="2px solid lightgreen";
            myvalue2.innerHTML="";
          }
          else if(myvalue.value==0)
          {
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Please Enter Your Phone Number.";
          }
          else
          {
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Please Enter a Valid Number (Withut Country Code).";
          }
        }

        function addressVal(data){
          var myvalue=document.getElementById(data);
          var myvalue2=document.getElementById("error"+data);
          if(myvalue.value.length>=20)
          {
            myvalue.style.border="2px solid lightgreen";
            myvalue2.innerHTML="";
          }
          else if(myvalue.value.length==0)
          {
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Please Enter your Home Address.";
          }
          else if(myvalue.value.length<20)
          {
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Address is Too Short.";
          }
          else
          {
            myvalue.style.border="2px solid red";
            myvalue2.innerHTML="Something Is Wrong. Please Refresh your Browser.";
          }
        }
    </script>

  </body>
</html>

Results

Full Name

Email

Stream

Phone Number

Address

Click Here


Comments

Sahil

07:14 pm 16/06/2019

Nice. You just Solved My problem

Write to Us

Captcha