DJ Mike's Tutorials: Forms, Introduction

^ >

What is a form?

A form is an interface between your web page's viewers and a script of some kind. The script may be browser-side like Javascript or server-side like PHP and Perl. The form is used to collect information from the viewer. The script processes the information. The script may or may not be on the same web page as the form but without the script, the form doesn't process anything. All forms start with <form> and end with </form>

Example of a form:


<form action="http://www.google.com/search"  method="get">
<input type="text" name="q" size="25" maxlength="255" value="">
<input type="submit" name="btnG" value="Google Search">
</form>

Form Attributes

action: The URL of the web page that has the script that processes the input. If the sript is on the same file as the form, an action is not required.
enctype: Specifies the MIME type. Used on forms that upload files, otherwise, nor required.
name: If you have several forms on a page that use javascript and interact with each other, you may need to name them.
method: The HTTP method (post or get). Defaults to get if you omit the method.
target: Determines where the results of the form will be displayed. If you have
<form target="display"> </form>
the results will be displayed in the frame or iframe named, "display".

Post VS Get

Get will append the form data to the URL. You can see an example when you use Google. Post will send the form data in a way that is not visible to the user. Which one you use depends on the nature of your form.

Security VS Bookmarking

Having the form data appended to the URL allows you to bookmark the results of a form or post or email it to someone else. If you want to share the data, that is OK but if the form is a login, the username and password will be on the end of the URL for all of the world to see. If you click a link on a page that has the username and password exposed, the target page can get them by checking the referals to that page.

Data length

A URL has a limit to it's length. If you exceed that length, the data on the end will be ignored. For something like a search engine, the data will usually fit on a URL so you can use get but if your form is editing a webpage, the data may be hundreds of characters long so in that case, you should use post.

Form Elements
Names	Examples
<input type="text" />
<input type="password" />
<textarea>	textarea
<input type="hidden" />
<input type="radio" /> <input name="radio1" type="radio" value="no" checked="checked" />
<input type="checkbox" /> <input name="checkbox2" type="checkbox" value="oranges" checked="checked" />
<button name="button1">This is a button</button>
<input type="button" name="button1" value="This is a input" />
<input type="file" /> <input type="file" device="microphone" />
<input type="image" nocursor /> <input type="image" cursor />
<select> and <option>
<input type="reset" />
<input type="submit" />
<fieldset></fieldset>	Displays a box around of a group of form elements. Not supported by WebTV
<legend> </legend>	Displays a legend for <fieldset>

Form Element Attributes

Some attributes that form elements may have include:

accesskey: Assignes a character to a element that moves the focus to that element when the user presses a key and the Alt key. Not supported by WebTV or Netscape Navigater.
checked: Sets radio buttons and checkboxs to checked state
disabled: Disables a form element. For computer users, the element is dimmed to let the user know that it is disabled. WebTV users cannot put it in focus.
<input type="text" disabled value="disabled" />
maxlemgth: Maximum number of characters that may be entered
name: Name of control
readonly: Same as disabled but appears normal to computer users.
<input type="text" readonly value="readonly" />
selected: Sets the focus.
<select> <option>1</option> <option selected>2</option> <option>3</option> </select>
size: Width of control in pixels except for text and password inputs which a measured by number of characters.
value: Initial value of control

^ >

Was this webpage useful to you? You can support this website by donating.

Created by DJ Mike from Santa Barbara