yl html form demo
DESCRIPTION
YL html form demoTRANSCRIPT
![Page 1: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/1.jpg)
Form Tag
<FORM>Input element
</FORM>
Form tag contains input
elementForm tag :
![Page 2: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/2.jpg)
Here input element of FORM tag : checkbox
Observe checkbox for different types
of chocolates
![Page 3: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/3.jpg)
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
![Page 4: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/4.jpg)
Go to saved file
Right click on it and Open with
Internet Explorer
![Page 5: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/5.jpg)
Now check how FORM tag works--
It will show checkbox as input field
![Page 6: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/6.jpg)
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
![Page 7: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/7.jpg)
Now check how FORM tag works--
Password is not displayed
Look at the input fields
![Page 8: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/8.jpg)
Now input field for FORM tag is : radio buttons
We have taken here example of
radio buttons
![Page 9: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/9.jpg)
Output will look like below when you open the page in internet explorer
It will show radio buttons as input field
![Page 10: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/10.jpg)
Kindly find the below html code for FORM tag : Submit Button
We have taken here example of Submit Button
![Page 11: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/11.jpg)
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
![Page 12: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/12.jpg)
HTML Heading Tag
<H1>…</H1>
<H2>…</H2>
<H3>…</H3>>
<H4>…</H4>>
![Page 13: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/13.jpg)
Kindly find the below html code for Heading tag
We have taken here example of
Heading tag from H1 to H4
![Page 14: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/14.jpg)
Output will look like below when you open the page in internet explorer
It will show Heading format form <H1> to <H4>
![Page 15: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/15.jpg)
HTML Images
![Page 16: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/16.jpg)
Create images folder in directory where you have saved your html page and put images in that folder
![Page 17: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/17.jpg)
Kindly find the below html code for Image tag
We have taken here example image which is
located in “images” folder
![Page 18: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/18.jpg)
Output will look like below when you open the page in internet explorer
It will show the image which you want to show
![Page 19: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/19.jpg)
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
![Page 20: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/20.jpg)
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
![Page 21: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/21.jpg)
Output will look like below when you open the page in internet explorer
It is showing the ordered list data
![Page 22: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/22.jpg)
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
![Page 23: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/23.jpg)
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
![Page 24: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/24.jpg)
Output will look like below when you open the page in internet explorer
It is showing the Un-ordered list data
![Page 25: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/25.jpg)
HTML Definition Lists
Definition ListPen
- Blue PenEraser
- White Eraser
![Page 26: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/26.jpg)
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
![Page 27: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/27.jpg)
Output will look like below when you open the page in internet explorer
It is showing the Definition list data
![Page 28: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/28.jpg)
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
![Page 29: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/29.jpg)
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
![Page 30: YL html form demo](https://reader033.vdocuments.net/reader033/viewer/2022061209/548e24b0b4795917128b45fa/html5/thumbnails/30.jpg)
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