Please visit our sponsors !

HTML Forms and Input

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

Examples

Text fields
This example demonstrates how to create text fields on a HTML page. A user can write text in a text field.

Password fields
This example demonstrates how to create a password field on a HTML page.

More Examples

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>
  <input>
  <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">
<br>
Last name: 
<input type="text" name="lastname">
</form>

How it looks in a browser:

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>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

How it looks in a browser:

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>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

How it looks in a browser:

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">
Username: 
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

How it looks in a browser:

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.

More Examples

Checkboxes
This example demonstrates how to create check-boxes on a HTML page. A user can select or unselect a checkbox.

Radiobuttons
This example demonstrates how to create radio-buttons on a HTML page.

Simple drop down box
This example demonstrates how to create a simple drop-down box on a HTML page. A drop-down box is a selectable list.

Another drop down box
This example demonstrates how to create a simple drop-down box with a pre-selected value.

Textarea
This example demonstrates how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters.

Create a button
This example demonstrates how to create a button. On the button you can define your own text.

Fieldset around data
This example demonstrates how to draw a border with a caption around your data.

Form Examples

Form with input fields and a submit button
This example demonstrates how to add a form to a page. The form contains two input fields and a submit button.

Form with checkboxes
This form contains two checkboxes, and a submit button.

Form with radiobuttons
This form contains two radio buttons, and a submit button.

Send e-mail from a form
This example demonstrates how to send e-mail from a form.

Form Tags:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

E-Mail Joke

E-Mail message to support: "I cannot read or receive email"

E-Mail answer from support: "Yes you can"

Jump to: Top of Page or HOME or Printer friendly page

Search W3Schools:

What Others Say About Us

Does the world know about us? Check out these places:

Dogpile Alta Vista MSN Google Excite Lycos Yahoo Ask Jeeves

We Help You For Free. You Can Help Us!

• Tell your newsgroup or mailing list
• Link to us from your pages
• Help us correct errors and broken links
• Help us with spelling and grammar
• Validate the XHTML code of this page

W3Schools is for training only. We do not warrant its correctness or its fitness for use. The risk of using it remains entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2002 by Refsnes Data. All Rights Reserved

How we converted to XHTML