Lesson 10
Password
The password field is used for password entry. For security reasons, the password field does not display the input text. It masks the data with an ‘*’ (asterisk).
- Change the code you typed in the previous lesson to:
<!doctype html>
<html>
<head>
<title>Lesson 8 </title>
<head>
<body>
<form name="simple form" action="lesson 1.html" method="post">
Name :<input type="text" name="first name" size="10"> <br/>
Email id :<input type="text" name="email" size="20"><br/>
password :<input type="password" name="pass" size="20"><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
Text Area
The textarea input type is used where multiple lines of free text may be required i.e. a ‘notes’ field.
- Add the following code to your previous code below the <br/> tag after the password field.
Address :<textarea name="address" cols="20" rows="3"> </textarea><br/>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
Radio Button
Radio buttons let users select from a list of the options. To group items together they must have the same value for the ‘name’ attribute. In our case, this is ‘gender’.
- Add the following line after your previous textarea code:
Gender: <input type="radio" name="gender" value="male">male<br/>
<input type="radio" name="gender" value="female">female<br/>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
Checkbox
Using check boxes allows users to select one or many items from a list. To group items together they must have same value for the ‘name’ attribute. In our case this is ‘hobbies’..
- Add the following lines of code below your previous code:
hobbies: <input type="checkbox" name="hobbies" value="cricket">cricket <br/>
<input type="checkbox" name="hobbies" value="football">football <br/>
<input type="checkbox" name="hobbies" value="swimming">swimming<br/>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
In this lesson we have added a small number of ‘Input’ controls to our page.
Take me to the next lesson 'form formatting'