Forms Tutorials
Sample Form Elements
Here is a list of form elements, their code syntax, and list of attributes. Bookmark this page so that, if you forget, you can easily come back and scoop up the code.
Text Input
Allows users to enter one line of text.
Sample: Code:Attributes
sizemaxlength
name
value
align
tabindex
Defines the width of the field / How many visible character it can contain.
Maximum number of characters allowed.
Gives the field a name so the program that handles the form can identify the fields.
What will appear as the default before the user enters any information.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Maximum number of characters allowed.
Gives the field a name so the program that handles the form can identify the fields.
What will appear as the default before the user enters any information.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Password Input
Similar to a Text Field but what the user enters displays as dots on the screen.
Sample: Code:Attributes
sizemaxlength
name
value
align
tabindex
Defines the width of the field / How many visible character it can contain.
Maximum number of characters allowed.
Gives the field a name so the program that handles the form can identify the fields.
What will appear as the default before the user enters any information.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Maximum number of characters allowed.
Gives the field a name so the program that handles the form can identify the fields.
What will appear as the default before the user enters any information.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Hidden Input
Similar to a Text Field but it does not show on the page. The user can not type anything into the field it is used to submit information that is not entered by the visitor.
Code:Attributes
namevalue
Gives the field a name so the program that handles the form can identify the fields.
What will appear as the default before the user enters any information.
What will appear as the default before the user enters any information.
Text Area
Allows users to enter multiple lines of text.
Sample: Code:Attributes
rowscols
name
tabindex
wrap
Number of rows in field.
Number of columns in field.
Gives the field a name so the program that handles the form can identify the fields.
Defines the order of different fields should be activated when the visitor clicks the tab key.
'off' turns off line breaking, 'virtual' shows line breaking, but sends text as entered, and 'physical' the text is submitted as it appears on the screen.
Number of columns in field.
Gives the field a name so the program that handles the form can identify the fields.
Defines the order of different fields should be activated when the visitor clicks the tab key.
'off' turns off line breaking, 'virtual' shows line breaking, but sends text as entered, and 'physical' the text is submitted as it appears on the screen.
Check Box
Allows users to select one or more options from a list of alternatives.
Sample: PurpleRedYellowBlue Code:
Attributes
namevalue
align
tabindex
checked
Gives the field a name so the program that handles the form can identify the fields.
What will be submitted if checked.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Default checked field.
What will be submitted if checked.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Default checked field.
Radio Button
Allows users to select only one option from a list of alternatives.
Sample: Favortie Color:PurpleRed
YellowBlue Code:
Attributes
namevalue
align
tabindex
checked
Tells which group of radio buttons the field belongs to. Without this option you can only have on set of radio buttons per page.
What will be submitted if checked.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Default checked field.
What will be submitted if checked.
Defines how the field is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Default checked field.
Drop Down Menu
Can be used to allow users to select one option or multiple options.
Sample: Favortie Color:Code:
Attributes
namesize
multiple
selected
value
Gives the field a name so the program that handles the form can identify the fields.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Sumbit Button
Allows users to submit the form.
Sample: Code:Attributes
namevalue
align
tabindex
Gives the field a name so the program that handles the form can identify the fields.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Reset Button
Allows users to reset the form.
Sample: Code:Attributes
namevalue
align
tabindex
Gives the field a name so the program that handles the form can identify the fields.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
What will be written on the button.
Defines how the button is aligned. TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
Defines the order of how different fields should be activated when the visitor clicks the tab key.
Return to 'Form Basics' Proceed to 'Text Inputs'
