YL html form demo

30
Form Tag <FORM> Input element </FORM> Form tag contains input element Form tag :

description

YL html form demo

Transcript of YL html form demo

Page 1: YL html form demo

Form Tag

<FORM>Input element

</FORM>

Form tag contains input

elementForm tag :

Page 2: YL html form demo

Here input element of FORM tag : checkbox

Observe checkbox for different types

of chocolates

Page 3: YL html form demo

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

Go to saved file

Right click on it and Open with

Internet Explorer

Page 5: YL html form demo

Now check how FORM tag works--

It will show checkbox as input field

Page 6: YL html form demo

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

Now check how FORM tag works--

Password is not displayed

Look at the input fields

Page 8: YL html form demo

Now input field for FORM tag is : radio buttons

We have taken here example of

radio buttons

Page 9: YL html form demo

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

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

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

HTML Heading Tag

<H1>…</H1>

<H2>…</H2>

<H3>…</H3>>

<H4>…</H4>>

Page 13: YL html form demo

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

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

HTML Images

Page 16: YL html form demo

Create images folder in directory where you have saved your html page and put images in that folder

Page 17: YL html form demo

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

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

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

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

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

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

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

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

HTML Definition Lists

Definition ListPen

- Blue PenEraser

- White Eraser

Page 26: YL html form demo

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

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

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

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

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