HTML Tutorial - Text Area, Check Box, and Radio Buttons
(Page 9 of 12 )
Text Area
Using text area, users can enter multiple lines of text. For instance, you may enter comments or paste your resume inside a text area. They are applied using <TEXTAREA></TEXTAREA> tag. By applying the above code, you will get a default text area. However, you can increase its width and height by applying its ROWS and COLS attribute.
Check Box
Check boxes enable you to choose a list of items. For instance, you may select your hobbies using these boxes. A tick mark appears inside the box. If you again check the box, the tick mark goes away. Look at the code fragment given below:
Listing 22
Select a Language:
<input type = "checkbox" name = "t1" checked>Java
<input type = "checkbox" name = "t2">C++
<input type = "checkbox" name = "t3">Oracle
<input type = "checkbox" name = "t4">C-Sharp
By default, Java will be checked. Notice the checked attribute on the second line of the code.
Radio Buttons
With radio buttons, you can select only one item at a time. But with check boxes, you can pick any number of items. For instance, you may select the sex (either male or female) using these boxes as shown below.
Listing 23
Select your sex:
<input type = "radio" name = "r1">Male
<input type = "radio" name = "r1">Female
You should give the same name for the attribute name. Otherwise, you will not get the functionality of radio buttons.
The above pieces of codes can be combined into one single page as shown in Listing 24
Listing 24
<HTML>
<HEAD><TITLE>HTML Forms</TITLE></HEAD>
<BODY>
<FORM action = "mailto:yourname@server.com" method = "post">
Enter your Name: <input type = "text" name = "t1"
maxlength = 20 size = 25>
Enter your Password: <input type = "password" name = "p1">
Select a Language:
<input type = "checkbox" name = "t1" checked>Java
<input type = "checkbox" name = "t2" checked>C++
<input type = "checkbox" name = "t3" checked>Oracle
<input type = "checkbox" name = "t4" checked>C-Sharp
Select your sex: -
<input type = "radio" name = "r1">Male
<input type = "radio" name = "r1">Female
<CENTER><input type = "submit" name = "s1">
<input type = "reset" name = res1"></CENTER>
<SELECT name = "s1">
<OPTION>India
<OPTION>USA
<OPTION>UK
</SELECT>
The above code submits the information entered by the user to the email address specified in the Form tag’s action attribute. Notice the mailto syntax inside the Form tag.
Next: Additional Tags >>
More HTML Articles
More By Anand Narayanaswamy
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
