to home page


 INPUTS TYPES  
 


<INPUT> TAG TYPES

 

HOME
TUTORIALS
LINKS
FORUM
GLOSSARY
NEWS/ABOUT


THIS AREA

MAIN

BASICS
Basic Tutorial
Advance Tutorial

Beyond Tips
frames
sound
video
forms
Main
Introduction
Getting started
<input> basics

<input> Types
Form Properties
Comments form
<button> tag
Other Resources


Java &JavaScript
event handlers

Composer Hints

Reviews

 

 

BWRS
SEARCH

 

 

 

Lets begin by separating our form inputs out into 5 different classes

First we have the textboxes

Then the buttons

Then the checkboxes like radiobuttons YES NO

Next the pulldown menus

And finally hidden fields !!!

Let's look at each in turn

TEXTBOXES

Okay you've seen the basic coding for textboxes already

<input type="text" name="email" value="enter your email">

For example

You can leave out the value... to give an empty box

<input type="text" name="name">

Now you can pre-set the width of the box using the size attribute. This gives a size in terms of characters

e.g. <input type="text" name="name" size=15>

e.g. <input type="text" name="name" size=50>

You can limit the amount of text you can type in with the maxlength attribute (again value in characters)

e.g. <input type="text" name="name" size=50 maxlength=5>

You can create a password blinded textbox entry (where the info appears as asterixes e.g. ******) by using the password input type

e.g. <input type="password" name="secret">

You can also create a multiline textbox too like this one

Now this has it's own special tag, the <textarea> tag. It needs to be closed (e.g. </textarea>) but is used like any other input

e.g. <textarea name="text" cols="20" rows="3"></textarea>

As before the name attribute defines a data name for the data entered. The cols attribute determines how many characters you can have on each line (i.e. columns) before warping around to the next line. The rows attribute determines how many rows you can see on the screen without scrolling.

With newer browsers you can add the warp attribute to the <textarea> tag. This determines the word warping within the box. With warp=off, warping is turned off and you must manually hit return when you reach the end of the available space on each row. In the case of warp=virtual (or warp=soft) the warp appears on the form but when data is sent from the form the line endings are not shown (so the data just appears as a continuous line). With warp=physical (or warp=hard) the line endings are shown both on screen and on data sent onback to top

BUTTONS

Okay you've actually seen almost all there is to know about simple buttons

You can have a simple button.

E.g.

<input type="button" name="you pick" value="press me">

Or a submit or reset button which either trigger the submission of the form for handling or clear the entered data back to defaults.

E.g.

<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="reset">

You can also use an image as a substitute submit button

e.g.

<input type="image" name="image"
src="b_stone.gif" value="button">

The type attribute now has a value of image. The name and value attributes are the same as before. You must define the URL of your image by the src attribute.

You can add in all the usual image attributes that you've used before too (e.g. width, height, alt, align etc.)

There is another tag (<button>) used for buttons but we'll discuss that laterback to top

CHECKBOXES

Checkboxes are great where you want the user to make a (or numerous choices) from a list of values. They fall into 2 types radio buttons and check boxes

We've seen radio buttons already

e.g. YES NO

YES
<input type="radio" name="answer" value="yes">
NO
<input type="radio" name="answer" value="no">

You can only select one value within a group of radio button (defined by the same name attribute)

Check boxes allow you to select numerous values

e.g. cat dog fish

cat
<input type="checkbox" name="animal" value="cat">
dog
<input type="checkbox" name="animal" value="dog">
fish
<input type="checkbox" name="animal" value="fish">

In both radio buttons & check boxes by adding the checked attribute causes a box to be preselected

e.g. YES NO

YES
<input type="radio" name="answer" value="yes" checked>
NO
<input type="radio" name="answer" value="no">
back to top

PULLDOWN MENUS

Our second to last type of form input is the pulldown menu

e.g.

As you can see the coding is somewhat different

<select name="pulldown">
<option value="no">no</option>
<option value="yes">yes</option>
<option value="maybe">maybe</option>
<option value="perhaps">perhaps</option>
<option value="do not know">do not know</option>
</select>

As you can see there are 2 tags used.

The first defines the name of the menu and ends the menu (the <select> and </select> tags). Just like the input tags you define a name for the data selected.

Each available option is defined by the <option> tag. The value attribute sets the data value of each option selected. The name displayed is placed between each <option> and </option> tags.

By adding the size attribute to the <select> tag you can convert a pulldown menu into a scrolling oneback to top

e.g.

<select name="pulldown" size=3>
<option value="no
"......

By adding the multiple attribute you can have multiple selections (user holds down shift)

e.g.

<select name="pulldown" size=3 multiple>
<option value="no
"......

With the <option> tag you can add the following attributes

selected attribute. This predetermines what the initial value is

e.g.

here we've changed the following line

....
<option value="maybe" selected>maybe</option>
......

width attribute. Determines width of object in pixels

HIDDEN FIELDS

Viewers of your forms can't see hidden fields.

At this point you're probably going what??? & Why bother!!

They are used to give additional info to the form data. We use a hidden field in our comment form example because it lets us know which forms tutorial you've sent it (there are identical ones for our Frontpage express and HTML tutorials- all are only different by by hidden fields value attributes)

<input type="hidden" name="form" value="html tutorial>

back to top

 

<INPUT>
BASICS

back to input basicsForm properties

FORM
PROPERTIES

This page © 2002 A.Duncan BWRS

terms & conditions copyright © 1999-2003 legal notices
home
credits
contact us link to us