Home » Exercises » HTML Exercises » HTML Forms

HTML Forms

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.

Write an HTML program to create a contact form

Description: Create a contact form with name, email, subject and message fields, and a Send button.

Hint:

  • Use textarea for the long message.
  • Mark the important fields with required.

HTML contact form

<form action="contact.php" method="post">
  <p><label for="cname">Name:</label><br>
     <input type="text" id="cname" name="name" required></p>
  <p><label for="cemail">Email:</label><br>
     <input type="email" id="cemail" name="email" required></p>
  <p><label for="subject">Subject:</label><br>
     <input type="text" id="subject" name="subject"></p>
  <p><label for="message">Message:</label><br>
     <textarea id="message" name="message" rows="5" cols="40" required></textarea></p>
  <button type="submit">Send</button>
</form>

Output in the browser:

Output in the browser





How it works

  • <br> puts the field below its label.
  • rows and cols set the size of the textarea.
  • The server file contact.php reads the values and sends the email. A form alone cannot send an email.

Also see our HTML contact form template.