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- <html>
<body>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</u1>
</body>
</html>
.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>
<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>
<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- <html>
<body>
<form >
Name:
<input type="text" id="txtname" name="name" /> </form >
</body>
</html>
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<html>
<body>
<form >
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="Female" /> FeMale
</form >
</body>
</html>
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<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>
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- <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>
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- <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>
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
Output
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-
<input type="submit" value="submit" />
Output-
0 comments :
Post a Comment