yl html form demo
DESCRIPTION
YL html form demoTRANSCRIPT
Form Tag
<FORM>Input element
</FORM>
Form tag contains input
elementForm tag :
Here input element of FORM tag : checkbox
Observe checkbox for different types
of chocolates
Go to File MenuAnd click on
Save As
Always save file with “ .html “
extension
Your file name should always end with “ .html “ extension . e.g demo.html
Click on Save
Go to saved file
Right click on it and Open with
Internet Explorer
Now check how FORM tag works--
It will show checkbox as input field
Now input fields for FORM tag are : Text field and password field
We have taken here example of
text and password field for user id and
password respectively
Now check how FORM tag works--
Password is not displayed
Look at the input fields
Now input field for FORM tag is : radio buttons
We have taken here example of
radio buttons
Output will look like below when you open the page in internet explorer
It will show radio buttons as input field
Kindly find the below html code for FORM tag : Submit Button
We have taken here example of Submit Button
Output will look like below when you open the page in internet explorer
If you enter some
characters and clicked on
submit button
Then it will pass data to
test_form.asp page to show respective
content
HTML Heading Tag
<H1>…</H1>
<H2>…</H2>
<H3>…</H3>>
<H4>…</H4>>
Kindly find the below html code for Heading tag
We have taken here example of
Heading tag from H1 to H4
Output will look like below when you open the page in internet explorer
It will show Heading format form <H1> to <H4>
HTML Images
Create images folder in directory where you have saved your html page and put images in that folder
Kindly find the below html code for Image tag
We have taken here example image which is
located in “images” folder
Output will look like below when you open the page in internet explorer
It will show the image which you want to show
HTML Ordered Lists
An ordered list1. Pen
2. Eraser3. scale
<OL>…..</OL> === > Main tag
<li>…..</li> === > Defines an List item
Tags we will use for HTML ordered list
Kindly find the below html code for Ordered List tag
We have taken here example of
Ordered list which will show the list
of Pen, Eraser, Scale respectively
Output will look like below when you open the page in internet explorer
It is showing the ordered list data
HTML Un-Ordered Lists
Un-Ordered List• Pen• Eraser• Scale
<UL>…..</UL> === > Main tag<li>…..</li> === > Defines an List ItemTags we will use for HTML Un-ordered
list
Kindly find the below html code for Ordered List tag
We have taken here example of Un-Ordered list which will show the list of Pen, Eraser, Scale respectively
Output will look like below when you open the page in internet explorer
It is showing the Un-ordered list data
HTML Definition Lists
Definition ListPen
- Blue PenEraser
- White Eraser
Kindly find the below html code for Ordered List tag
We have taken here example of Un-Ordered list which will show the list of Pen, Eraser, Scale respectively
Output will look like below when you open the page in internet explorer
It is showing the Definition list data
HTML Grouping Elements
Grouping Elements
Tag:<fieldset>…</fieldset>
<legend>…</legend>
1. Logically group together elements in a
form 2. Draws box around the
form
<legend> tag defines the caption for the fieldset
element
Kindly find the below html code for FIELDSET tag : Grouping of Text field and password field
We have taken here example of grouping of text
and password field for user id and
password respectively
Output will look like below when you open the page in internet explorer
It will show textbox and password as input field as a group of login details tab