8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Tutorials

Tutorials Details

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

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

October 18, 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

Categories

Recent post

Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
November 7, 2024
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
November 7, 2024
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
November 6, 2024
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
How to Create a Responsive Card with Hover Effects in CSS
November 4, 2024
How to Create a Responsive Card with Hover Effects in CSS

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

Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
How to Create a Responsive Navigation Bar with Active Links Using HTML & CSS
Build a Stylish Sidebar with Dropdown Menu Using HTML and CSS Only
How to Create a Responsive Card with Hover Effects in CSS

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO