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" name="rdChoice" value="Mag1">
            Magazine 1
        </input>
        <input type="radio" name="rdChoice" value="Mag2">
            Magazine 2
        </input>
        <input type="radio" name="rdChoice" value="Mag3" checked>
            Magazine 3
        </input>
        <input type="radio" name="rdChoice" value="Mag4">
            Magazine 4
        </input>

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!"/>

Password Input Tag

This is the same as the Text input tag but the text is not viewable by the user. This is so no-one 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" />

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>
    

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	Description
type	text button checkbox radio file hidden image password reset submit	the type attribute specifies the control to use as input.
value	text to send to server	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
id	text	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