8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

Build a Basic Registration Form Using HTML – Beginner's Tutorial

Build a Basic Registration Form Using HTML – Beginner's Tutorial

October 10, 2024

This form is practical and introduces various types of input fields, which makes it a valuable tutorial for beginners learning HTML.

Code:

<!DOCTYPE html>

<html>

<head>

    <title>Registration Form</title>

</head>

<body>

    <h1>Create Your Account</h1>

<form>

    <!-- Name -->

        <label for="name">Full Name:</label><br>

        <input type="text" id="name" name="name" required><br><br>

  <!-- Username -->

        <label for="username">Username:</label><br>

        <input type="text" id="username" name="username" required><br><br>

  <!-- Email -->

        <label for="email">Email:</label><br>

        <input type="email" id="email" name="email" required><br><br>

<!-- Password -->

        <label for="password">Password:</label><br>

        <input type="password" id="password" name="password" required><br><br>

<!-- Date of Birth -->

        <label for="dob">Date of Birth:</label><br>

        <input type="date" id="dob" name="dob"><br><br>

<!-- Gender -->

        <label for="gender">Gender:</label><br>

        <input type="radio" id="male" name="gender" value="male">

        <label for="male">Male</label>

        <input type="radio" id="female" name="gender" value="female">

        <label for="female">Female</label><br><br>

<!-- Hobbies (Checkbox) -->

        <label for="hobbies">Hobbies:</label><br>

        <input type="checkbox" id="sports" name="hobbies" value="sports">

        <label for="sports">Sports</label>

        <input type="checkbox" id="music" name="hobbies" value="music">

        <label for="music">Music</label>

        <input type="checkbox" id="reading" name="hobbies" value="reading">

        <label for="reading">Reading</label><br><br>

<!-- Submit and Reset -->

        <input type="submit" value="Register">

        <input type="reset" value="Reset">

</form>

</body>

</html>

Explanation:

  1. Input Fields:

    • Full Name and Username: Simple text input fields for users to provide their name and username.
    • Email: An email input field, which validates the format of the email.
    • Password: A password input field, which hides the input with dots for security.
    • Date of Birth: A date picker that allows users to select their birth date.

  2. Radio Buttons:

    • Used to select the gender (Male or Female), with only one selection allowed.

  3. Checkboxes:

    • For hobbies, where users can select multiple options (sports, music, reading).

  4. Submit and Reset:

    • The Submit button sends the form data.
    • The Reset button clears all the fields, returning them to their default state

This program introduces more advanced input types like radio buttons, checkboxes, and date pickers

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
October 16, 2024
Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
October 16, 2024
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
October 16, 2024
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?
October 16, 2024
What is an Array in Javascript with explaination ?

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO