Introduction to Registration Form in HTML
HTML Forms can be seen everywhere today in all kinds of sites. These HTML forms are used to collect data or information or feedback etc., from the visitors of your site. There are Log In Forms, Registrations Forms, Contact Us Forms, among others.
HTML Forms are used to obtain kinds of user details and inputs, such as name, age, and email address. The forms used in the websites are formed with the help of different special elements known as ‘controls’ in HTML, for example, text areas, radio buttons, checkboxes, submit buttons, etc. While using such forms, users or visitors enter the information or data by modifying these controls, for example, by entering texts or performing selection on specific items, etc. and then by submitting the form. When the form is duly filled, the submitted form adds data, or sends it or redirects it to another page or could also save the details in a database.
How to Create?
HTML Forms are easy to create. As all other HTML elements, to create a form we need an opening form tag (<form>) and a closing form tag (</form>), which in turn will use other attributes like <fieldset> elements, <legend> elements, <input> elements among others to create a fully functional form. of course, we have to use CSS for look and feel.
Following is a basic syntax for an HTML Form.
<form action = "URL" method = "GET or POST"> form elements like submit or reset buttons, input, text area etc. </form>
Example of Registration Form in HTML
Let’s see an example code excerpt for a simple HTML form. The form shown below is a simple Log In Form and has minimal control elements.
<form name="regForm"> <label>Username: <input type="text" id="username"></label> <label>Password: <input type="password" id="pwd"></label> <input type="submit" class="login" value="Log In" onclick="validation()" formtarget="_blank"> </form>
Above is the output we receive when the code is executed. After entering the Username and Password, we submit the form and the following welcome message is displayed.
The above-discussed form is a simple login form which is accepting only two values, username and password and is submitted. Here we are simply printing the values, but normally in the processing part, one can compare ‘log in’ details with the saved values in a database and show a ‘successful login’ message.
A registration form, however, is something that accepts a variety of data or information, like name, user name, password, date of birth, email address, among others, and this information is then subjected to processing that might include a display of the data on the next page or saving of data into a database and performing a successful registration.
How to Create a Registration HTML Form?
Let’s see the creation of the Registration Form, step by step.
Step 1: Create and add HTML form elements and their associated elements. Here we will create nested form-related or associated elements inside opening and closing Form tags. You can also ‘add action’ attribute to your <form> tag.
Following is the HTML code excerpt for our form.
<form> <div class="container"> <h1>Register Here</h1> <p>Please fill in the details to create an account with us.</p> <hr> <label for="email"><b>Enter Email</b></label> <input type="text" placeholder="Enter Email" name="email"> <label for="pwd"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="pwd"> <label for="confirm"><b>Confirm Password</b></label> <input type="password" placeholder="Confirm Password" name="confirm"> <hr> <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> <button type="submit" class="registerbtn"><strong>Register</strong></button> </div> <div class="container signin"> <p>Already have an account? <a href="#">Sign in</a>.</p> </div> </form>
Step 2: Add CSS for look and feel. This step is optional since without adding CSS as well, your form will register equally successfully. (Optional)
So for our registration form, I added a bit of the magic of CSS. When the above HTML code is executed, we see the following form displayed in our browser.
Registration Form – Validations
The above-discussed registration form is a simple registration form where there are no rules, that is, validations. Some might say, registration forms are incomplete without validations.
Now validations are a ‘set of rules or instructions that a programmer sets for the user or the visitor of your web site. For example, a username should be of 5 to 8 characters, or Password can not have a special character and so on.
Following is an example of a registration form with some validations. A keyword, ‘required’ used with an element, specifies that that element is necessary to be filled. We will add this keyword to our text field, ‘Email’ and see the result below;
<input type="text" placeholder="Enter Email" name="email" required>
Let’s see another example with some more types of form associated elements and attributes.
Check the CSS used in code:
The screenshot on your right is the result of the above HTML code with the help of CSS. The registration form is different from other forms since they collect data from the user or visitor and use validations to check if the data is correct.
This is a guide to the Registration Form in HTML. Here we discuss the introduction and how to create a registration html form along with different examples and its code implementation. You may also have a look at the following articles to learn more –