8/2/13

HTML Forms and Input

Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

SHARE THIS PAGE

Like

76k

HTML Basic
HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

HTML Forms and Input

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

WEB HOSTING

Next Chapter

Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

Try it Yourself - Examples

Create text fields How to create text fields. The user can write text in a text field. Create password field How to create a password field. (You can find more examples at the bottom of this page)

WEB BUILDING
Download XML Editor FREE Website BUILDER FREE Website C reator Best Website Templates

STATISTICS

HTML Forms
HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form:

Browser Statistics OS Statistics Display Statistics

< f o r m > . i n p u te l e m e n t s . < / f o r m >

HTML Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below.

HTML5 News
HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:

< f o r m > F i r s tn a m e :< i n p u tt y p e = " t e x t "n a m e = " f i r s t n a m e " > < b r > L a s tn a m e :< i n p u tt y p e = " t e x t "n a m e = " l a s t n a m e " > < / f o r m >
How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

HTML Media
HTML Media HTML Object HTML Audio HTML Video HTML YouTube

Password Field
<input type="password"> defines a password field:

HTML Examples
HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

< f o r m > P a s s w o r d :< i n p u tt y p e = " p a s s w o r d "n a m e = " p w d " > < / f o r m >
How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).

HTML References
HTML Tag List HTML Attributes

Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

w3schools.com/html/html_forms.asp

1/3

8/2/13
HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

HTML Forms and Input

< f o r m > < i n p u tt y p e = " r a d i o "n a m e = " s e x "v a l u e = " m a l e " > M a l e < b r > < i n p u tt y p e = " r a d i o "n a m e = " s e x "v a l u e = " f e m a l e " > F e m a l e < / f o r m >
How the HTML code above looks in a browser: Male Female

Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

< f o r m > < i n p u tt y p e = " c h e c k b o x "n a m e = " v e h i c l e "v a l u e = " B i k e " > Ih a v eab i k e < b r > < i n p u tt y p e = " c h e c k b o x "n a m e = " v e h i c l e "v a l u e = " C a r " > Ih a v eac a r < / f o r m >
How the HTML code above looks in a browser: I have a bike I have a car

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:

< f o r mn a m e = " i n p u t "a c t i o n = " h t m l _ f o r m _ a c t i o n . a s p "m e t h o d = " g e t " > U s e r n a m e :< i n p u tt y p e = " t e x t "n a m e = " u s e r " > < i n p u tt y p e = " s u b m i t "v a l u e = " S u b m i t " > < / f o r m >
How the HTML code above looks in a browser: Username: Submit

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.

More Input Examples

Radio buttons How to create radio buttons. Checkboxes How to create checkboxes. A user can select or unselect a checkbox. Simple drop-down list How to create a simple drop-down list. Drop-down list with a pre-selected value How to create a drop-down list with a pre-selected value. Textarea How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters. Create a button How to create a button.

Form Examples
Fieldset around form-data How to create a border around elements in a form. Form with text fields and a submit button How to create a form with two text fields and a submit button. Form with checkboxes How to create a form with two checkboxes and a submit button. Form with radio buttons How to create a form with two radio buttons, and a submit button. Send e-mail from a form How to send e-mail from a form.

HTML Form Tags

New : New tags in HTML5. Tag <form> <input> <textarea> <label> Description Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an <input> element

w3schools.com/html/html_forms.asp

2/3

8/2/13
<fieldset> <legend> <select> <optgroup> <option> <button> <datalist> <keygen> <output> New New New

HTML Forms and Input

Groups related elements in a form Defines a caption for a <fieldset> element Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a clickable button Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation

Previous

Next Chapter

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

w3schools.com/html/html_forms.asp

3/3