HTML Forms and Input

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

HTML Basic
HTML HOME
HTML Introduction
HTML Get Started
HTML Basic
HTML Headings
HTML Paragraphs
HTML Formatting
HTML Elements
HTML Attributes
HTML Styles
HTML Links
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Colors
HTML Colornames
HTML Colorvalues
HTML Quick List
HTML Advanced
HTML Layout
HTML Frames
HTML Fonts
HTML 4.0 Why
HTML CSS
HTML Entities
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Attributes
HTML Events
HTML URL Encode
HTML Webserver
HTML Summary
Examples/Quiz
HTML Examples
HTML Quiz
HTML Exam
References
HTML Tag List
HTML Attributes
HTML Events
HTML Colornames
HTML Character Sets
HTML ASCII
HTML ISO-8859-1
HTML Symbols
HTML URL Encode
HTML Lang Codes
HTTP Messages

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# 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 an HTML page. A user can write text in a text field.

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

(You can find more examples at the bottom of this page)

## 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:

First name:
Last name:

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:

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>
    I have a bike:
    <input type="checkbox" name="vehicle" value="Bike">
    <br>
    I have a car:
    <input type="checkbox" name="vehicle" value="Car">
    <br>
    I have an airplane:
    <input type="checkbox" name="vehicle" value="Airplane">
    </form>

How it looks in a browser:

I have a bike:
I have a car:
I have an airplane:

## 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 the server. 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_submit.asp"
    method="get">
    Username:
    <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>

How it looks in a browser:

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_submit.asp". The page will show you the received input.

## More Examples

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

Radio buttons
This example demonstrates how to create radio-buttons on an HTML page.

Simple drop down box
This example demonstrates how to create a simple drop-down box on an 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 three checkboxes, and a submit button.

Form with radio buttons
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

Tag | Description
--- | ---
<form> | Defines a form for user input
<input> | Defines an input field
<textarea> | Defines a text-area (a multi-line text input control)
<label> | Defines a label to a control
<fieldset> | Defines a fieldset
<legend> | Defines a caption for a fieldset
<select> | Defines a selectable list (a drop-down box)
<optgroup> | Defines an option group
<option> | Defines an option in the drop-down box
<button> | Defines a push button
<isindex> | Deprecated. Use <input> instead

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

WEB HOSTING
Dynamic button image generation
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.