Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

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

size

maxlength
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.

Password Input

Similar to a Text Field but what the user enters displays as dots on the screen.

Sample: Code:

Attributes

size

maxlength
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.

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

name

value

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.

Text Area

Allows users to enter multiple lines of text.

Sample: Code:

Attributes

rows
cols
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.

Check Box

Allows users to select one or more options from a list of alternatives.

Sample: PurpleRed
YellowBlue Code:

Attributes

name

value
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.

Radio Button

Allows users to select only one option from a list of alternatives.

Sample: Favortie Color:
PurpleRed
YellowBlue Code:

Attributes

name


value
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.

Drop Down Menu

Can be used to allow users to select one option or multiple options.

Sample: Favortie Color:
Code:

Attributes

name

size
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.

Sumbit Button

Allows users to submit the form.

Sample: Code:

Attributes

name

value
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.

Reset Button

Allows users to reset the form.

Sample: Code:

Attributes

name

value
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.