Home arrow HTML arrow Page 9 - HTML Tutorial
HTML

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: 3 stars3 stars3 stars3 stars3 stars / 73
October 11, 2004
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

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


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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