Home arrow HTML arrow Page 9 - HTML Tutorial

HTML Tutorial

This article is the September contest winner. The author provides a basic tutorial of HTML, with code samples illustrating headings, lists, background colors, using the Frame tag and more.

Author Info:
By: Anand Narayanaswamy
Rating: 4 stars4 stars4 stars4 stars4 stars / 77
October 11, 2004
  1. · HTML Tutorial
  2. · Paragraph Tags, Attributes and Headings
  3. · Using Lists
  4. · Indents and Links
  5. · Working with Images
  6. · Working with Tables
  7. · Working with Frames
  8. · Using Forms, Text, Buttons, and Combo Box
  9. · Text Area, Check Box, and Radio Buttons
  10. · Additional Tags
  11. · Drawing Lines, SUB and SUP Tags
  12. · Test Yourself Questions

print this article

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

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

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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials