Ordered and Unordered list in Html

Types of list in html

We define any defination and content in list form then we give order and unorder. Basically 3 types of list use in-
Unorder list
Order list
Defination list

Unordered list

An unordered The list items are marked with bullets (typically small black circles). An unordered list is a list of items. This list starts with the <ul> tag. Every list item starts with the <li> tag.

Example

<!DOCTYPE html>
<html>
<body>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</u1>
</body>
</html>

Output-
.List 1
.List 2
.List 3

Ordered list

An ordered list is also a list of items. The list items are Started with numbers. This ordered list starts with the <ol> tag. Every list item starts with the <li> tag.

Example

<!DOCTYPE html>
<html>
<body>
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</o1>
</body>
</html>

Output-
1. List 1
2. List 2
3. List 3

Definition Lists

A definition list is a list of items (terms), with a description of every item (term).It is not a list of items.
A definition list starts with a <dl> tag (definition list).
Every term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).

Example

<!DOCTYPE html>
<html>
<body>
<dl>
<dt>List 1</dt>
<dd>This is List1</dd>
<dt>List 2</dt>
<dd>This is List2</dd>
<dt>List 3</dt>
<dd>This is List3</dd>
</d1>
</body>
</html>

Output-
List 1
This is List1
List 2
This is List2
List 3
This is List3

Forms

HTML Forms are used to select different kinds of user input we describe many input.
Html formis defined with <form> tag
In this tag you can use many input tag like text box, drop down and radio button etc. Use form tag and write any content in between form tag then only show content rather then form tag because form tag is not visible user only hold content and input type.
Ex.
   <form>
         Write content
   </form>

Write Input element

Html language support many input element like-

Text Field

Text fields are used when you want the user to type Word, numbers, any content etc. in a form.Then use this text field like-

Example

<!DOCTYPE html>
<html>
<body>
<form >
Name:
<input type="text" id="txtname" name="name" /> </form >
</body>
</html>

Output-

  Name:

Radio Buttons

Radio Buttons are used when you want the user to select one of choices. It's called single selection.

Example

<!DOCTYPE html>
<html>
<body>
<form >
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="Female" /> FeMale
</form >

</body>
</html>

Output- Male Female

Checkboxes

Use checkbox for multiple selection. Checkboxes are used when you want the user to select one or more options of choices.

Example

<!DOCTYPE html>
<html>
<body>
<form >
<input type="checkbox" name="Hobby" value="Dancing" /> Dancing
<input type="checkbox" name="Hobby" value="Singing" /> Singing
<input type="checkbox" name="Hobby" value="Cooking" /> Cooking
<input type="checkbox" name="Hobby" value="Gardning" /> Gardning
</form >

</body>
</html>

Output-Dancing SingingcookingGardening

Drop Down

It is use single select of multi list.In his drop down list we define many options value in the list.

Example

<!DOCTYPE html>
<html>
<body>
<form >
<select name="hobbies"> <option value="0">Select </option> <option value="1">Dancing </option> <option value="2">Singing </option> <option value="3">Cycling </option> </select< </form >

</body>
</html>

Output-

Example

<!DOCTYPE html>
<html>
<body>
<form >
<input type="checkbox" name="Hobby" value="Dancing" /> Dancing
<input type="checkbox" name="Hobby" value="Singing" /> Singing
<input type="checkbox" name="Hobby" value="Cooking" /> Cooking
<input type="checkbox" name="Hobby" value="Gardning" /> Gardning
</form >

</body>
</html>

 Output-
     Select any type Dancing Singing Cycling

Label

Label = Label is also a control.It is used to dispaly any content.
It is denoted by <label>

<label for="lable1"> Label </label>
Output
     Label

Textarea

This is another control it is input type control and multiline textbox . This field is editable and denoted this tag
<textarea >

Button

Button control in html we use button for fire a event then use and save data on click this button then we use button.

<input type="button" value="button" />
<input type="submit" value="submit" />
Output-