Registration Form Example Using HTML CSS AND JavaScript

HTML CODE

<body>
    <h1 style="text-align: center;">REGISTRATION FORM</h1>
    <form name="RegForm" action="/submit.php" 
          onsubmit="return REGFORM() method="post">
        <p>Name: <input type="text" 
                        size="55" name="Name" /></p>
        <br />
        <p>Address: <input type="text" 
                           size="55" name="Address" /></p>
        <br />
        <p>E-mail Address: <input type="text" 
                               size="55" name="EMail" /></p>
        <br />
        <p>Password: <input type="text" 
                            size="55" name="Password" /></p>
        <br />
        <p>MobileNo: <input type="text" 
                             size="55" name="MobileNo" /></p>
        <br />
  
        <p>
            SELECT YOUR COURSE
            <select type="text" value="" name="Subject">
                <option>BSC</option>
                <option>MBA</option>
                <option>MSC</option>
                <option>MCA</option>
                
            </select>
        </p>
        <br />
        <br />
        <p>Comments: <textarea cols="55" 
                               name="Comment"> </textarea></p>
        <p>
            <input type="submit" 
                   value="send" name="Submit" />
            <input type="reset" 
                   value="Reset" name="Reset" />
        </p>
    </form>
</body>

CSS

<style>
div { 
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
   
form {   
    margin: 0 auto;
    width: 600px;
}</style>

JavaScript

<script>
    function REGISTRATIONFORM() {
        var name = document.forms["RegForm"]["Name"];
        var email = document.forms["RegForm"]["EMail"];
        var phone = document.forms["RegForm"]["MobileNo"];
        var what = document.forms["RegForm"]["Subject"];
        var password = document.forms["RegForm"]["Password"];
        var address = document.forms["RegForm"]["Address"];
  
        if (name.value == "") {
            window.alert("Please enter your name.");
            name.focus();
            return false;
        }
  
        if (address.value == "") {
            window.alert("Please enter your address.");
            address.focus();
            return false;
        }
  
        if (email.value == "") {
            window.alert(
              "Please enter a valid e-mail address.");
            email.focus();
            return false;
        }
  
        if (phone.value == "") {
            window.alert(
              "Please enter your mobile number.");
            phone.focus();
            return false;
        }
  
        if (password.value == "") {
            window.alert("Please enter your password");
            password.focus();
            return false;
        }
  
        if (what.selectedIndex < 1) {
            alert("Please enter your course.");
            what.focus();
            return false;
        }
  
        return true;
    }
</script>

Output:


Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart