YL html form demo

Post on 15-Dec-2014

1,976 views 2 download

Tags:

description

YL html form demo

transcript

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