Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

How It Works: Using Controls to Build Web Forms

How It Works: Using Controls to Build Web Forms

In this lesson, we'll go through the workings of the previous coding exercise together. Let's begin! :)

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 ...