Introduction to HTML Forms

(1)

Introduction to HTML Forms

Collected by Hossam M.J. Mustafa

- HTML Forms and Input

HTML Forms are used to select different kinds of user input.

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form action=”http://www.kaue.edu.sa/anotherpage.asp" method="GET"

name="form1" target="_blank">

<input>

</form>

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form>

First name:

<input type="text" name="firstname" value="enter a value"

disabled="disabled" readonly="readonly" maxlength="50" size="9" /> <br/>

Second name:

<input type="text" name="secondname" value="enter a value"

Password:

<input type="password" name="password" value="enter a value"

</form>

How it looks in a browser:

First name:

Last name:

Password:

(2)

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>

Gender : <br />

<input type="radio" name="r1" disabled="disabled" readonly="readonly"

value="1" /> Male <br />

<input type="radio" name="r1" disabled="disabled" readonly="readonly"

value="2" checked="checked" /> Female<br />

</form>

Male Female

Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>

Permission :

<input type="checkbox" name=" allow1" value="yes" disabled="disabled"

readonly="readonly" checked="checked" /> Allow you to Enter<br />

<input type="checkbox" name="allow2" value="yes" disabled="disabled"

readonly="readonly" checked="checked"/> Allow you to Exit<br />

</form>

Permission:

Allow you to Enter Allow you to Exit

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="html_form_action.asp"

method="get">

</form>

(3)

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.

Text Area

Text Area is used when you want the user to enter a multiline text values.

<form>

Address : <textarea name="Address" cols="20" rows="5" > Put your Address Here</textarea> <br/>

</form>

Address :

Put your Address Here

Drop Down List

Text Area is used when you want the user to select from a drop down list.

<form>

Age:

<option value="20-25" selected="selected" >Around 20-25</option>

<option value="26-35"> Around 26-35</option>

</select> <br />

</form>

Types of Drop down List:

 Multiple: Can select multiple values by pressing Ctrl key.

 Single: only can select one value.

<form>

Nationality:

<option value="KSA" selected="selected" >Saudi Arabia</option>

<option value="JOR">Jordan</option>

</select> <br />

</form>

(4)

Submit Button

<input type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

Username: <input type="text" name="user" />

</form>

Username

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input

Reset Button

<input type="reset" /> defines a reset button.

A reset button is used to clear form data:

</form>

Username

If you type some characters in the text field above, and click the "Reset" button, the browser will clear your data in the user text field.

Button

<input type="button" /> defines a simple button.

A simple button is used to do some functionality and defined in the javascript or other client side scripting language:

</form>

Username

If you type some characters in the text field above, and click the "Button" button, the browser will not do anything.

Button

Submit Reset Submit