Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

How It Works: Using Controls to Build Web Forms

Explore how to build web forms using HTML controls like input fields and labels. Understand the role of attributes such as for, id, name, rows, and cols in controlling form behavior and data submission. Learn to create forms that provide usability and send data correctly to servers.

We'll cover the following...

How it works

In the previous exercise, you added a number of text controls to the form. The markup you inserted in step two contained two <fieldset> sections, each having its own <legend>. The first section had <input> tags with the “text” type.

The second one has two fields with “password” type, and that is why the related textboxes masked the text typed in.

HTML
<form action="#">
  <fieldset>
    <legend>Personal Data</legend>
    <label for="fname">First Name:</label>
    <input id="fname" type="text" name="fname" />
    <br />
    <label for="lname">Last Name:</label>
    <input id="lname" type="text" name="lname" />
    <br />
    <label for="email">Email:</label>
    <input id="email" type="text" name="email" />
    <br />
  </fieldset>
  <fieldset>
    <legend>Your Conference Account</legend>
    <label for="login">Login name:</label>
    <input id="login" type="text" name="login" />
    <br />
    <label for="pwd">Password:</label>
    <input id="pwd" type="password" name="pwd" />
    <br />
    <label for="pwd2">Confirm Password:</label>
    <input id="pwd2" type="password" name="pwd2" />
    <br />
  </fieldset>
  <input type="submit" value="Register" />
</form>
Code for Our Form

When you ...