Scribd
Upload
75 views

HTML Tags

The document provides information and examples about different HTML form elements including text, password, checkbox, radio, file, image, and button inputs. It includes examples of the code needed to implement these form elements and screenshots of what they would look like.

Uploaded by

s18naveen
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
75 views

HTML Tags

The document provides information and examples about different HTML form elements including text, password, checkbox, radio, file, image, and button inputs. It includes examples of the code needed to implement these form elements and screenshots of what they would look like.

Uploaded by

s18naveen
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

<html>

<head>
While most browsers will "forgive" not including the <html>, <head> or even the
<body> tags, leaving them out can cause problems with some browsers. For XHTML,
closing tags are absolutely required.
<title>Your web page title here</title>
Title tags are displayed in the top title bar of the browser, sometimes followed
by the name of the browser itself. Screen readers read the title of each page when
it first loads (including the name of the browser, if shown by the browser). Too
many Web masters ignore the title tag, or give too little thought to it. Most
search engines will use the title tag in their search results displays. Good
titles will aid people in finding your site. Title tags are also useful in
bookmarking. Most browsers will display the title as the name of the bookmark.
If you want your bookmarked site to stand out or be readily found, you should have
a well thought out, brief title for your Web page. Keep in mind, however, that
long titles will often be cut-off in bookmark and search engine results displays.
Your carefully worded title should be brief, less than 120 characters (keep in
mind that WebTV only displays the first 12 characters in its "Recent" panel).
With the above in mind, do not put "Welcome to..." in your title tag, nor place
the Web address (or if you do, place it at the end of the title tag text string).
Again, keep it brief. Don't write "this is the main portal to XYZ Web site,"
instead write "Main portal to XYZ Web site" or better yet "XYZ's main portal.
<meta name="keyword" content="key words, keywords" />
Keep the keyword meta tag short, do not repeat keywords, think of alternate
spellings and even misspellings. All Meta tags should be "closed" with
/>
to make them XHTML ready (doing so will not cause any problems for browsers that
do not support XHTML).
<meta name="description" content="brief and to the point description of the web
page." />
Keep the description meta tag to 250 characters or less. Make sure it that it
clearly describes the page, and that it uses some of the keywords (but not the
misspellings) listed in the keyword meta tag. If you don't include a description
meta tag, some search sites may use the first sentence or two of your text,
including any JavaScript coding (even if you comment out the coding).
<meta name="robots" content="all" />
Use a comma-separated list of one or more of those terms. Their meanings are:
• all -- same as index, follow (default)
• index -- index this page
• noindex -- do not index this page
• follow -- follow links from this page
• nofollow -- do not follow links from this page
• none -- same as noindex, nofollow (robots should ignore this page and should
not follow links from this page
Not all sites recognize the robots meta tag, but some of the major ones do
(Excite, Infoseek, Lycos, and WebCrawler).
In fact, most search engines do not recognize all meta tags. Some will use your
title tag for a description of the page, others will use the description meta tag,
others will use both the description tag, title tag and the keyword tag to rate
the "relevancy" of your page. Others will also read the top two sentences or the
bottom two sentences to help judge "relevancy." Do not overload your page with
keywords, this is called spamdexing and will actually more often than not penalize
your page with a lower relevancy ranking.
If you have any Javascript, JavaScript, JScript functions that are "called," or do
not write to the web page, include them after the meta tags and before the closing
head tag.
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000"
alink="#ffff00">
Most common and widely supported body attributes are
• background="URL" for background image
• bgcolor="RGB, Hex or Color Name for background color"
• text="RGB, Hex or Color Name for text color"
• link="RGB, Hex or Color Name for non-visited link color"
• vlink="RGB, Hex or Color Name for visited link color"
• alink="RGB, Hex or Color Name for active link color" (color that the link
becomes when the mouse cursor hovers over the link). The alink attribute is
ignored by WebTV.
These attributes are "depreciated," meaning that CSS is the preferred method of
setting these attributes.
Place your web content here between the <body> </body> tags. Don't forget to use
alt tags in any images that has informational content in them.
</body>
</html>
Close out the body and HTML document.
For cut-n-paste ease, the template coding is repeated below without the
commentaries:
<html>
<head>
<meta name="keyword" content="key words, keywords" />
<meta name="description" content="brief and to the point description of the web
page." />
<meta name="robots" content="all" />
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000"
alink="#ffff00">
</body>
</html>

BUTTON
________________________________________
Example coding
<FORM METHOD="POST" ACTION="someplace/foo.cgi" ENCTYPE="application/x-www-form-
urlencoded">
Computer Experience:<P>
<INPUT TYPE="button" NAME="choice" VALUE="Less than 1">Less than 1 year.<BR>
<INPUT TYPE="button" NAME="choice" VALUE="1 to 5">1-5 years.<BR>
<INPUT TYPE="button" NAME="choice" VALUE="More than 5">More than 5 years.
<P><INPUT TYPE="reset" VALUE="Clear Form">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
Results:
Computer Experience:

CHECKBOX
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<BR>
<INPUT TYPE="checkbox" NAME="choice"
VALUE="Less than 1">Less than 1 year.<BR>
<INPUT TYPE="checkbox" NAME="choice"
VALUE="1 to 5">1-5 years.<BR>
<INPUT TYPE="checkbox" NAME="choice"
VALUE="More than 5">More than 5 years.
<BR><INPUT TYPE="reset" VALUE="Clear Form">
<INPUT TYPE="submit" VALUE="Submit">
</FORM> Computer Experience:
Less than 1 year.
1-5 years.
More than 5 years.

FILE
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
<TABLE>
<TR>
<TD ALIGN="LEFT">Search your drive:
</TR><TR>
<TD ALIGN="LEFT">
<INPUT TYPE="file" NAME="look" ACCEPT="filetype/*" SIZE=25
MAXLENGTH=150>
</TR>
</TABLE>
<INPUT TYPE="reset" VALUE="Clear Form">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
Search your drive:

INPUT CHECKED
Having an input field checked by default. Can be used with Checkbox or Radio INPUT
TYPES.
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<BR>
<INPUT TYPE="radio" NAME="choice"
VALUE="Less than 1">Less than 1 year.<BR>
<INPUT TYPE="radio" NAME="choice"
VALUE="1 to 5">1-5 years.<BR>
<INPUT CHECKED TYPE="radio" NAME="choice"
VALUE="More than 5">More than 5 years.
<BR><INPUT TYPE="reset">
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
</FORM> Computer Experience:
Less than 1 year.
1-5 years.
More than 5 years.

MULTIPLE SUBMIT USING IMAGES


________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="mailto:address"
ENCTYPE="application/x-www-form-urlencoded">
<INPUT TYPE="image" SRC="crit_gd.gif" VALUE="I Loved it!" Name="I loved your
page">
<INPUT TYPE="image" SRC="crit_so.gif" VALUE="It was so-so." Name="Your page is so-
so">
</FORM>

________________________________________
PASSWORD
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
<TABLE>
<TR>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">Name?
<TD ALIGN="LEFT">
<INPUT TYPE="text" NAME="name" VALUE=""
SIZE="20" MAXLENGTH="150">
</TR> <TR>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">Password?
<TD ALIGN="LEFT">
<INPUT TYPE="password" NAME="password" VALUE=""
SIZE="25" MAXLENGTH="150">
</TR> </TABLE>
<INPUT TYPE="reset" VALUE="Clear Form">
<INPUT TYPE="submit" VALUE="Submit">
</FORM>
Name?

Password?

RADIO BUTTONS
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<BR>
<INPUT TYPE="radio" NAME="choice"
VALUE="Less than 1">Less than 1 year.<BR>
<INPUT TYPE="radio" NAME="choice"
VALUE="1 to 5">1-5 years.<BR>
<INPUT TYPE="radio" NAME="choice"
VALUE="More than 5">More than 5 years.
<BR><INPUT TYPE="reset" VALUE="Clear">
<INPUT TYPE="submit" VALUE="submit">
</FORM> Computer Experience:
Less than 1 year.
1-5 years.
More than 5 years.

RADIO GRID
________________________________________
T-Shirt Order
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi">
<TR>
<CAPTION="TOP"><B><B>T-Shirt Order</B></CAPTION>
<TD></TD><TD>White</TD><TD&gtBlue</TD>
</TR>
<TR>
<TD ALIGN="LEFT">Small</TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="smwhite"></TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="smblue"></TD>
</TR>
<TR>
<TD ALIGN="LEFT">Medium</TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="medwhite"></TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="medblue"></TD>
</TR>
<TR>
<TD ALIGN="LEFT">Large</TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="lgwhite"></TD>
<TD><INPUT NAME="torder" TYPE="radio" VALUE="lgblue"></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE="reset></TD>
<TD><INPUT TYPE="submit" VALUE="Order"></TD>
</TR>
</TABLE>
</FORM> White Blue
Small

Medium

Large

TEXT
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
<TABLE>
<TR>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">Name?
<TD ALIGN="LEFT">
<INPUT TYPE="text" NAME="name" VALUE=""
SIZE="20" MAXLENGTH="150">
<TR>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">Organization?
<TD ALIGN="LEFT">
<INPUT TYPE="text" NAME="organization" VALUE=""
SIZE="25" MAXLENGTH="150">
<TR>
<TD ALIGN="RIGHT" VALIGN="MIDDLE">
Email Address?
<TD ALIGN="LEFT">
<INPUT TYPE="text" NAME="email" VALUE=""
SIZE="25" MAXLENGHT="150">
</TABLE>
<INPUT TYPE="reset">
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
</FORM> Name?

Organization?

Email Address?

ISINDEX
________________________________________
Example ISINDEX coding Example ISINDEX coding results
<ISINDEX ACTION="someplace/foo.cgi"> ________________________________________
This is a searchable index. Enter search keywords:
________________________________________
OPTION
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<P>
<SELECT NAME="choice" >
<OPTION VALUE="Less than 1 year.">Less than 1 year.
<OPTION VALUE="1-5 years.">1-5 years.
<OPTION VALUE="More than 5 years.">More than 5 years.
</SELECT>
<BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
</FORM> Computer Experience:

OPTION -- SELECTED
Having an option selected by default
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<BR>
<SELECT NAME="choice" >
<OPTION VALUE="Less than 1 year.">Less than 1 year.
<OPTION VALUE="1-5 years.">1-5 years.
<OPTION SELECTED VALUE="More than 5 years.">More than 5 years.
</SELECT>
<BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit" VALUE="Send">
</FORM> Computer Experience:

OPTION -- SELECT MULTIPLE


Allows more than one choice to be selected. Usually done by holding down the CTRL
key while selecting.
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Computer Experience:<BR>
<SELECT MULTIPLE NAME="choice" SIZE="3">
<OPTION VALUE="Less than 1 year.">Less than 1 year.
<OPTION VALUE="1-5 years.">1-5 years.
<OPTION VALUE="5-10 years.">5-10 years.
<OPTION VALUE="More than 10 years.">More than 10 years.
</SELECT>
<BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit" VALUE="Submit">
</FORM> Computer Experience:

REDIRECT VIA SUBMIT


Must use GET instead of POST.
________________________________________
Example coding Example coding results
<FORM METHOD="GET" ACTION="index.htm"
<INPUT TYPE="submit" Name="redirect" VALUE="To Title Page">
</FORM>

STYLE SHEETS: COLOR IN FORM ELEMENTS


At present (Spring 1998) this only works in IE 3.0+
________________________________________
Example 1 coding Example 1 coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
<INPUT TYPE="text" VALUE="" NAME="example 1" STYLE="background: Red">
</FORM>

Example 2 coding Example 2 coding results


<FORM METHOD="POST" ACTION="someplace/foo.cgi"
<INPUT TYPE="button" VALUE="example 2" NAME="example2" STYLE="background: Red">
</FORM>

STYLE SHEETS: FONT STYLES IN FORM ELEMENTS


________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
<INPUT TYPE="button" VALUE="Non-Style Example" NAME="NonStyleExample"
</FORM>

<FORM METHOD="POST" ACTION="someplace/foo.cgi"


<INPUT TYPE="button" VALUE="Style Example" NAME="StyleExample" STYLE="color: blue;
font: 8pt bold italic Verdana, Arial, Helvetica, sans-serif">
</FORM>

TEXTAREA
________________________________________
Example coding Example coding results
<FORM METHOD="POST" ACTION="someplace/foo.cgi"
ENCTYPE="application/x-www-form-urlencoded">
Tell us about your computer experience:<BR>
<TEXTAREA NAME="choice" ROWS=5 COLS=25>
</TEXTAREA>
<BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit" NAME="submit" VALUE="Submit">
</FORM> Tell us about your computer experience:

You might also like