html <input> - form control

attributes to define parameters which can be passed back to the web server.

The following are the possible values for the type attribute of the input element.

text Creates a single-line text input control.
password Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a series of asterisks). This control type is often used for sensitive input such as passwords. Note that the current value is the text entered by the user, not the text rendered by the user agent.
checkbox Creates a checkbox.
radio Creates a radio button.
submit Creates a submit button.
image Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute.
reset Creates a reset button.
button Creates a push button. User agents should use the value of the value attribute as the button's label.
hidden Creates a hidden control.
file Creates a file select control. User agents may use the value of the value attribute as the initial file name.

The following is an example of several input elements, including: text, password, checkbox, radio, submit, reset and button.

User Logon Information Username:
Password:
Superuser:
Role (Select only one):
Executive: Manager: Engineer: Writer: Tester:

                     
        <form action="input.html" method="post">
            The following is an example of several input elements, including: text,
            password, checkbox, radio, submit, reset and button.
            <fieldset>
                <legend align="top" style="font-weight: bold">
                    User Logon Information
                </legend>
                Username:
                <input maxlength="40" name="username" size="30" type="text" value="John"/>
                <br/>
                Password:
                <input maxlength="40" name="password" size="30" type="password" value="johnjohn"/>
                <br/>
                Superuser:
                <input checked="checked" name="superuser" type="checkbox" value="issuperuser"/>
                <br/>
                Role (Select only one):
                <br/>
                Executive:
                <input name="role" type="radio" value="Executive"/>
                Manager:
                <input name="role" type="radio" value="Manager"/>
                Engineer:
                <input checked="checked" name="role" type="radio" value="Engineer"/>
                Writer:
                <input name="role" type="radio" value="Writer"/>
                Tester:
                <input name="role" type="radio" value="Tester"/>
                <br/>
                <p/>
                <button onclick="doSubmit();" type="submit">Submit</button>
                <button type="reset">Reset</button>
                <button onclick="doCancel();" type="button">Cancel</button>
            </fieldset>
        </form>

The following is an example of the input element whose type attribute is of the value image . The controls below the image button allow the user to experiment with different image files ( src attribute) and the alt attribute.

Image Button Input

Edit Image Input Attributes
SRC
ALT

                     
        <form action="input.html" onsubmit="doImageChanges();">
            The following is an example of the
            <b>input</b>
            element whose
            <b>type</b>
            attribute is of the value
            <b>image</b>
            . The controls below the image button allow the user to experiment with
            different image files (
            <b>src</b>
            attribute) and the
            <b>alt</b>
            attribute.
            <fieldset><legend align="top" style="font-weight: bold">Image Button Input</legend><input alt="Submit" id="input-image" src="../../images/Check.jpg" type="image"/>
            </fieldset>
            <table border="1"><tr><th colspan="2">Edit Image Input Attributes</th>
                </tr><tr><th>SRC</th><td><input id="image-src" size="25" type="text" value="../../images/Check.jpg"/>
                    </td>
                </tr><tr><th>ALT</th><td><input id="image-alt" size="25" type="text" value="Image Button"/>
                    </td>
                </tr><tr><td colspan="2" style="align: center"><input onclick="doImageChanges();" type="submit" value="Submit"/>
                    </td>
                </tr>
            </table>
        </form>

                     
        <form action="input.html">
            The following is an example of the input element of attribute type value of
            <b>file</b>
            .
            <fieldset><legend align="top" style="font-weight: bold">
                    File Browser (client side)
                </legend><input id="input-filename" onchange="doChangeFilename();" size="35" type="file"/>
            </fieldset>
        </form>

The input attributes for text input:

Text Input Attributes

Edit Text Input Attributes
MAX LENGTH
SIZE
TEXT ALIGN
FONT SIZE
HEIGHT
WIDTH

                     
        <form action="input.html" onsubmit="doTextChanges();">
            The input attributes for
            <b>text</b>
            input:
            <fieldset><legend align="top" style="font-weight: bold">
                    Text Input Attributes
                </legend><input id="input-text" maxlength="10" size="9" style="text-align: left;height: 30px; width: 10px; font-size: 12"/>
            </fieldset>
            <table border="1"><tr><th colspan="2">Edit Text Input Attributes</th>
                </tr><tr><th>MAX LENGTH</th><td><input id="max-length" size="5" type="text" value="5"/>
                    </td>
                </tr><tr><th>SIZE</th><td><input id="size" size="5" type="text" value="5"/>
                    </td>
                </tr><tr><th>TEXT ALIGN</th><td><select id="text-align" onchange="doTextChanges();" size="1"><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="justify">justify</option>
                        </select>
                    </td>
                </tr><tr><th>FONT SIZE</th><td><input id="font-size" size="5" type="text" value="15"/>
                    </td>
                </tr><tr><th>HEIGHT</th><td><input id="height" size="5" type="text" value="25"/>
                    </td>
                </tr><tr><th>WIDTH</th><td><input id="width" size="5" type="text" value="75"/>
                    </td>
                </tr><tr><td colspan="2"><input onclick="doTextChanges();" type="submit" value="Submit"/>
                    </td>
                </tr>
            </table>
        </form>