Scribd
Upload
5 views

HTML Forms and Frames (2)

The document provides an overview of HTML forms and frames, detailing how to create various input elements such as text fields, checkboxes, radio buttons, and submit buttons using specific HTML tags. It also explains the use of frames to display multiple web pages within the same browser window, including examples of vertical and horizontal framesets. Additionally, it highlights the limitations and considerations of using frames in web development.

Uploaded by

kalasingayvonne
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML Forms and Frames (2)

The document provides an overview of HTML forms and frames, detailing how to create various input elements such as text fields, checkboxes, radio buttons, and submit buttons using specific HTML tags. It also explains the use of frames to display multiple web pages within the same browser window, including examples of vertical and horizontal framesets. Additionally, it highlights the limitations and considerations of using frames in web development.

Uploaded by

kalasingayvonne
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Forms and Input

HTML forms are used to pass data to a server.


A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:


<form>.
input elements
.</form>
HTML Forms are used to select different kinds of user input.
Examples

HTML Forms - The Input Element


The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can
be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.

HTML Form Tags


Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button

Create text fields


How to create text fields. The user can write text in a text field.
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is
20 characters.</p>
</body>
</html>

Create password field


How to create a password field.
<html>
<body>
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or
circles).</p>
</body>
</html>

Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of
a limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp". The page will show you the
received input.
More Input Examples
Radio buttons
How to create radio buttons.
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<p><b>
Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons
with equal name become unchecked.</p>
</body>
</html>

Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
</body>
</html>

Simple drop-down list


How to create a simple drop-down list.
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited
number of characters.
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>

Create a button
How to create a button.
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>

Form Examples

Fieldset around form-data


How to create a border around elements in a form.
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>

Form with text fields and a submit button


How to create a form with two text fields and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>

Form with checkboxes


How to create a form with two checkboxes and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>

</body>
</html>

Form with radio buttons


How to create a form with two radio buttons, and a submit button.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="submit" value="Submit" />
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>

Send e-mail from a form


How to send e-mail from a form.
<html>
<body>
<h3>Send e-mail to [email protected]:</h3>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

HTML Frames
With frames, several Web pages can be displayed in the same browser window.
ATTENTION. Do not expect frames to be supported in future versions of HTML.

HTML Frame Tags


Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
Examples
Vertical frameset
How to make a vertical frameset with three different documents.
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

Horizontal frameset
How to make a horizontal frameset with three different documents.
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

HTML Frames
With frames, you can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
Frames are not expected to be supported in future versions of HTML
Frames are difficult to use. (Printing the entire page is difficult).
The web developer must keep track of more HTML documents

The HTML frameset Element


The frameset element holds one or more frame elements. Each frame element can hold a separate
document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.

The HTML frame Element


The <frame> tag defines one particular window (frame) within a frameset.
In the example below we have a frameset with two columns.

The first column is set to 25% of the width of the browser window. The second column is set to
75% of the width of the browser window. The document "frame_a.htm" is put into the first
column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>

Note: The frameset column size can also be set in pixels (cols="200,500"), and one of the
columns can be set to use the remaining space, with an asterisk (cols="25%,*").
Tip: If a frame has visible borders, the user can resize it by dragging the border. To prevent a
user from doing this, you can add noresize="noresize" to the <frame> tag.
Note: Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset></frameset>
tags! However, if you add a <noframes> tag containing some text for browsers that do not
support frames, you will have to enclose the text in <body></body> tags! See how it is done in
the first example below.

More Examples
How to use the <noframes> tag
How to use the <noframes> tag (for browsers that do not support frames).
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>

Nested framesets
How to create a frameset with three documents, and how to mix them in rows and columns.
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
</html>

Frameset with noresize="noresize"


How to use the noresize attribute. Move the mouse over the borders between the frames and
notice that you cannot move the borders.
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" />
<frame noresize="noresize" src="frame_b.htm" />
</frameset>
</html>

Navigation frame
How to make a navigation frame. The navigation frame contains a list of links with the second
frame as the target. The file called "tryhtml_contents.htm" contains three links. The source code
of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm" name="showframe" />
</frameset>
</html>

Jump to a specified section within a frame


Two frames. One of the frames has a source to a specified section in a file. The specified section
is made with <a name="C10"> in the "link.htm" file.

Jump to a specified section with frame navigation


Two frames. The navigation frame (content.htm) to the left contains a list of links with the
second frame (link.htm) as a target. The second frame shows the linked document. One of the
links in the navigation frame is linked to a specified section in the target file. The HTML code in
the file "content.htm" looks like this: <a href ="link.htm" target ="showframe">Link without
Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.

<html>
<frameset cols="180,*">
<frame src="content.htm" />
<frame src="link.htm" name="showframe" />
</frameset>
</html>

You might also like