HTML input type Attribute

|  | 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 Reference
HTML by Alphabet
HTML by Function
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
HTML Tags
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<head>
<h1> - <h6>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>

Selected Reading

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

# HTML input type Attribute

HTML <input> tag

## Definition and Usage

The type attribute specifies the input type of the element.

## Syntax

    <input type="type" />

Parameter | Description
--- | ---

type

Optional. Specifies the type of input field.

Note: This is not a required attribute, but it is recommended to include it. If omitted, most browser will still display a text field, but not all.

Possible values:

- text (default)
- button
- submit
- checkbox
- radio
- hidden
- password
- file
- image
- reset

A detailed description of each possible value below.

### Text Fields

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

    <form action="">
    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 in most browsers, the width of the text field is 20 characters by default.

Try it yourself: Input type text

### Button

A simple clickable button. This input type is mostly used together with JavaScript to activate a script.

On its own, the button input does not really do anything:

    <form action="">
    Button:
    <input type="button" value="Click me" />
    </form>

How it looks in a browser:

Button:

Try it yourself: Input type button

### Submit Button

The submit input type sends the form data to the specified URL (set in the form element action attribute)

    <form action="">
    <input type="text" name="firstname" />
    <input type="submit" />
    </form>

To see how this looks in a browser, use this example: Try it yourself: Input type submit

### Checkboxes

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

    <form action="">
    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:

Try it yourself: Input type checkbox

### Radio Buttons

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

    <form action="">
    <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.

Try it yourself: Input type radio

### Hidden

A hidden input type is not shown on the page. However, it can still be used to store a value. The it can contain a default value, or have it's value changed (or set when the page loads) by a script.

    <form action="">
    <input type="hidden" name="hidden1" value="W3Schools Example" />
    </form>

Try it yourself: Input type hidden

### Password

The password input type is almost completely identical to the text field input. The difference is that characters displayed in this field are masked. The characters will be shown like stars (or circles, depending on the browser).

This input field will mask the text to any onlookers, however, the form sends the data as plain text.

    <form action="">
    <input type="password" name="pass" value="example" />
    </form>

How it looks in a browser:

Try it yourself: Input type password

### File

The file input type is used for file uploads.

    <form action="">
    File: <input type="file" />
    </form>

How it looks in a browser:

File:

The file upload attribute "accept" specifies what kind of files can be uploaded. However, it is poorly supported in all major browsers. It is recommended to use server side validation on file uploading.

Try it yourself: Input type file

### Image

The image input type is used just like the standard submit button (described further up). Use this input type when you need something other than a standard button. Any image can be used as a button.

By default, if no form action is specified, this input type sends the click coordinates of the image when activated.

When using this input type you must also specify the image url using the src attribute, and the alternate image text, using the alt attribute:

    <form action="">
    <input type="image" src="input_image.gif" alt="W3Schools button" />
    </form>

To see how this looks in a browser, use this example: Try it yourself: Input type image

### Reset Button

The reset button clears all data from the form.

Use this button carefully, as it can be an annoyance for users who accidentally activate this button.

In appearance the reset button is similar to the submit and button input types.

    <form action="">
    <input type="text" name="firstname" />
    <input type="reset" />
    </form>

How it looks in a browser:

Try it yourself: Input type reset

## Browser Support

The attribute is supported in all major browsers.

HTML <input> tag

## Learn how your website performs under various load conditions

WAPT is a load, stress and performance testing tool for websites and web-based applications. In contrast to "800-pound gorilla" load testing tools, it is designed to minimize the learning curve and give you an ability to create a heavy load from a regular workstation. WAPT is able to generate up to 3000 simultaneously acting virtual users using standard hardware configuration. Virtual users in each profile are fully customizable. Basic and NTLM authentication methods are supported. Graphs and reports are shown in real-time at different levels of detail, thus helping to manage the testing process.

Download the free 30-day trial!

WEB HOSTING
Ecommerce Components for ASP.NET
$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.