Things you want to know about websites

 

Forms

You have seen basic form elements in the basic section. Lets talk about more things now.

There are two parts of a complete working form. One part is the interface that the visitor sees. This usually consists of input fields, buttons or selection menus to which the visitor supplies some information.

The other part is not Html, instead it is a program or script designed in a prgramming language like PHP, Perl or ASP.

These scipts are stored on the web server and called Server-Side Scripts. These scripts recieves the information filled out by the user and processes it for the desired task. For example, the data entered can be stored on a data base or sent to an email address. These scripts are invoked or called by the form itself.

In this Html tutorial we are only concerned with the first part or the interface of the forms.

Password Boxes

Password boxes donot show the text entered on the screen, instead they usually display an Asterisk * in place of each character typed.

To provide a password input field we use type="password" in the input element.

Example

<form method="post" action="" >
Password:<input type="password" name="password" size="30" />
</form>

gives,

Password:

Hidden Fields

Hidden fields donot show the text typed. They are simply hidden.

To provide a hidden text field we use type="hidden" in the input elements.

Example

<form method="post" action="" >
Hidden Field:<input type="hidden" name="Hidden-text" size="30" />
</form>

gives,

Hidden Field:

Radio buttons

You can create radio buttons for input fields by using type="radio" in the input element.

Example

<form method="post" action="" >
Quantity:<br />
<input type="radio" name="quantity" value"one" />One<br />
<input type="radio" name="quantity" value"two" />Two<br />
</form>

gives,

Quantity:
One
Two

Check boxes

Check boxes are different then radio buttons in the way that you can only select one radio button at a time but you can select multiple check boxes at once.

You can create check boxes by using type="checkbox" in the input element..

Example

<form method="post" action="" >
Favourite fruits:
<input type="checkbox" name="fruits" value"apples" />Apples
<input type="checkbox" name="fruits" value"oranges" />Oranges
<input type="checkbox" name="fruits" value"mangoes" />Mangoes
</form>

gives,

Favourite fruits:
Apples
Oranges
Mangoes

Creating Menus

Menus are an effective way of selecting choices. You can create a menu by using <select> and <option> elements. Select tag encloses the menu and option tag describes the choices.

Example

<form method="post" action="">
Quantity:<select name="quantity">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>

gives,

Quantity:

Select tag also accepts optional attributes like,
- size="n", which describes the height of the menu in lines.
- multiple="multiple", which allows the user to select more than one option at once.

Option tag also accepts optional attributes like,
-selected="selected", which selects the option by default.
-label="label",which provides a short form of option (only works in IE 7+).


Bookmark or Add to Favourites

Next :

Html-Frames

Related:

Html-Forms Basic

Link to this page :

Copy and paste the following code in an html document to link to this page,