To display login and registration forms on a website, it is necessary to include the respective HTML documents multiple times. This guide will illustrate the process of crafting both forms within HTML documents by utilizing a variety of tags.
Login Form
To display a login form on a webpage within an HTML document, it is essential to adhere to specific steps and utilize particular tags. By employing these tags and steps, one can effortlessly generate a form.
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the desired text editor to establish the login form.
<!Doctype Html>
<Html>
<Head>
<Title>
Create a Login form
</Title>
</Head>
<Body>
The following tags are used in this Html code for creating the Login form:
</Body>
</Html>
Step 2: Next, it is essential to position the cursor precisely where the form needs to be inserted within the <body> tags in the HTML file. Subsequently, input the tag named <form>, which serves as the primary element for generating an HTML form.
<Body>
The following tags are used in this Html code for creating the Login form:
<form>
</form>
</Body>
Step 3: Next, we need to employ the <label> tag to specify the identifier for elements. Subsequently, we should input the following tag to exhibit the User Id. Upon entering the identifier, we must properly conclude the </label> tag.
<label>User Id: </label>
Step 4: In this next step, we will employ the <input> tag to enable users to input characters into the designated box. Therefore, we must input this tag along with its corresponding attribute for the User-id insertion. As this is a singular tag, there is no requirement to close the input tag.
<input type="text">
Step 5: Once more, it is necessary to utilize the <label> tag to present the label as "password." Subsequently, the password must be inputted using the <input> tag provided in the code block below:
<label>Password:</label>
<input type="password">
Step 6 involves setting the value of the type attribute to "submit" in order to submit the form.
<input type="submit" value="Submit">
Step 6: Finally, save the HTML file, proceed to run it, and observe the login form displayed on the webpage within the browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Create a Login form
</Title>
</Head>
<Body>
The following tags are used in this Html code for creating the Login form:
<form>
<label>User Id: </label> <br>
<input type="text"> <br> <br>
<label>Password:</label> <br>
<input type="password"> <br> <br>
<input type="submit" value="Submit">
</form>
</Body>
</Html>
The HTML code displayed above produces the output depicted in the screenshot below:
Registration Form
To generate a registration form in an HTML document, it is essential to adhere to specific steps and utilize particular tags. By employing these tags and following the outlined steps, crafting a form can be achieved effortlessly.
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the text editor where we intend to establish the registration form.
<!Doctype Html>
<Html>
<Head>
<Title>
Create a Registration form
</Title>
</Head>
<Body>
The following tags are used in this Html code for creating the Registration form:
</Body>
</Html>
Step 2: Next, it is essential to position the cursor at the specific location where a form is intended to be generated within the opening and closing tags of the <body> element in the HTML file.
Next, we need to input the tag named <form>. This tag is essential for setting up an HTML form.
Step 3: Naming: Next, we need to specify the name for the element, known as the label, which identifies it.
Step 4: Creating Text and Password Fields
To generate text and password fields, we can effortlessly establish them by utilizing the input tag with distinct values for the type attribute.
Step 5: Radio Button Creation: Another option for enabling users to select a single choice from a list is by implementing a radio button. This involves specifying the value "radio" in the type attribute of the input tag to generate the radio button.
Step 6: Checkbox Implementation: Another way to allow users to select one or multiple options from a list is by utilizing checkboxes. To incorporate a checkbox into a form, the type attribute should be set to "checkbox".
<label>
Hobbies:
</label>
<br>
<input type="checkbox" name="Programming"> Programming <br>
<input type="checkbox" name="Cricket"> Cricket <br>
<input type="checkbox" name="Football"> Football <br>
<input type="checkbox" name="reading Novel"> Reading Novel
Step 7: Creating a Drop-down Menu: To implement a drop-down menu for selecting an option, we need to nest the option element within the select element.
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
Step 8: Text Field: To input multiple lines of text into a box, we need to employ the <textarea> element within the <form> element.
<textarea cols="80" rows="5" value="address">
</textarea>
In Step 9, when using a File Select box, it is necessary to specify the file value in the "type" attribute of the designated <input> tag in order to associate a local file with the form data.
Step 10: Submission Button: The submission button is typically positioned at the conclusion of a form, right before the closure of the <form> tag. Its purpose is to send the form data to the database for processing.
<input type="submit" value="Submit">
Step 11: Utilizing the Reset Button: The reset button serves the purpose of reverting all form controls back to their original default values. To implement this functionality, it is necessary to assign the value "reset" to the type attribute within the designated <input> tag.
<input type="reset" value="Reset">
Step 12: Finally, following the completion of all tags, it is essential to close the </form> tag. Subsequently, remember to save the Html file before executing it in the Browser.
<!Doctype Html>
<Html>
<Head>
<Title>
Create a Registration form
</Title>
</Head>
<Body>
The following tags are used in this Html code for creating the Registration form:
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="gender"/> Male <br>
<input type="radio" name="gender"/> Female <br>
<input type="radio" name="gender"/> Other
<br>
<br>
<label>
Hobbies:
</label>
<br>
<input type="checkbox" name="Programming"> Programming <br>
<input type="checkbox" name="Cricket"> Cricket <br>
<input type="checkbox" name="Football"> Football <br>
<input type="checkbox" name="reading Novel"> Reading Novel <br>
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="phone" size="10"> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</Body>
</Html>
The result of the HTML code above can be viewed in the screenshot displayed below: