The form Element

A form is a section of a document that contains blank areas that can be filled by a user and submitted to be processed. In (X)HTML the form element is used to create a form. It contains various form controls. It is a block element and can have only block elements and the script element as children. form elements cannot be nested within each other.

These are the allowed child elements of form:

• p
• h1 to h6
• ul and ol
• pre
• dl
• div
• noscript
• blockquote
• hr
• table
• fieldset
• address
• script

Attributes

Core Attributes

The core attributes can be applied to this element.

accept

The value of this attribute is a comma-separated list of MIME types which the server can process. Browsers should not allow a user to upload files of a type that is not listed. However, none of the major browsers support this feature.

Example: <form action="" accept="image/gif, image/jpeg">

accept-charset

This attribute specifies the character encodings of the user input that the form processing server must accept in order to process the form. The value of this attribute is a comma-separated or space-separated list of IS0 character set names. The default value is unknown, which the browser will interpret as the same character encoding that the page that contains the form is in. Based on this attribute, a browser may restrict the characters that are entered by the user in the form. However, none of the major browsers impose this restriction. The character encoding of the user input can be any one of those that are listed in the accept-charset attribute.

Here is a list of character encodings http://www.w3schools.com/TAGS/ref_charactersets.asp

Example: <form action="" accept-charset="ISO-8859-1,ISO-8859-2">

action

This is a required attribute. Its value is the URL of the web page or application that will process the form. If the value is left blank, then the browser submits the form to the current page.

Example: <form action="contact.php">…</form>

enctype

This attribute specifies the content type used to submit the form to the server when the form uses post to submit the form to the server (method=post). There are three possible values for the enctype attribute:

application/x-www-form-urlencoded

This is the default content type for post and the only encoding of get. With URL encoding, and the get method, the following ASCII characters get encoded as shown in the table:

Symbol	URL-Encoded
space	+
@	%40
#	%23
$	%24
%	%25
&	%26
-	%2B
+	%3D
:	%3A
;	%3B
,	%2C
?	%3F
/	%2F

If the method is post, in addition to the above mentioned characters, the following characters are encoded:

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E

text/plain

This encoding only converts spaces to "+" characters. This value has an effect only for post requests. get requests are URL-encoded regardless of the enctype value.

multipart/form-data

This Content Type is required when the form has a file upload form control. With this value, the form data is not encoded at all.

method

This attribute specifies the method that will be used to submit the form data. It can take the following values:

get

This is the default when there is no method attribute or when it is blank. With get, a question mark (?) is appended to the end of the URL of the form application and then the form data is appended. The form data consists of the value of the name attribute followed by an equals sign and the data of the form control. Subsequent name-value pairs are separated by ampersands (&). The value of the form controls are URL-encoded.

post

With this method the form data is sent as an HTTP post request. When the enctype is application/x-www-form-urlencoded, the form data is encoded as described earlier. When the enctype is text/plain the data is not encoded except for the space character which is encoded as the plus (+) character. When the enctype is multipart/form-data, the form data is not encoded at all.

target

Transitional DTDs allow the form tag to have the target attribute. With this attribute, you can specify the name of the window in which the form result should open.

The target attribute is also useful in frame documents. Using this attribute, a form in one frame can show its results in another.

Special Targets

There are four special target values:

_blank

This target causes the form results to always open in a new window. The new window will not have an internal name.

_self

This target causes the form results to always load in the same window or frame as the form. This is the default behavior of forms.

_parent

This causes the form results to open in the parent of the document that contains the link. This is useful when using iframes.

_top

This causes the form results to open in the topmost frame in the hierarchy.

The font Element

This is a deprecated element that was formerly used to specify the font-family, font size, and the color of the text within it. The CSS properties font, font-family, font-size, and color should be used instead of the font element.

Attributes

Core Attributes

The core attributes can be applied to this element.

color

The color of the text can be specified in hexadecimal notation or by color name.

face

The typeface (font-family) can be specified as a list of comma separated names.

size

A number between 1 and 7.

The fieldset and legend Elements

The fieldset element is used to group related form elements together. It is a block element. Therefore its parent elements can be div, form etc. It can contain both block and inline elements as child elements. fieldset elements can be nested within each other.

The legend element is a required child element of fieldset. It is an inline element that contains a name for the group of elements contained by fieldset. A fieldset element can contain only one legend element.

Example: <form action=""> <p>One form Element: <input type="text" id="test1"></p> <p>Two form element: <input type="text" id="test2"></p> <p>Three form element: <input type="text" id="test3"></p> <fieldset> <legend>test 2</legend> <p>Oneone form element: <input type="text" id="test21"></p> <p>Onetwo form element: <input type="text" id="test22"></p> <p>Onethree form element: <input type="text" id="test23"></p> </fieldset> <p><input type="submit" id="submit1"></p> </form>

The above image shows how the code is rendered in Firefox. Note how the text of the legend element appears at the top left side of the grouped form elements.

Internet Explorer Conditional Comments

With Internet Explorer Conditional Comments, one can hide HTML code from Internet Explorer, or reveal code only to Internet Explorer. The conditional comment code consists of Internet Explorer's proprietary code within HTML comments. Since the proprietary code is within conditional comments, it is hidden from all other browsers. IE Conditional Comments does not cause a page to become invalid.

Example 1:
<!--[if IE]>
<p>You are an Internet Explorer user.</p>
<![endif]-->

In the above example, the p element only appears in Internet Explorer. All other browsers treat the entire piece of code as an HTML comment.

Specific versions of Internet Explorer or all versions above or below a particular version can be targeted using operators

Example 2:
<!--[if lte IE 7]>
<p>You are using an outdated version of Internet Explorer.</p>
<![endif]-->

In the above example, lte is the operator. It stands for "less than or equal to".

Here is a list of Operators and their meanings

Operator	Meaning	Example
!	The NOT operator	<!--[if !(IE 9)]>
lt	The less-than operator	<!--[if lt IE 9]>
lte	The less-than-or equal to operator	<!--[if lte IE 8]>
gt	The greater-than operator	<!--[if gt IE 8]>
gte	The greater-than-or equal to operator	<!--[if gte IE 8]>
&	The AND operator	<!--[if (lte IE 8)&(gte IE 6)]>
|	The OR operator	<!--[if (IE 8)|(IE 6)]>

To hide HTML code from Internet Explorer, use the format shown below:

Example 3:
<!--[if !IE]><!-->
<p>You are not using Internet Explorer.</p>
<!--><![endif]-->

To hide HTML code from only certain versions of Internet Explorer, use the format shown below:

Example 4:
<!--[if IE 9]><!-->
<p>You are using a modern browser.</p>
<!--><![endif]-->

More information can be found at MSDN.

The <embed> and <noembed> Elements

The embed element is a non-standard element that is used to embed multimedia content into a webpage. Often, the multimedia content will require browser plugins like Flash Player, QuickTime Player etc.

The embed element is not part of any current (X)HTML standard except the unfinalized HTML 5. The recommended element for embedding media objects is the object element, which is part of the HTML 4.01 and XHTML 1.0 Standard.

The embed element can have a block or inline parent element.

Attributes

align

This attribute can take the values left, right, top and bottom. However, it is perferable to use CSS instead of this attribute.

height and width

Specifies the height and width of the element. It is perferable to use CSS instead of these attributes.

name and id

These attributes specify a name for the embedded object. However, it is better to use only the id attribute because name is deprecated in XHTML.

hidden

This attribute can take the values yes or no. A value of yes hides the object. This is not a well supported attribute and must therefore be avoided.

pluginspage

The value of this attribute is a URL of a page that contains instructions on how to download and install the plugin required to render the embedded content. This attribute is obsolete.

hspace and vspace

These attributes were used to specify the amount of horizontal and vertical space that should be left clear of the embedded object. It is preferable to use CSS instead of these attributes.

src

The value of this attribute is the URL of the file or object to be embedded.

type

The value of this attribute is the MIME type of the embedded object. However, the browser can also determine the type of object by the file extension of the file specified by src or by the header sent by the server when the object is accessed.

HTML 5 allows any other attributes that are specific to the kind of object embedded.

The noembed Element

This is a nonstandard child element of the embed element. It contains text, images or objects that are displayed when the embedded object cannot be displayed.

The <em> and <strong> Elements

The em element is used to indicate text that is emphasized. All major browsers render emphasized text in italics.

Example 1:
<p>This is <em>the</em> website for web design information.</p>

The strong element is used to strongly emphasize the enclosed text. All major browsers render the text within this element with a boldface font.

Example 2:
<p>This product has a <strong>lifetime</strong> warranty.</p>

Attributes

Core Attributes

The core attributes can be applied to this element.