Write an HTML program to create a registration form

Description: Create a registration form that takes name, email, password, gender, hobbies and country, and has a Register button.

Hint:

  • Use the form tag with method="post".
  • Connect every label to its field with for and id.
  • Radio buttons of the same group must have the same name.

HTML registration form

<form action="register.php" method="post">
  <p><label for="name">Name:</label>
     <input type="text" id="name" name="name" required></p>
  <p><label for="email">Email:</label>
     <input type="email" id="email" name="email" required></p>
  <p><label for="pass">Password:</label>
     <input type="password" id="pass" name="password" required></p>

  <p>Gender:
    <input type="radio" id="m" name="gender" value="male"><label for="m">Male</label>
    <input type="radio" id="f" name="gender" value="female"><label for="f">Female</label></p>

  <p>Hobbies:
    <input type="checkbox" id="h1" name="hobby" value="reading"><label for="h1">Reading</label>
    <input type="checkbox" id="h2" name="hobby" value="music"><label for="h2">Music</label></p>

  <p><label for="country">Country:</label>
    <select id="country" name="country">
      <option value="india">India</option>
      <option value="usa">USA</option>
    </select></p>

  <button type="submit">Register</button>
</form>

Output in the browser:

Output in the browser

Gender:

Hobbies:

How it works

  • The required attribute stops the form from being sent when the field is empty.
  • type="email" checks the email format, and type="password" hides the typed text.
  • The form data goes to register.php with the POST method. That file must be made with a server language like PHP.

Read HTML Forms and HTML Input Types.


Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.