HTML ORDERED LIST | HTML NUMBERED LIST

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. There can be different types of numbered list:

• Numeric Number (1, 2, 3)
• Capital Roman Number (I II III)
• Small Romal Number (i ii iii)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type	Description
Type "1"	This is the default type. In this type, the list items are numbered with numbers.
Type "I"	In this type, the list items are numbered with upper case roman numbers.
Type "i"	In this type, the list items are numbered with lower case roman numbers.
Type "A"	In this type, the list items are numbered with upper case letters.
Type "a"	In this type, the list items are numbered with lower case letters.

---

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type.

1. <ol>  
2.  <li>HTML</li>  
3.  <li>Java</li>  
4.  <li>JavaScript</li>  
5.  <li>SQL</li>  
6. </ol>  

start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1. <ol type="i" start="5">  
2.  <li>HTML</li>  
3.  <li>Java</li>  
4.  <li>JavaScript</li>  
5.  <li>SQL</li>  
6. </ol>  

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:

• disc
• circle
• square
• none

To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type	Description
Type "disc"	This is the default style. In this style, the list items are marked with bullets.
Type "circle"	In this style, the list items are marked with circles.
Type "square"	In this style, the list items are marked with squares.
Type "none"	In this style, the list items are not marked .

---

HTML Unordered List Example

1. <ul>  
2.  <li>HTML</li>  
3.  <li>Java</li>  
4.  <li>JavaScript</li>  
5.  <li>SQL</li>  
6. </ul>  

HTML Description List | HTML Definition List

HTML Description List or Definition List displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.
2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

1. <dl>  
2.   <dt>HTML</dt>  
3.   <dd>is a markup language</dd>  
4.   <dt>Java</dt>  
5.   <dd>is a programming language and platform</dd>  
6.  <dt>JavaScript</dt>  
7.  <dd>is a scripting language</dd>  
8.   <dt>SQL</dt>  
9.   <dd>is a query language</dd>   
10. </dl>  

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing.

---

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

---

HTML Form Syntax

1. <form action="server url" method="get|post">  
2.   //input controls e.g. textfield, textarea, radiobutton, button  
3. </form>  

---

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag	Description
<form>	It defines an HTML form to enter inputs by the used side.
<input>	It defines an input control.
<textarea>	It defines a multi-line input control.
<label>	It defines a label for an input element.
<fieldset>	It groups the related element in a form.
<legend>	It defines a caption for a <fieldset> element.
<select>	It defines a drop-down list.
<optgroup>	It defines a group of related options in a drop-down list.
<option>	It defines an option in a drop-down list.
<button>	It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag	Description
<datalist>	It specifies a list of pre-defined options for input control.
<keygen>	It defines a key-pair generator field for forms.
<output>	It defines the result of a calculation.

---

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

1. <form>  
2.     First Name: <input type="text" name="firstname"/> <br/>  
3.     Last Name:  <input type="text" name="lastname"/> <br/>  
4.  </form>  

---

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag.

1. <form>  
2.     <label for="firstname">First Name: </label>  
3.               <input type="text" id="firstname" name="firstname"/> <br/>  
4.    <label for="lastname">Last Name: </label>  
5.               <input type="text" id="lastname" name="lastname"/> <br/>  
6.  </form>  

---

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>  
2.     <label for="password">Password: </label>  
3.               <input type="password" id="password" name="password"/> <br/>  
4. </form>  

---

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field.

1. <form>  
2.     <label for="email">Email: </label>  
3.               <input type="email" id="email" name="email"/> <br/>  
4. </form>  

---

Radio Button Control

The radio button is used to select one from multiple options. It is used in gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

1. <form>  
2.     <label for="gender">Gender: </label>  
3.               <input type="radio" id="gender" name="gender" value="male"/>Male  
4.               <input type="radio" id="gender" name="gender" value="female"/>Female <br/>  
5. </form>  

---

Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

1. <form>  
2. Hobby:<br>  
3.               <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
4.                  <label for="cricket">Cricket</label>  
5.               <input type="checkbox" id="football" name="football" value="football"/>  
6.                  <label for="football">Football</label>  
7.               <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
8.                  <label for="hockey">Hockey</label>  
9. </form>  

---

HTML Form Example

Let's see a simple example of creating HTML form.

1. <form action="#">  
2. <table>  
3. <tr>  
4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>  
5.     <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>  
6. </tr>  
7. <tr>  
8.     <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>  
9.     <td><input type="password" name="password" id="register_password" style="width:160px"/></td>  
10. </tr>  
11. <tr>  
12.     <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>  
13.     <td  
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>  
15. </tr>  
16. <tr>  
17.     <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>  
18.     <td>  
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>  
20. <label for="register_gendermale">male</label>  
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>  
22. <label for="register_genderfemale">female</label>  
23.     </td>  
24. </tr>  
25. <tr>  
26.     <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>  
27.     <td><select name="country" id="register_country" style="width:160px">  
28.     <option value="india">india</option>  
29.     <option value="pakistan">pakistan</option>  
30.     <option value="africa">africa</option>  
31.     <option value="china">china</option>  
32.     <option value="other">other</option>  
33. </select>  
34. </td>  
35. </tr>  
36. <tr>  
37.     <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>  
38. </div></td>  
39. </tr>  
40. </table>  
41. </form>