This is second part of HTML Digital Note Book on this blog . I hope that it's useful to
readers .... you can leave your queries, suggestion to me as a comment
and you can save this notebook on your computer..... if it is useful
for you - Thanks.
HTML web forms are a composition of buttons, checkboxes, and text
input fields embedded inside of HTML documents with one goal in mind: to
capture user input. By doing things such as providing fields for user data such
as names, phone number, and email addresses, web forms give users the
opportunity to interact directly with a webpage.
HTML
forms are placed on a web page using the <form> tag. This tag should
encapsulate a series of other form elements, identifying them as a single cohesive
web form.
HTML Form Element:
<form name="myWebForm" action="myServerSideScript.php" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
HTML - Input Element(s)
HTML
input elements are form elements such as text fields, checkboxes, and buttons.
The name comes from the <input> tag, which is the mark-up that identifies
web form components. The <input> tag relies upon a few attributes to
classify and name each form item, providing the web developer with a means to
manipulate each element individually.
The
type attribute determines what kind of input element to render to the
screen. Options here include: text, checkbox, radio, button, submit, reset,
password, and hidden form elements. Each has its own unique
functionality and customizable presentation.
HTML Input Element Code:
Name: <input type="text" name=”yumesh” value="enter your Name" maxlength=”25” size=”20”>
HTML - Password Fields
HTML
password fields are designed to capture user input, but disguise each character
with an asterisk (*) instead of displaying the entered digits. They offer a
user on-screen privacy while he or she is entering a password.
Password
fields are placed on a website using the <input> tag and specify a value
of "password" for the type attribute.
HTML Password Field Code:
Password: <input type="password" name=”yumesh” maxlength=”25” size=”20”>
HTML - Reset Buttons
A
reset button allows users to basically clear their web form. It wipes values
from all fields by "resetting" the form to its default appearance.
Set
the type attribute of the <input> tag to "reset" to
incorporate a reset button into a web form.
HTML Reset Button Code:
<input type="reset" value="Cancel">
HTML - Submit Buttons
Submit
buttons send form data to a back-end process or application. The back-end
process then verifies and precesses the data, eventually passing the
information into some database application.
Set
the type attribute of the <input> tag to "submit" in
order to place a submit button on a web page.
HTML Submit Buttons:
<input type="submit" value="ok" />
or
<br /><input type="submit" value="Send" />
HTML Code:
<form method="post" action="mailto:youremail@youremail.com">
<input type="submit" value="Send Email" />
</form>
HTML - Checkbox Forms
Setting
the type attribute of an <input> tag to checkbox places a
checkbox element onto the web page.
Deploy
checkbox elements in a situation when the user must check all boxes that apply
(or none). A scripting language such as PHP will easily handle this form
element, returning all elements the user has checked.
HTML Checkbox Code:
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" name="sports" value="basketball" />
</form>
HTML Checkboxes Selected
A
checkbox element can be placed onto a web page in a pre-checked fashion by
setting the checked attribute with a "yes" value. By doing so,
this element will now default to a checked status each time the HTML page is
loaded.
HTML Checkbox Selected Code:
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
HTML - Radio Forms
Radio
form elements resemble the "Scan-Tron" sheets you may have used when
you were in school to take a test. They basically allow the user to
"bubble" in their choice and limit each question to only one
selection per radio group.
Place
a radio element on to your web page by setting the type attribute of the
<input> tag to "radio".
HTML Radio Input Code:
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
HTML Multiple Radios:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<h4>Please select your gender.</h4>
<input type="radio" name="gender" /> : Male<br />
<input type="radio" name="gender" /> : Female<br />
Lt44/form>
HTML - Select Fields
Incorporating
a select field into a web page is done using the <select> tag. List
values are then added to the field using the <option> tag, similar to how
list items <li> are added to ordered list elements (<ol>).
HTML Drop Down List:
<select name="selectionField">
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>
HTML - Upload Forms
Upload
fields provide the interface that allows users to select a local file and
upload it to the web server. An upload field renders as two parts -- an empty
text field and a Browse button that opens up a local window explorer on
the user's computer. This allows them to quickly browse to the local file and
automatically fills in the file path inside of the text field.
Setting
the type attribute of the <input> to "file" places the
upload element on a web page.
HTML Upload Field Code:
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" name="uploadField" />
HTML - Textareas
An
HTML textarea is an oversized Text Field capable
of capturing "blurb" type information from a user. If you've ever
posted on a forum or left feedback on your favorite blog, you probably do so
using an HTML textarea.
Embed
textareas in HTML documents using the <textarea> tag. Any text placed
between the opening and closing textarea tags will be rendered inside the
textarea element as the "default" text. This makes for a great way to
give users an example or description of how to go about filling out the text
area field. Something like, "Please limit your response to 100
characters," would be an ideal description.
HTML Textarea Code:
<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
As
you may have noticed, the attributes cols (columns) and rows
control the rendered size of the textarea. These constraints only impact how
the textarea is rendered visually, and in no way do they limit the maximum
number of characters a user can place inside the textarea. In fact, if you fill
up the fields above with text, the fields will just continue to grow as you
type and you will be able to scroll up and down as you please. Limits must be
set with JavaScript and/or a server-side scripting language such as PHP.
HTML Frames
Frames divide a browser window into several pieces or panes, each pane
containing a separate XHTML/HTML document. One of the key advantages that
frames offer is that you can then load and reload single panes without having
to reload the entire contents of the browser window. A collection of frames in
the browser window is known as a frameset.
The window is divided up into frames in a similar pattern to the way tables
are organized: into rows and columns. The simplest of framesets might just
divide the screen into two rows, while a complex frameset could use several
rows and columns.
There are few drawbacks also you should be aware of with frames are as
follows:
·
Some browsers do not print well from framesets.
·
Some smaller devices cannot cope with frames,
often because their screen is not big enough to be divided up.
·
Some time your page will be displayed
differently on different computers due to different screen resolution.
·
The browser's back button might not work
as the user hopes.
·
There are still few browsers who do not support
farme technology.
To create a frameset document, first you need the <frameset> element,
which is used instead of the <body> element. The frameset defines the
rows and columns your page is divided into, which in turn specify where each
individual frame will go. Each frame is then represented by a <frame>
element.
You also need to learn the <noframes> element, which provides a
message for users whose browsers do not support frames.
Now we will discuss these tags in detail one by one.
Creating Frames - The <frameset> Element:
·
The <frameset> tag replaces the
<body> element in frameset documents.
·
The <frameset> tag defines how to divide
the window into frames.
·
Each frameset defines a set of rows or
columns. If you define frames by using rows then horizontal frames are created.
If you define frames by using columns then vertical farmes are created.
·
The values of the rows/columns indicate the
amount of screen area each row/column will occupy.
·
Each farme is indicated by <frame> tag and
it defines what HTML document to put into the frame.
Example:
Following is the example to create three horizontal frames:
<html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%">
<frame src="/html/top_frame.htm" />
<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html> |
The <frameset> Element Attributes:
Following are important attributes of <frameset> and should be known
to you to use frameset.
·
cols: specifies how many columns are
contained in the frameset and the size of each column. You can specify the
width of each column in one of four ways:
o
Absolute values in pixels. For example to create
three vertical frames, use cols="100, 500,100".
o
A percentage of the browser window. For example
to create three vertical frames, use cols="10%, 80%,10%".
o
Using a wildcard symbol. For example to create
three vertical frames, use cols="10%, *,10%". In this case
wildcard takes remainder of the window.
o
As relative widths of the browser window. For
example to create three vertical frames, use cols="3*,2*,1*".
This is an alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the first column takes
up half of the window, the second takes one third, and the third takes one
sixth.
·
rows: attribute works just like the cols
attribute and can take the same values, but it is used to specify the rows in
the frameset. For example to create two horizontal frames, use rows="10%,
90%". You can specify the height of each row in the same way as
explained above for columns.
·
border: attribute specifies the width of
the border of each frame in pixels. For example border="5". A value
of zero specifies that no border should be there.
·
frameborder: specifies whether a
three-dimensional border should be displayed between frames. This attrubute
takes value either 1 (yes) or 0 (no). For example frameborder="0"
specifies no border.
·
framespacing: specifies the amount of
space between frames in a frameset. This can take any integer value. For
example framespacing="10" means there should be 10 pixels spacing
between each frames.
Loading Content - The <frame> Element:
The <frame> element indicates what goes in each frame of the frameset.
The <frame> element is always an empty element, and therefore should not
have any content, although each <frame> element should always carry one
attribute, src, to indicate the page that should represent that frame.
From the above example, lets take small snippet:
<frame src="/html/top_frame.htm" />
<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />
|
The <frame> Element Attributes:
Following are important attributes of and should be known to you to use
frames.
·
src: indicates the file that should be
used in the frame. Its value can be any URL. For example,
src="/html/top_frame.htm" will load an HTML file avaible in html
directory.
·
name: attribute allows you to give a name
to a frame. It is used to indicate which frame a document should be loaded
into. This is especially important when you want to create links in one frame
that load pages into a second frame, in which case the second frame needs a
name to identify itself as the target of the link.
·
frameborder: attribute specifies whether
or not the borders of that frame are shown; it overrides the value given in the
frameborder attribute on the <frameset> element if one is given, and the
possible values are the same. This can take values either 1 (yes) or 0 (no).
·
marginwidth: allows you to specify the
width of the space between the left and right of the frame's borders and the
frame's content. The value is given in pixels. For example
marginwidth="10".
·
marginheight: allows you to specify the
height of the space between the top and bottom of the frame's borders and its
contents. The value is given in pixels. For example
marginheight="10".
·
noresize: By default you can resize any
frame by clicking and dragging on the borders of a frame. The noresize
attribute prevents a user from being able to resize the frame. For example
noresize="noresize".
·
scrolling: controls the appearance of the
scrollbars that appear on the frame. This takes values either "yes",
"no" or "auto". For example scrolling="no" means
it should not have scroll bars.
·
longdesc: allows you to provide a link to
another page containing a long description of the contents of the frame. For
example longdesc="framedescription.htm"
Browser Support - The <noframes> Element:
If a user is using any old browser or any browser which does not support
frames then <noframes> element should be displayed to the user.
In XHTML you must place a <body> element inside the <noframes>
element because the <frameset> element is supposed to replace the
<body> element, but if a browser does not understand the <frameset>
element it should understand what is inside the <body> element contained
in the <noframes> element.
You can put some nice message for your user having old browsers. For example
Sorry!! your browser does not support frames.
Frame's name and target attributes:
One of the most popular uses of frames is to place navigation bars in one
frame and then load the pages with the content into a separate frame.
As you have already seen, each <frame> element can carry the name
attribute to give each frame a name.This name is used in the links to indicate
which frame the new page should load into. Consider this very simple example,
create following content in index.htm file:
<frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
</frameset> |
There are two columns in this example. The first is 200 pixels wide and will
contain the navigation bar. The second column or frame will contain the main
part of the page. The links on the left side navigation bar will load pages
into the right side main page.
Keep some content in main.htm file and the links in the menu.htm file look
like this:
<a href="http://www.google.com" target="main_page">Google</a> <br /><br /> <a href="http://www.microsoft.com" target="main_page">Microsoft</a> <br /><br /> <a href="http://news.bbc.co.uk/" target="main_page">BBC News</a> |
To Become more comfortable - Do Online Practice
The target attribute can also take the attribute values listed in the
table that follows.
Vlaue
|
Description
|
_self
|
Loads the page into the current frame.
|
_blank
|
Loads a page into a new browser window.opening a new
window.
|
_parent
|
Loads the page into the parent window, which in the case
of a single frameset is the main browser window.
|
_top
|
Loads the page into the browser window, replacing any
current frames..
|
Inline Frames - The <iframe> Element:
You can define an inline frame with the <iframe> tag. The
<iframe> tag is not used within a <frameset> tag. Instead, it
appears anywhere in your document. The <iframe> tag defines a rectangular
region within the document in which the browser displays a separate document,
including scrollbars and borders.
Use the src attribute with <iframe> to specify the URL of the
document that occupies the inline frame.
All of the other, optional attributes for the <iframe> tag, including name,
class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling,
style, and title behave exactly like the corresponding attributes for the
<frame> tag.
Following is the example to show how to use the <iframe>. This tag is
used along with <body> tag:
<body> ...other document content... <iframe src="/html/menu.htm" width="75" height="200" align="right"> Your browser does not support inline frames. To view this <a href="/html/menu.htm">document</a> correctly, you'll need a copy of Internet Explorer or the latest Netscape Navigator. </iframe> ...subsequent document content... </body> |
The align attribute lets you control where the frame gets placed in
line with the adjacent text or moved to the edge of the document, allowing text
to flow around the frame.
Extra Note
Marquee Tags
1.
1<marquee
behavior="alternate" scrollamount="10">Community
Technology Access</marquee>2.
<marquee
direction="up" behavior="alternate"><marquee
behavior="alternate">Damak, Bagkhor</marquee></marquee>3.
<marquee
direction="up" behavior="alternate"
scrollamount="10" height="20"><marquee behavior="alternate"
scrollamount="10">
Video
<embed src="http://www.tizag.com/files/html/htmlexample.mpeg"
autostart="false" />
Note : Here have HTML Part One 1
Amazing blog...web design course
ReplyDelete