HTML Input Tag

Description
Input tags are used to accept user input! With input tags you can add buttons, checkboxes, radio buttons, password boxes, text boxes and others. Input tags are used within the form tag. This enables the data from the input tag to be POST(ed) or GET to the server by the form tag. (see method attribute on the form tag for more information on POST and GET)

Examples
Basic structure of an input tag:
<input type="" name="" value="" />

Button Input Tag

You can use the Button Input tag to create a button that can call javascript functions.
<script type="text/javascript"> function btnOnClick() { alert('hi from button'); } </script> <input type="button" name="btn" value="Hello" onclick="javascript:btnOnClick()"/> Checkbox Input Tag

You can use the Checkbox Input tag to create a clickable a checkbox used for on-off or yes/no values. You can use as many of these in a form as you like. Use the "checked" attribute to specify if the checkbox should be checked ("on") by default.
<input type="checkbox" name="chk" value="" checked> Do you want the newsletter? </input>

Do you want the newsletter?

Radio Button Input Tag

This is similar to the checkbox except when a group of radio buttons have the same "name" - only one radio button with that name can be "on". Use the "checked" attribute to specify if the radio button should be checked ("on") by default.

<input type="radio" Magazine 1 </input> <input type="radio" Magazine 2 </input> <input type="radio" Magazine 3 </input> <input type="radio" Magazine 4 </input>

name="rdChoice" value="Mag1"> name="rdChoice" value="Mag2"> name="rdChoice" value="Mag3" checked> name="rdChoice" value="Mag4">

Magazine 1 Magazine 2 Magazine 3 Magazine 4

Text Input Tag

Use the text input tag to allow web site users to enter text that can be sent to the server and processed by a server side script. The text input tag has two additional attributes: maxlength: the maximum length of the text that the tag can accept in characters. size : the size of the textbox in characters.
<input type="text" maxlength="5" size="5" name="box1" value="Hi1!"/> <input type="text" maxlength="5" size="20" name="box2" value="Hi2!"/> <input type="text" maxlength="10" size="15" name="box3" value="Hi3!"/>
Hi1! Hi2! Hi3!

Password Input Tag

This is the same as the Text input tag but the text is not viewable by the user. This is so noone walking past the users computer can see a password while the user is typing it in Note: the password is not encrypted and will be sent to the server is clear text unless extra security is in place (look up SSL). The password input tag has two additional attributes: maxlength: the maximum length of the text that the tag can accept in characters.

size

: the size of the textbox in characters.

<input type="password" maxlength="10" size="15" name="pass1"/>

Hidden Text Input Tag

Use the hidden input tag is used to store data to be sent to the server that a user cannot see or modify. Note: that the user can still see the data if they choose the 'view source' function in their browser.
<input type="hidden" name="hidden1" value="Text not changeable by user" />

Submit Input Tag

Use the submit input tag type to display a button that the user can press to send the form to the location specified in the form action attribute. Typically this would be a location to a server side script that would process the data entered into the form input tags and then send a response back to the user.
<input type="submit" value="Send to Server" />
Send to Server

Reset Input Tag

Use the Reset input tag type to clear all the data on th input tags in the form. If the input tags have default values set (the value or checked attributes) those input tags will be set to their default value.
<form> <input type="text" value="hi there hi there" /> <input type="reset" value="Reset the form" /> </form>

hi there hi t

Reset the form

File Input Tag

Use the File input tag to send files on a users computer to the server when the form is submitted. This input tag displays a browse button to allow a user to browse to the file to upload (send to the server). This tag accepts the addition attribute: accept: Comma seperated list of content/mime types. This tells the server what type of file to expect and to only show the expected file types in the browse window.
<form> <input type="file" name="file1" /> </form> Image Input Tag

Use the Image input tag to use an image instead of the standard submit button.

<form> <input type="image" src="../images/arrow-up-over.gif" /> </form>

Core Attributes for All <Input> Tags

Name Values text button checkbox radio file hidden image password reset submit text to send to server Description

type

the type attribute specifies the control to use as input.

value

specifies the value of the element that is sent to the server script that processes the form

name

text

The name of the control. Used to retrieve the value of the control by the server side script that processes the form Every HTML element can have an id. id is used to identify a tag on the client e.g. using Javascript. We mention it here as many browsers and server side scripting languages allow the use of id in place of the name atttribute

id

text