4/4/13

HTML Forms and Input

HTML Forms and Input

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

Next Chapter

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)

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:

< 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.

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:

w3schools.com/html/html_forms.asp

1/4

4/4/13

HTML Forms and Input

First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

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

< 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).

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

< 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:
w3schools.com/html/html_forms.asp 2/4

4/4/13

HTML Forms and 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>
w3schools.com/html/html_forms.asp

Description Defines an HTML form for user input Defines an input control
3/4

4/4/13

HTML Forms and Input

<textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <datalist> <keygen> <output> New New New

Defines a multiline input control (text area) Defines a label for an <input> element 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

w3schools.com/html/html_forms.asp

4/4