Expertrating - XHTML Tutorial, Forms

Home > Courses, Tutorials & eBooks > XHTML Tutorial > Forms

XHTML Tutorial - Forms

Page 1 of 5

Overview

In this chapter you will learn

How to make forms
How to have different buttons on the form
How to add buttons to the form
How to make the form interactive

Introduction

Forms are a popular way to make a web page interactive. A web form is a page which contains various elements like text fields, check boxes,radio buttons etc. that has to be input by the user.

Like the form on paper, a form on a web page lets the user enter the requested information and submit it for processing. They pass the user data to a specified URL. The user can also use these forms to gather information recorded in them. Form elements ensure that one’s form is accessible and usable by a wide number of users.

The forms designed in XHTML are similar to the forms designed in HTML.

Form Tag

The form tag creates a form for user input. It can contain text fields, check boxes, radio buttons and more.

Example

<form attributes></form>

Attributes of Form Tag

Name

The name attribute takes up the value form name. It defines a unique name for the form. It is an optional attribute.

Example

Action

The action attribute takes up a URL as value. It sends the data to the URL defined in action when the submit button is pressed. It is an essential attribute.

Example

Input Tag

The <input> tag defines the start of an input field where the user can enter his data. In XHTML, the input tag has to be closed. It is done so by placing a backslash (/) at the completion of the tag.

Example

<input attributes />

Attributes of Input Tag

Type

Type indicates the type of input element that has to be given in the box. The default value is “text.”

The various values of Type Attribute are:

Button

A button is an input type that will not work without an extra code being added. As Button is used with scripting, this concept will be discussed later.

Checkbox

This value creates a checkbox which can either be on or off.

Example

Finance: <input type=checkbox />

Hidden

This indicates that the field is hidden and the user does not communicate with it. Hidden is commonly used by programmers who do not want users to see the value. The value used in hidden is still submitted with other information when the submit button is clicked. It usually passes the page name and page number that the user is on.

Example

This is hidden: <input type=hidden />

Image

Image creates an image that is also a “submit” button. When the user clicks on the image, the form is submitted. Image also requires the “src” attribute like the image tag.

Example

Password

Password indicates that the field is for typing a password. Password works just like the text type field, the only difference being that whatever is typed is not displayed on the screen. Instead of showing what is typed, the browser displays a series of asterisks ( *), bullets (.), or something else to show that the user is typing a secret content.

Example

Password: <input type=password />

Radio

Radio is used to create a series of choices of which only one can be selected. Selecting a radio button option automatically deselects all other options. Several HTML radio buttons are created by using the same name but different values.

Example

<input type=radio name=”joke” value=”a”/> cricket jokes <br/>

<input type=radio name=”joke” value=”b”/> crazy jokes <br/>

<input type=radio name=”joke” value=”c”/> nice jokes <br/>

ExpertRating XHTML Certification - Get Certified Now!!