*Input Tags

Bastian, Jehazel Faye O.Pawid, Kalehla NikoleCompelio, Keren Joy T.

*What is an input tag?The HTML input tag is used to

display control elements that allow users to input data in a form. The conduct of the control depend mostly on the "type" attribute. This attribute defines the kind of control to be shown.

*Types

1. Text<input type="text">

Most common input type

It defines a control designed for text input.

It lets the readers type in any text information into the box (e.g., names, titles, etc.).

2. Password<input type="password" />

It hides the characters inputted using dots or asterisks

When you type in it, the letters are hidden. 

3. Checkbox<input type="checkbox" />

One can give a list of items to choose from. They can choose more than one in the list. Or it can be used as a "yes/no" toggle, when there is only one option.

Each checkbox works as an on/off switch (boolean values). This control is commonly used in forms to select options, interests, etc. Several checkboxes can share the same control name, allowing authors to set more than one value for a single property.

4. Radio<input type="radio" />

Only one of those radio buttons can be checked, and when it's checked, the rest are automatically unchecked.

Radio button groupings all have the same name attribute, and each value is different. If a reader chooses one value, all the other values will be deselected.

5. Submit<input type="submit">

It creates a button. When a submit button is pressed it automatically submits the form.

This field sends the form information to the web server when it is clicked.

6. Image<input type="image" src= "ABCbuttn.gif" width="88" height="31"

alt="About.com - image courtesy About.com" border="0" />

This creates a submit button that can take a graphical aspect.

The image shown here happens to look like a button, but you can use any image as a button on your forms.

7. Reset<input type="reset">

This type creates a button. When a "reset" button is clicked, all the form's fields are reset to their respective initial values.

8. Button<input type="button" value="button" name="button" />

The button type creates an ordinary button with no default action associated to it. Actions for this buttons are usually defined with client side scripts (e.g., JavaScript).

9. Hidden<input type="hidden" />

It is used to "save state" within an HTML form.

They are most often used in forms that have multiple pages and information that needs to be carried from one page to the next.

They are not shown on the Web page, but the information is sent along with other form input fields.

10. File<input type="file" />

This control type allows users to select a file to upload. The file is uploaded when the form is submitted.

the form's attribute "enctype" must take the value "multipart/form-data".

Attribute Value Descriptionaccept MIME_type Specifies the types of files that can be submitted

through a file upload (only for type="file")align left

righttopmiddlebottom

Deprecated. Use styles instead.Specifies the alignment of an image input (only for type="image")

alt text Specifies an alternate text for an image input (only for type="image")

checked checked  Specifies that an input element should be preselected when the page loads (for type="checkbox" or type="radio")

disabled disabled Specifies that an input element should be disabled when the page loads

maxlength number Specifies the maximum length (in characters) of an input field (for type="text" or type="password")

name name Specifies a name for an input element

readonly readonly Specifies that an input field should be read-only (for type="text" or type="password")

size number Specifies the width of an input field

src URL Specifies the URL to an image to display as a submit button

type buttoncheckboxfilehiddenimagepasswordradioresetsubmittext

Specifies the type of an input element

value value Specifies the value of an input element