...

/

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! :)

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.

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