HTML Form

Form fields are objects that allow the visitor to enter information – for example text boxes, drop-down menus or radio buttons.

When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions.

The HTML of a form consists of a form tag enclosing tags for various form controls, including text entry fields, various buttons, a file selection control, and menus. (You are probably familiar with all of these from pages you have visited.) The user types in the text fields, clicks on the buttons and selects items from the menus. Finally, the user submits the form, usually by clicking on a special submit button.

*openging <form> and closeing </form> tag.

Form Attributes

List of <form> tag’s attributes

method

Sends the information out mainly used for posting purposes.

action

Giving the form a direction of where to go. It can be an email, a html-page (on your or another site), a PHP or ASP Script etc.

name

Giving the form a name, requires for work with the form from scripts.

enctype

This item is mainly used when performing the mailto action. It determines the type of email to send. It can send it in the format of a text/plain style. It’s optional attribute.

target

Name of window of frame where result of form data processing will be loaded. May have a values:_blank – new page will be loaded in new window._self – new page will be loaded in current window (default value).

<form method="post" action="mailto:someone@someone.com"></form>

This example above is the minimum and just using the mailto part as if you are sending an email. It can be used in other ways like for search engines or you can have it within the form send out an email directly to whomever you wish to have it sent off to. Look below and I will show you a brief sample as far as how it will work using PHP as part of the tool and then one with CGI. Keep in mind the urls are not real so do not look for them.

Example

Output

Multiple-Line Text Input Controls

The main purpose of the <textarea tag is to create a window that can be adjusted. It can be adjusted by not height and width. This tag is really not overly complex to figure out and there really isn’t a lot to say about it. This in my honest opinion is one of the easiest items to learn as far as creating forms go.

List of <textarea> tag attributes

Textarea

Basic tag needed for this format. Close tag is needed.

name

Used for the header of the form.

cols

Mainly used for width purposes. Width in symbols.

rows

Mainly used for height purposes. Height in symbols.

readonly

Text area can not change by user.

Example

Output

Checkboxes Controls

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.OR The checkbox mainly is used for selecting multiple options at one time. It’s used in surveys online and can be used for any type of form. If you have interests of course, fill free to make them and have them filled out.

Output

Hidden Controls

This is the part of the form that you can invisible to the viewer but not to you. By that mean, you have that coded in and isn’t visible to the browser at all. This one requires every item used. All the attributes are used and can be useful depending on the purpose you have exactly.

Attribute

Input – just something to show that it’s apart of a form and that’s it.

Type – tells you the type of input that you are planning to use.

Name – sends data and is the information sent through the Internet.

Value – it’s purpose is to dictate what type of value it has.

For this purpose, I will show you the hidden value in all of the <input> tags. Much like in all tutorials using the <input>, it has no end tag.

Example of Hidden Data in Forms

<input type="hidden" name="admin" value="2">Hidden

Output

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

Attribute

Description

name

Used to give a name to the control which is sent to the server to be recognized and get the value.

Submit and Reset Button

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. The type attribute can take the following values:

Type

Description

submit

This creates a button that automatically submits a form.

reset

This creates a button that automatically resets form controls to their initial values.

button

This creates a button that is used to trigger a client-side script when the user clicks that button.

image

This creates a clickable button but we can use an image as background of the button.