Lecture 13
Lecture 13
Branch- CSE
Web Technology
Lecture- 13
Frames, forms
By
Mr. Madhukar
Assistant Professor
Department of Information Technology
Krishna Engineering College, Ghaziabad
HTML-Frames
• HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document.
• A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into
rows and columns.
• Creating Frames: To use frames on a page we use <frameset> tag instead of
<body> tag.
• The <frameset> tag defines, how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames. Each frame is indicated by <frame> tag
and it defines which HTML document shall open into the frame.
HTML- Frames contd.
• Example:
<html>
<frameset rows=“10%,80%,50%”>
<frame name=“first” src=“html/first_frame.htm”/>
<frame name=“second” src=“html/first_frame.htm”/>
</frameset>
<frameset cols=“10%,80%,50%”>
<frame name=“first” src=“html/first_frame.htm”/>
<frame name=“second” src=“html/first_frame.htm”/>
</frameset>
</html>
HTML- Forms
• An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
• There are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.
• The <form> Element: The HTML <form> element is used to create an HTML
form for user input:
Example: <form> …form elements </form>
• The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc. Example:
• <form> <input type="text" id="fname" name="fname"><br> </form>
HTML- Forms contd.
• The <input> Element: The <input> Element element is the most used form
element.
• An <input> element can be displayed in many ways, depending on the type
attribute.
HTML forms attribute
• The Name Attribute for <input>: input field must have a name attribute to be
submitted.
• If the name attribute is omitted, the value of the input field will not be sent
at all. Example:
<input type="text" id="fname" value="John"><br><br>
• The action attribute defines the action to be performed when the form is
submitted.
HTML- Forms contd.
Example: <form action="/action_page.php">
• The Target Attribute: The Target attribute specifies where to display the response
that is received after submitting the form.
Example: <form action="/action_page.php" target="_blank">
• The Method Attribute: The method attribute specifies the HTTP method to be
used when submitting the form data. The default HTTP method when submitting
form data is GET. Data can be sent using POST method.
Example: <form action="/action_page.php" method="get">
• The Autocomplete Attribute: The autocomplete attribute specifies whether a
form should have autocomplete on or off.
Example: <form action="/action_page.php" autocomplete="on">
• The Novalidate Attribute: it specifies that the form-data (input) should not be
validated when submitted. Example: <form action="/action_page.php" novalidate>
HTML- Forms contd.
The HTML form elements:
The HTML <form> element can contain one or more of the following form
elements:
<input>: <input type="text" id="fname" name="fname">
<label>: <label for="cars">Choose a car:</label>
<select>:The select element defines a drop-down list:
<textarea>: <textarea name="message" rows="10" cols="30">
<button>: <button type="button" onclick="alert('Hello World!')">Click
Me!</button>
<fieldset>: the fieldset element is used to group related data in a form.
<legend>: This element defines a caption for the fieldset element.
<datalist>: This element specifies a list of pre-defined options for an input
element.
<output>: this element represents the result of a calculation
<option>: create a drop down list.
HTML- Forms contd.
• HTML input types:
• Here are the different input types you can use in HTML.
Thank You