How to create registration form in HTML?

registration form in html

What is HTML form?

A HTML form or web form is commonly used to store information from users on a web server by using different form elements like text fields, checkboxes, radio buttons, submit buttons etc.

Where HTML forms are used?

Nowadays forms are important elements of every website. From creating login page, registration page to get user contact details, HTML registration forms can be used in number of ways to collect users information in order to achieve different purposed.

To create a form in HTML <form> tag is used.

syntax

<form>
 .
form elemets
.
</form>

HTML form elements

form elements can be defined as the controls which are used in a form for collecting different user inputs like name, email, phone no, password etc.

Following are the type of form elements:

Input element

The input element is the most important element as it allows you to specify various types of user input fields depending on the type attribute.

Example

Type

<input type=”text”>

<input type=”password”>

<input type=”submit”>

Description

Defines a text input field

Defines a password input field

Defines a submit button for form submission

Text Inputs

<input type=”text”> defines a input field for text input.

Example

<form>
Firstname:<br>
<input type="text" name="firstname" placeholder="enter first name"><br>
Lastname:<br>
<input type="text" name="lastname" placeholder="enter last name">
</form>

Password Input

<input type=”password”> defines a input field for password(characters are masked).

Submit Button

<input type=”submit”> defines a button for submitting form data to form-handler.
Form-handler is typically a server page with a script for processing input data.It is specified in form’s action attribute.

example
<form>
Name:<br>
<input type="text" name="firstname" placeholder="enter first name"><br>

Password:<br>
<input type="password" name="pass" placeholder="enter password"><br>
<input type="submit" value="submit">
</form>

Action Attribute

The action attribute defines location where the form data will be sent on button click.

Syntax

<form action ="url">

The form action attribute can take two type of values

  1. Absolute Url – The url which points out to some another website link.
  2. Relative Url -Url which points to some file within a webpage.

Example

<form action="test.php">
Name:<br>
<input type="text" name="firstname" placeholder="enter first name"><br>

Password:<br>
<input type="password" name="pass" placeholder="enter password"><br><br>
<input type="submit" value="submit">
</form>

Above example will send form data to test.php file on click of submit button

Source Code for HTML Registration Form

<html>
<head>
<title>HTML Registration Form</title>
</head>
<body>
<form method="" action="">
<table border="1" align="center" width="400" bgcolor="#CCCCCC" >
<caption><strong>Registration form</strong></caption>

<tr>
<th>first Name</th>
<td><input type="text" placeholder="enter your first name"/></td>
</tr>
<tr>
<th>Last Name</th>
<td><input type="text" placeholder="enter last name"/></td>
</tr>
<tr>
<th>Enter Password</th>
<td><input type="password" placeholder="enter password"/></td>
</tr>
<tr>
<th>Confirm Password</th>
<td><input type="password" placeholder="confirm password"/></td>
</tr>
<tr>
<th>Enter Email</th>
<td><input type="email" placeholder="enter email"/></td>
</tr>
<tr>
<th>Enter Mobile Number</th>
<td><input type="number" placeholder="mobile number"/></td>
</tr>
<tr>
<th>Enter Address</th>
<td><textarea rows="8" cols="20" placeholder="address"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>
</td>
</tr>

<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your country</option>
<option value="1">India</option>
<option value="2">Nepal</option>
</select>
</td>
</tr>

<tr>
<td colspan="3" align="center"><input type="submit" value="Save My Data"/>
</td>
</tr>
</table>
</form>
</body>
</html>

2 thoughts on “How to create registration form in HTML?

Leave a Reply

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