Home
Web Development
Short Contents
For Beginners...Introduction
Changes from 3.2
Document
Attributes
...that are available for all BODY objects
Text
Organisation tools
Forms
Images
Sounds
Style Sheets
Special Effects - Javascript
Search Engines
Full Contents
For Beginners...
Introduction
Other HTML sitesPutting pages online
Tips For beginners
Download this Guide
Changes from 3.2
Document
Specifying LanguageStructure
The <HEAD> section
...General attributes
...Title
...Setting the Base address
...Queries : ISINDEX
...META tags
...Character sets
...<LINK>s
The <BODY> tag
... General Attributes
...Document Colours
...Background
Attributes
...that are available for all BODY objectsText
HeadingsFonts
Preformatted text
Change text direction
Special Characters
Character Formatting
...Blink
...Bold
...Italics
...Underline
...Strikethrough
...Superscript
...Subscript
Paragraph formatting
...Blockquote
...Line Breaks
...New Paragraph
...Stop Line Breaks
...Word Break
...Centre text
...Marking Modifications
Miscellaneous
...Abbreviation
...Acronyms
...Addresses
...Use Bigger/Smaller fonts
...Citations
...Code
...Definitions
...Keyboard input
...Sample
...Teletype
...Variables
...XMP
Organisation tools
CommentsHorizontal lines
DIV and SPAN
Links
...<LINK>s
...within pages
...Image maps
Frames
...Naming and Targeting
...Inline Frames
Tables
...example tag
...Rows
...Cells
...Captions
...Head, Body & Foot
Lists
...Definition lists
...Directory Lists
...Menu Lists
...Ordered Lists
...Unordered Lists
Embedding special files
The Object Element
Forms
Inputs and buttonsSelection menus
Element Labels
Fieldsets and legends
Images
Sounds
Style Sheets
specifying versionindividual elements
in the HEAD section
specifying media types
external sheets
cascading sheets
media-dependant defaults
HTTP headers
Special Effects - Javascript
Events...onAbort
...onBlur
...onChange
...onClick
...onError
...onFocus
...onLoad
...onMouseOver
...onMouseOut
...onReset
...onScroll
...onSelect
...onSubmit
...onUnload
Basic Commands
...Changing the status bar
...Opening a new window
...changing page being viewed
Search Engines
Forms
These allow people to send you feedback about your site. They are bounded by the following tags:<form action="???" method="???"> </form>ACTION is the address to which the contents of the form is sent, and is usually a CGI script or email address. Xoom users cannot use custom CGI scripts for security concerns. Members can either use
action="mailto:[your email address]" to email the form.METHOD is one of POST or GET, in Xoom you will only need POST.
There is a further attribute,
enctype, which specifies the format in which to send the form data. The default is application/x-www-form-urlencoded, but you can usually just ignore this attribute. text/plain will make the output easier to read.
Forms can contain any of the HTML elements, but the following special items determine the data that a form sends. All form items contain "name" and "value" attributes, since form data is submitted as Name: Value pairs... The best thing to do is experiment an see what happens!
Input
The code is as follows, where NAME is the name of the value's field, used when the form data is posted. The CHECKED attribute specifies whether of not an object (such as radio or check boxes) is initially selected. < INPUT type="Text" name="???" value="Initial Value" size="number of characters" maxlength="maximum size of text" > <
input type="CheckBox" name="???" value="Value sent if selected" checked > <
input type="Radio" name="use the one name for a button group" value="value sent if button selected" checked
> <
input type="Password" name="???" value="Initial value" size="???" maxlength="???"
> <
input type="Reset" name="???" value="Button Label"
> <
input type="Submit" name="???" value="Button Label"
>Other Buttons
<button type=reset|submit|button name="???" value="Button Label"
>When used with the type=button, the button has little effect unless a javascript function is assigned to it - see the special effects section for more information.
Selection boxes
The above was created with the following code:
<select name="Selection Name" size="3" multiple >
<OPTGROUP label="Group 1">
<option value="1">Option 1
<option value="2" selected>Option 2
</optgroup>
<OPTGROUP label="Group 2">
<option value="3">Option 3
<option value="4">Option 4
<option value="5">Option 5
</optgroup>
</select>
The MULTIPLE attribute allows more than one option to be selected. SIZE is the amount of visible items.
<textarea name="???" cols="??" rows="??" wrap="virtual|physical|off" > initial text </textarea>
WRAP specifies whether text is seen and sent as typed (off), wrapped on-screen but sent as typed (virtual), or wrapped on screen and sent as seen.
Labels on Forms
< LABEL for="???" accesskey=?> (label contents here) </LABEL>A label is associated with the same form object which has an id attribute matching the label's for attribute.
Fieldsets and Legends
It is possible to group related objects on a form (e.g. those relating to someone's address) by placing<FIELDSET> </FIELDSET> tags around them.You should then use the LEGEND tags to describe what the fieldset is about, as such:
<FIELDSET>
<LEGEND> (fieldset description here )</LEGEND>
</FIELDSET>
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.