Monday 25 May 2015
Sunday 24 May 2015
Thursday 21 May 2015
Wednesday 20 May 2015
Html tutorials lesson 8
Image Map:
Image maps are images with clickable areas. These areas in image-maps when clicked will
link to another page. The image maps have to be used intelligently to make it effective.
If they are not used appropriately they can confuse the users. The <map> tag is used to
define an image-map. The <map> element contains a number of <area> elements for
defining the clickable areas in the image map. In HTML5, if the id attribute of the <map>
tag is specified, then it must have the same value as the name attribute.
Table 8.4 shows <map> tag attribute and its value.
Follow these guidelines to create an image map:
1-Use the <img> tag to insert and link an image. In the <img> tag, use the
usemap attribute to define the image map name.
2-Use the <map> tag to create a map with the same name. Inside this <map>
tag, define the clickable areas with the <area> tag.
<!DOCTYPE html>
<html>
<body>
<img src=”6.jpg” width=”600” height=”300” alt=”cake”
usemap=”#cakemap” />
<map name=”cakemap”>
<area shape=”circle” coords=”0,0,200,600” href=”4.html” alt=”cake”
/>
</map>
</body>
</html>
Image maps are images with clickable areas. These areas in image-maps when clicked will
link to another page. The image maps have to be used intelligently to make it effective.
If they are not used appropriately they can confuse the users. The <map> tag is used to
define an image-map. The <map> element contains a number of <area> elements for
defining the clickable areas in the image map. In HTML5, if the id attribute of the <map>
tag is specified, then it must have the same value as the name attribute.
Table 8.4 shows <map> tag attribute and its value.
Follow these guidelines to create an image map:
1-Use the <img> tag to insert and link an image. In the <img> tag, use the
usemap attribute to define the image map name.
2-Use the <map> tag to create a map with the same name. Inside this <map>
tag, define the clickable areas with the <area> tag.
<!DOCTYPE html>
<html>
<body>
<img src=”6.jpg” width=”600” height=”300” alt=”cake”
usemap=”#cakemap” />
<map name=”cakemap”>
<area shape=”circle” coords=”0,0,200,600” href=”4.html” alt=”cake”
/>
</map>
</body>
</html>
Tuesday 19 May 2015
Html session 8
Divisions:
The <div> tag defines a division in an HTML Web page. It is used to group block-elements and format them with CSS. The new structural semantic tags reasonably reduce a lot of <div> tag’s usage, but <div> tag is still important in the HTML5 world. The <div> tag can be used when there is no other semantically appropriate element left that suits the purpose in a Web page development. It can be commonly used for stylistic purposes such as wrapping some semantically marked-up content in a CSS-styled container.
Code Snippet 14 demonstrates an HTML code to show the use of <div> tag used for wrapping.
Code Snippet 14:
<body>
<div id=”wrapper”>
<header>
<h1>Hello</h1>
<nav>
<! -- ... -->
</nav>
</header>
</div>
</body>
Tips for using <div> tag in Web site development are as follows:
The <div> tag is a block-level element.
The <div> tag can contain any other tag.
In HTML5, the <div> tag can be found inside any element that can contain flow elements, such as other <div>, <address>, <section>, and <table>.
The <div> tag defines a division in an HTML Web page. It is used to group block-elements and format them with CSS. The new structural semantic tags reasonably reduce a lot of <div> tag’s usage, but <div> tag is still important in the HTML5 world. The <div> tag can be used when there is no other semantically appropriate element left that suits the purpose in a Web page development. It can be commonly used for stylistic purposes such as wrapping some semantically marked-up content in a CSS-styled container.
Code Snippet 14 demonstrates an HTML code to show the use of <div> tag used for wrapping.
Code Snippet 14:
<body>
<div id=”wrapper”>
<header>
<h1>Hello</h1>
<nav>
<! -- ... -->
</nav>
</header>
</div>
</body>
Tips for using <div> tag in Web site development are as follows:
The <div> tag is a block-level element.
The <div> tag can contain any other tag.
In HTML5, the <div> tag can be found inside any element that can contain flow elements, such as other <div>, <address>, <section>, and <table>.
Monday 18 May 2015
Html session 8
Html tutorials session 8 :
Division Positioning and Formatting :
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position of the property is set. They also work differently depending on the positioning method. There are five position properties in DIV elements namely, static, relative, absolute, fixed, and inherit. For easy usage, only three properties are used namely, absolute, relative, and fixed. Positioning can be applied to any block element. The default position for a block element (DIV) is static. Table 8.5 shows the various values that can be used in DIV element to position elements.
Value Description
static Positions the element in order, as they appear in the document flow. It is the default value.
absolute Positions the element relative to its first position.
fixed Positions the element relative to the browser window.
relative Positions the element relative to its normal position.
inherit Positions the element with respect the value that is inherited from the parent element.
Code Snippet 15:
.lCard{
width: 100px;
height:100px;
background-color:blue;
padding: 6px;
position:fixed;
left:450px;
top:100px;
}
.rCard{
width: 100px;
background-color:red;
padding: 7px;
position:relative;
top:93px;
left:300px;
}
.bCard{
width: 100px;
height:100px;
background-color:green;
padding: 6px;
position:absolute;
left:310px;
bottom:320px;
}
Code Snippet 16:
<body>
<div class=”rCard”>
</div>
<div class=”bCard”>
</div>
<div class=”lCard”>
</div>
</body>
Multiple columns are created by using the <div> tag and CSS is used to format the divisions. Divisions can be formatted by using the same character, paragraph, and page formatting styles. In the Code Snippet, CSS is used to format each DIV.
Division Positioning and Formatting :
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position of the property is set. They also work differently depending on the positioning method. There are five position properties in DIV elements namely, static, relative, absolute, fixed, and inherit. For easy usage, only three properties are used namely, absolute, relative, and fixed. Positioning can be applied to any block element. The default position for a block element (DIV) is static. Table 8.5 shows the various values that can be used in DIV element to position elements.
Value Description
static Positions the element in order, as they appear in the document flow. It is the default value.
absolute Positions the element relative to its first position.
fixed Positions the element relative to the browser window.
relative Positions the element relative to its normal position.
inherit Positions the element with respect the value that is inherited from the parent element.
Code Snippet 15:
.lCard{
width: 100px;
height:100px;
background-color:blue;
padding: 6px;
position:fixed;
left:450px;
top:100px;
}
.rCard{
width: 100px;
background-color:red;
padding: 7px;
position:relative;
top:93px;
left:300px;
}
.bCard{
width: 100px;
height:100px;
background-color:green;
padding: 6px;
position:absolute;
left:310px;
bottom:320px;
}
Code Snippet 16:
<body>
<div class=”rCard”>
</div>
<div class=”bCard”>
</div>
<div class=”lCard”>
</div>
</body>
Multiple columns are created by using the <div> tag and CSS is used to format the divisions. Divisions can be formatted by using the same character, paragraph, and page formatting styles. In the Code Snippet, CSS is used to format each DIV.
Saturday 16 May 2015
Html session 9
Introduction :
Tables allow the user to view the data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. The user can create tables for displaying timetables, financial reports, and so on.
9.2. Creating and Formatting Tables
A table is made up of rows and columns. The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of set of cells that are placed vertically.
The user can represent the data in a tabular format by using the <br />
element in HTML. The element divides the table into rows and the <table><tbody>
<tr><td>element specifies columns for each row. By default, a table does not have a border. The border attribute of the <br />
element specifies a border for making the table visible in a Web page.
Code Snippet 1 demonstrates how to create a table.
Code Snippet 1:
Table Headings
The user can specify the heading for each column in HTML. To specify the heading for columns in a table, use the <br />
<table><html>
<head>
<title>Languages</title>
</head>
<body>
<h2>
Main Languages</h2>
<table border="”1”">
<tr>
<td>English</td>
<td>German</td>
</tr>
<tr>
<td>French</td>
<td>Italian</td>
</tr>
</table>
</body>
</html><tbody>
<tr><th>element.
The text included within the </th><th>element appears in bold. Code Snippet 2 demonstrates how to create a table with a heading.
Code Snippet 2:
<html>
<head>
<title>List of Students </title>
</head>
<body>
<h2>
List of Students</h2>
<table border="”1”">
<tr>
<th>Name</th>
<th>Age</th>
<th>Place</th>
</tr>
<tr>
<td>Mark</td>
<td>17</td>
<td>Madrid</td>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
</table>
</body>
</html>
In this code, the <br />
element creates a table with a border of 1 pixel. The element specify column headings namely, Manufacturer, Model, and Price. The rowspan attribute of the element. The table content is center aligned by setting the value of the text-align attribute to center.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table><tbody>
<tr><th>element provides three column headings namely, Name, Age, and Place.
Colspan Attribute
The user might feel the need to span two or more cells while working with tables. Spanning refers to a process of extending a cell across multiple rows or columns. To span two or more columns, use the colspan attribute of the </th><td>and </td><th>elements.
The colspan attribute allows the user to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded. Code Snippet 3 demonstrates how to create a table and span header cells across two cells vertically.
Code Snippet 3:
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<h2>
Employee Details</h2>
<table border="”1”">
<tr>
<th colspan="”2”">IT</th>
<th colspan="”2”">Accounts</th>
</tr>
<tr>
<th>Name</th>
<th>Location</th>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>David</td>
<td>New York</td>
<td>John</td>
<td>London</td>
</tr>
<tr>
<td>Katthy</td>
<td>New Jersey</td>
<td>Peter</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border of 1 pixel. The </th><th>element specifies two column headings namely, IT and Accounts. Each of these header cells horizontally span across the two cells by setting the colspan attribute of the </th><th>element to 2. Each of these headings has two sub-headings namely, Name and Location, which specify the name and location of employees. The first and second rows display the details of the employees.
Rowspan Attribute
The rowspan attribute spans a data cell across two or more rows. It allows the user to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the </th><td>and </td><th>elements. Code Snippet 4 demonstrates how to span a cell across multiple rows.
Code Snippet 4:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th>Price</th>
</tr>
<tr>
<th rowspan="”3”">Audi</th>
<td>A4</td>
<td>34.5</td>
</tr>
<tr>
<td>A5</td>
<td>42.6</td>
</tr>
<tr>
<td>A6</td>
<td>30.75</td>
</tr>
<tr>
<th rowspan="”2”">BMW</th>
<td>328i</td>
<td>28.25</td>
</tr>
<tr>
<td>530d</td>
<td>47.5</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border width of 1 pixel. The three </th><th>elements within the </th></tr>
<tr><th>element combines the three rows of the Manufacturer column into a common brand namely Audi. The three different models and the respective prices of the Audi brand are displayed in three different rows. Similarly, the rowspan attribute of the </th><th>element combines the next two rows of the Manufacturer column into a common brand called BMW.
Horizontal Alignment
Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, the user might need to align the data to some other position for improving the readability or focusing on some data. HTML5 has deprecated the align attribute.
The four possible values for setting the horizontal alignment are as follows:
left
Aligns the data within a cell on the left side. This is the default value for table content.
center
Aligns the data within the cell on the center. This is the default value for table headings.
right
Aligns the data within the cell on the right side.
justify
Aligns the data within the cell by adjusting the text at the edges.
To set the alignment with style you can use the text-align attribute to specify the horizontal alignment.
Code Snippet 5:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Sr.No.</th>
<th>Medicine Name</th>
<th>Price</th>
</tr>
<tr center="">
<td>1</td>
<td>Captopril</td>
<td>12.45</td>
</tr>
<tr center="">
<td>2</td>
<td>Ceftriaxone</td>
<td>6.94</td>
</tr>
<tr center="">
<td>3</td>
<td>Ciprofloxacin</td>
<td>56.21</td>
</tr>
</table>
</body>
</html>
The code aligns the data within the row using a style within the </th></tr>
<tr></tr>
</tbody></table>
</th></tr>
</tbody></table>
</td></tr>
</tbody></table>
Tables allow the user to view the data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. The user can create tables for displaying timetables, financial reports, and so on.
9.2. Creating and Formatting Tables
A table is made up of rows and columns. The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of set of cells that are placed vertically.
The user can represent the data in a tabular format by using the <br />
element in HTML. The element divides the table into rows and the <table><tbody>
<tr><td>element specifies columns for each row. By default, a table does not have a border. The border attribute of the <br />
element specifies a border for making the table visible in a Web page.
Code Snippet 1 demonstrates how to create a table.
Code Snippet 1:
Table Headings
The user can specify the heading for each column in HTML. To specify the heading for columns in a table, use the <br />
<table><html>
<head>
<title>Languages</title>
</head>
<body>
<h2>
Main Languages</h2>
<table border="”1”">
<tr>
<td>English</td>
<td>German</td>
</tr>
<tr>
<td>French</td>
<td>Italian</td>
</tr>
</table>
</body>
</html><tbody>
<tr><th>element.
The text included within the </th><th>element appears in bold. Code Snippet 2 demonstrates how to create a table with a heading.
Code Snippet 2:
<html>
<head>
<title>List of Students </title>
</head>
<body>
<h2>
List of Students</h2>
<table border="”1”">
<tr>
<th>Name</th>
<th>Age</th>
<th>Place</th>
</tr>
<tr>
<td>Mark</td>
<td>17</td>
<td>Madrid</td>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
</table>
</body>
</html>
In this code, the <br />
element creates a table with a border of 1 pixel. The element specify column headings namely, Manufacturer, Model, and Price. The rowspan attribute of the element. The table content is center aligned by setting the value of the text-align attribute to center.
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table><tbody>
<tr><th>element provides three column headings namely, Name, Age, and Place.
Colspan Attribute
The user might feel the need to span two or more cells while working with tables. Spanning refers to a process of extending a cell across multiple rows or columns. To span two or more columns, use the colspan attribute of the </th><td>and </td><th>elements.
The colspan attribute allows the user to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded. Code Snippet 3 demonstrates how to create a table and span header cells across two cells vertically.
Code Snippet 3:
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<h2>
Employee Details</h2>
<table border="”1”">
<tr>
<th colspan="”2”">IT</th>
<th colspan="”2”">Accounts</th>
</tr>
<tr>
<th>Name</th>
<th>Location</th>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>David</td>
<td>New York</td>
<td>John</td>
<td>London</td>
</tr>
<tr>
<td>Katthy</td>
<td>New Jersey</td>
<td>Peter</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border of 1 pixel. The </th><th>element specifies two column headings namely, IT and Accounts. Each of these header cells horizontally span across the two cells by setting the colspan attribute of the </th><th>element to 2. Each of these headings has two sub-headings namely, Name and Location, which specify the name and location of employees. The first and second rows display the details of the employees.
Rowspan Attribute
The rowspan attribute spans a data cell across two or more rows. It allows the user to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the </th><td>and </td><th>elements. Code Snippet 4 demonstrates how to span a cell across multiple rows.
Code Snippet 4:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th>Price</th>
</tr>
<tr>
<th rowspan="”3”">Audi</th>
<td>A4</td>
<td>34.5</td>
</tr>
<tr>
<td>A5</td>
<td>42.6</td>
</tr>
<tr>
<td>A6</td>
<td>30.75</td>
</tr>
<tr>
<th rowspan="”2”">BMW</th>
<td>328i</td>
<td>28.25</td>
</tr>
<tr>
<td>530d</td>
<td>47.5</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border width of 1 pixel. The three </th><th>elements within the </th></tr>
<tr><th>element combines the three rows of the Manufacturer column into a common brand namely Audi. The three different models and the respective prices of the Audi brand are displayed in three different rows. Similarly, the rowspan attribute of the </th><th>element combines the next two rows of the Manufacturer column into a common brand called BMW.
Horizontal Alignment
Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, the user might need to align the data to some other position for improving the readability or focusing on some data. HTML5 has deprecated the align attribute.
The four possible values for setting the horizontal alignment are as follows:
left
Aligns the data within a cell on the left side. This is the default value for table content.
center
Aligns the data within the cell on the center. This is the default value for table headings.
right
Aligns the data within the cell on the right side.
justify
Aligns the data within the cell by adjusting the text at the edges.
To set the alignment with style you can use the text-align attribute to specify the horizontal alignment.
Code Snippet 5:
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border="”1”">
<tr>
<th>Sr.No.</th>
<th>Medicine Name</th>
<th>Price</th>
</tr>
<tr center="">
<td>1</td>
<td>Captopril</td>
<td>12.45</td>
</tr>
<tr center="">
<td>2</td>
<td>Ceftriaxone</td>
<td>6.94</td>
</tr>
<tr center="">
<td>3</td>
<td>Ciprofloxacin</td>
<td>56.21</td>
</tr>
</table>
</body>
</html>
The code aligns the data within the row using a style within the </th></tr>
<tr></tr>
</tbody></table>
</th></tr>
</tbody></table>
</td></tr>
</tbody></table>
Friday 15 May 2015
Html tutorials
Html tutorials session 9:
Vertical Alignment :
Users can vertically align the position of data earlier by using the valign attribute. HTML5 has deprecated the valign attribute. The possible values of vertical alignment are as follows:
top
Vertically aligns the data within the cell at the top.
middle
Vertically aligns the data within the cell at the center.
bottom
Vertically aligns the data within the cell at the bottom.
To set the alignment with the style you can use the text-align attribute to specify the vertical alignment use the following syntax:
Syntax:
<td style= “text align: center; vertical align: middle”>
The style can also be applied to individual rows, cells, or to the entire table.
Code Snippet 6 demonstrates how to align the data vertically within the table using the style attribute.
Code Snippet 6:
<!DOCTYPE HTML>
<html>
<head>
<title>CelinaBatteries</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Sr.No.</th>
<th>Product Id</th>
<th>Product Description</th>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>1 </td>
<td style=”text-align: center; vertical-align: middle”>P101 </td>
<td>1.5 Volts AA Ultra Alkaline</td>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>2 </td>
<td style=”text-align: center; vertical-align: middle”>M105 </td>
<td>9 Volts pp3 Super Alkaline</td>
</tr>
</table>
</body>
</html>
The text-align attribute is set to the value center, which specifies that the data within the rows are centrally aligned. The vertical-align is used to specify the vertical alignment in the table.
Margin Attributes
The data in a table might appear cluttered, which may affect the readability. This might make it difficult to comprehend data as the data. To overcome this issue, use the cell margin attributes.
Cell padding allows the user to control the look of the content on a page.
Padding: Padding is the amount of space between the content and its outer edge. For tables, padding is specified as a space between the text and the cell border. Suppose if the user wants to set the padding attribute for the individual cells then he/she can use the padding attribute in a style as follows:
<td style=”padding: 4px”>
Caption Element
The user can add a heading to a table in HTML. To specify the main heading for the table, use the <caption> element. The <caption> element defines a caption for the table. It is a sub-element of the <table> element. It must be present immediately after the <table> tag.
Unlike the <th> element that is used to specify a heading to an individual row or column, the <caption> element allows the user to specify a title for your entire table. There can be only one caption for a table.
Code Snippet 7 demonstrates how to specify a heading for a table.
Code Snippet 7:
<!DOCTYPE HTML>
<html>
<head>
<title>Travel Expense Report</title>
</head>
<body>
<table border=”1”>
<caption>Travel Expense Report</caption>
<tr>
<th> </th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
<tr>
<td>25-Apr</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>26-Apr</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>Totals</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <caption> element that is used inside the <table> element specifies a caption to the entire table as Travel Expense Report.
Table Size and Width of a Column
The user can decide the size of the table based on his/her requirements while creating a Web site. The table size can be expanded when the user wants to add rows and columns in the table. The user can use the <style> section to set the default width for the table to 100% of the browser window.
For setting the width of a column in pixels, you can use style attribute in the <td> tag.
Code Snippet 8 demonstrates how to create a table with specific width for a column.
Code Snippet 8:
<!DOCTYPE HTML>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2>Table</h2>
<table border=”1”>
<tr>
<td style =”width: 200px”>Flowers</td>
<td style =”width: 80px”>Fruits</td>
</tr>
<tr>
<td style =”width: 200px”>Vegetables</td>
<td style =”width: 80px”>Trees</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <style> element is used to set table width to 100%. The width of the columns is set by using the style attribute. Figure 9.8 displays the table size and column width.
Merging Table Cells
Suppose if the user wants to change the cells of a table to different height and width then colspan and rowspan attributes can be used. Consider a scenario, where the user wants to merge a cell into adjacent cells to the right-handside. The colspan attribute can be used to specify the number of columns to span. Similarly, the user can use the rowspan attribute to specify the number of rows.
Code Snippet 9 demonstrates creating a table having five columns and five rows, but many of the cells span multiple columns or rows.
Code Snippet 9:
<!DOCTYPE HTML >
<html>
<head>
<title>Favorite Destination</title>
</head>
<body>
<h2>Report</h2>
<table border=”1” width=”100%” height=”100%”>
<tr>
<td colspan=”2” rowspan=”2”>Results</td>
<td colspan=”3”>Range</td>
</tr>
<tr>
<td>18 to 20</td>
<td>25 to 50</td>
<td>over 50</td>
</tr>
<tr>
<td rowspan=”3”>Your favorite vacation destination</td>
<td>Dubai</td>
<td>25%</td>
<td>50%</td>
<td>25%</td>
</tr>
<tr>
<td>Bangkok</td>
<td>40%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td>Switzerland</td>
<td>30%</td>
<td>20%</td>
<td>50%</td>
</tr>
</table>
</body>
</html>
The code creates a table having a border of 1 pixel. It also creates a table with five columns and five rows and uses the colspan and rowspan attributes respectively.
Apply Borders by Using Styles
Users can use CSS for applying borders as it is the best reliable and flexible method. The user must select the CSS method for Web sites that will be active for many years as the old formatting methods will not be used in future. You can format the table by using style based border for <table> and <td> tags. To evaluate the attributes used are as follows:
The border-width attribute is used to control the thickness of the border and the values are specified in pixels.
The border-color attribute is used to control the color of the border and specifies the color by either name, or RGB value, or hexadecimal number.
The border-style attribute is used to control the line style. Users can choose between solid, dashed, groove, dotted, outset, ridge, inset, or none.
Suppose if the user wants to set all these attributes at one time then the user can use the border attribute and place the settings in the following order namely, width, color, and style respectively. The user can also format the sides of the border individually by replacing the border attribute with border-bottom, border-top, border-right, or border-left attribute. The user can apply these attributes to the entire table or individual cells and also create rules in the <style> area.
Tables for Page Layout
Nowadays, there are many new techniques used for developing attractive Web pages. Tables are used for structuring the content. In other words, tables are used by the user to organize the data in an appropriate manner.
With tables the user can arrange the data horizontally or vertically according to his/her requirements. Community Web sites such as Facebook has different page layouts, the user uses the navigation tabs to move from one page to another. Similarly, the look and feel of each page is different.
While accessing Web sites such as Yahoo, Rediff, and so on users can view that the home page is very informative with a number of links, images, and so on. Each and every Web site has their unique way of presenting data to their customers or users. Many Web sites use pop-ups for providing information to their customers.
Code Snippet 10 demonstrates a simple example of using table for structuring the content of a Web page.
<!DOCTYPE HTML>
<html>
<head>
<title>Page Layout </title>
</head>
<style>
#navlayout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#navlayout li {
float: left; }
#navlayout li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#navlayout li a:hover {
color: #c00;
background-color: #fff; }
</style>
<body>
<img src=”../Images/flowers.jpg” width=”133”
height=”100” alt=””
border=”0”>
<h1>Blossoms Gallery</h1>
<h5><i>The Best sellers for flowers since 1979</i></h5>
<navlayout>
<hr>
<ul id=”navlayout”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”> FAQs</a></li>
</ul>
</navlayout>
<table>
<tr>
<td>
<b>Flowers are now in stock! </b>
<i> We have just received a large shipment of flowers
with prices as low as $19. </i>
</td>
</tr>
</table>
</body>
</html>
The code creates a page layout for a Web site. The data is arranged in a tabular format and an embedded style is used for defining the style. The style is defined using the style element placed immediately after the <head> section.
Defining a style in this manner helps to reuse the style in the same Web page.
The style is set using the ID selector methodology and is identified as navlayout. This will enable to apply the style to the content of all those elements whose id attribute has been set to navlayout.
Vertical Alignment :
Users can vertically align the position of data earlier by using the valign attribute. HTML5 has deprecated the valign attribute. The possible values of vertical alignment are as follows:
top
Vertically aligns the data within the cell at the top.
middle
Vertically aligns the data within the cell at the center.
bottom
Vertically aligns the data within the cell at the bottom.
To set the alignment with the style you can use the text-align attribute to specify the vertical alignment use the following syntax:
Syntax:
<td style= “text align: center; vertical align: middle”>
The style can also be applied to individual rows, cells, or to the entire table.
Code Snippet 6 demonstrates how to align the data vertically within the table using the style attribute.
Code Snippet 6:
<!DOCTYPE HTML>
<html>
<head>
<title>CelinaBatteries</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Sr.No.</th>
<th>Product Id</th>
<th>Product Description</th>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>1 </td>
<td style=”text-align: center; vertical-align: middle”>P101 </td>
<td>1.5 Volts AA Ultra Alkaline</td>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>2 </td>
<td style=”text-align: center; vertical-align: middle”>M105 </td>
<td>9 Volts pp3 Super Alkaline</td>
</tr>
</table>
</body>
</html>
The text-align attribute is set to the value center, which specifies that the data within the rows are centrally aligned. The vertical-align is used to specify the vertical alignment in the table.
Margin Attributes
The data in a table might appear cluttered, which may affect the readability. This might make it difficult to comprehend data as the data. To overcome this issue, use the cell margin attributes.
Cell padding allows the user to control the look of the content on a page.
Padding: Padding is the amount of space between the content and its outer edge. For tables, padding is specified as a space between the text and the cell border. Suppose if the user wants to set the padding attribute for the individual cells then he/she can use the padding attribute in a style as follows:
<td style=”padding: 4px”>
Caption Element
The user can add a heading to a table in HTML. To specify the main heading for the table, use the <caption> element. The <caption> element defines a caption for the table. It is a sub-element of the <table> element. It must be present immediately after the <table> tag.
Unlike the <th> element that is used to specify a heading to an individual row or column, the <caption> element allows the user to specify a title for your entire table. There can be only one caption for a table.
Code Snippet 7 demonstrates how to specify a heading for a table.
Code Snippet 7:
<!DOCTYPE HTML>
<html>
<head>
<title>Travel Expense Report</title>
</head>
<body>
<table border=”1”>
<caption>Travel Expense Report</caption>
<tr>
<th> </th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
<tr>
<td>25-Apr</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>26-Apr</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>Totals</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <caption> element that is used inside the <table> element specifies a caption to the entire table as Travel Expense Report.
Table Size and Width of a Column
The user can decide the size of the table based on his/her requirements while creating a Web site. The table size can be expanded when the user wants to add rows and columns in the table. The user can use the <style> section to set the default width for the table to 100% of the browser window.
For setting the width of a column in pixels, you can use style attribute in the <td> tag.
Code Snippet 8 demonstrates how to create a table with specific width for a column.
Code Snippet 8:
<!DOCTYPE HTML>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2>Table</h2>
<table border=”1”>
<tr>
<td style =”width: 200px”>Flowers</td>
<td style =”width: 80px”>Fruits</td>
</tr>
<tr>
<td style =”width: 200px”>Vegetables</td>
<td style =”width: 80px”>Trees</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel. The <style> element is used to set table width to 100%. The width of the columns is set by using the style attribute. Figure 9.8 displays the table size and column width.
Merging Table Cells
Suppose if the user wants to change the cells of a table to different height and width then colspan and rowspan attributes can be used. Consider a scenario, where the user wants to merge a cell into adjacent cells to the right-handside. The colspan attribute can be used to specify the number of columns to span. Similarly, the user can use the rowspan attribute to specify the number of rows.
Code Snippet 9 demonstrates creating a table having five columns and five rows, but many of the cells span multiple columns or rows.
Code Snippet 9:
<!DOCTYPE HTML >
<html>
<head>
<title>Favorite Destination</title>
</head>
<body>
<h2>Report</h2>
<table border=”1” width=”100%” height=”100%”>
<tr>
<td colspan=”2” rowspan=”2”>Results</td>
<td colspan=”3”>Range</td>
</tr>
<tr>
<td>18 to 20</td>
<td>25 to 50</td>
<td>over 50</td>
</tr>
<tr>
<td rowspan=”3”>Your favorite vacation destination</td>
<td>Dubai</td>
<td>25%</td>
<td>50%</td>
<td>25%</td>
</tr>
<tr>
<td>Bangkok</td>
<td>40%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td>Switzerland</td>
<td>30%</td>
<td>20%</td>
<td>50%</td>
</tr>
</table>
</body>
</html>
The code creates a table having a border of 1 pixel. It also creates a table with five columns and five rows and uses the colspan and rowspan attributes respectively.
Apply Borders by Using Styles
Users can use CSS for applying borders as it is the best reliable and flexible method. The user must select the CSS method for Web sites that will be active for many years as the old formatting methods will not be used in future. You can format the table by using style based border for <table> and <td> tags. To evaluate the attributes used are as follows:
The border-width attribute is used to control the thickness of the border and the values are specified in pixels.
The border-color attribute is used to control the color of the border and specifies the color by either name, or RGB value, or hexadecimal number.
The border-style attribute is used to control the line style. Users can choose between solid, dashed, groove, dotted, outset, ridge, inset, or none.
Suppose if the user wants to set all these attributes at one time then the user can use the border attribute and place the settings in the following order namely, width, color, and style respectively. The user can also format the sides of the border individually by replacing the border attribute with border-bottom, border-top, border-right, or border-left attribute. The user can apply these attributes to the entire table or individual cells and also create rules in the <style> area.
Tables for Page Layout
Nowadays, there are many new techniques used for developing attractive Web pages. Tables are used for structuring the content. In other words, tables are used by the user to organize the data in an appropriate manner.
With tables the user can arrange the data horizontally or vertically according to his/her requirements. Community Web sites such as Facebook has different page layouts, the user uses the navigation tabs to move from one page to another. Similarly, the look and feel of each page is different.
While accessing Web sites such as Yahoo, Rediff, and so on users can view that the home page is very informative with a number of links, images, and so on. Each and every Web site has their unique way of presenting data to their customers or users. Many Web sites use pop-ups for providing information to their customers.
Code Snippet 10 demonstrates a simple example of using table for structuring the content of a Web page.
<!DOCTYPE HTML>
<html>
<head>
<title>Page Layout </title>
</head>
<style>
#navlayout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#navlayout li {
float: left; }
#navlayout li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#navlayout li a:hover {
color: #c00;
background-color: #fff; }
</style>
<body>
<img src=”../Images/flowers.jpg” width=”133”
height=”100” alt=””
border=”0”>
<h1>Blossoms Gallery</h1>
<h5><i>The Best sellers for flowers since 1979</i></h5>
<navlayout>
<hr>
<ul id=”navlayout”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”> FAQs</a></li>
</ul>
</navlayout>
<table>
<tr>
<td>
<b>Flowers are now in stock! </b>
<i> We have just received a large shipment of flowers
with prices as low as $19. </i>
</td>
</tr>
</table>
</body>
</html>
The code creates a page layout for a Web site. The data is arranged in a tabular format and an embedded style is used for defining the style. The style is defined using the style element placed immediately after the <head> section.
Defining a style in this manner helps to reuse the style in the same Web page.
The style is set using the ID selector methodology and is identified as navlayout. This will enable to apply the style to the content of all those elements whose id attribute has been set to navlayout.
Html session 10
Html session 10:
Introduction :
HTML, the core language of the World Wide Web is being used for designing Web pages for nearly a decade. With the continuous evolvement in the Web, Web designers and programmers find it difficult to make pages more flexible and dynamic in behavior. The dynamic behavior is particularly expected when displaying Web forms to the users. For example, HTML5 allows creating combo boxes, adding placeholder text on the page, providing client-side validations through JavaScript, and achieving dynamic behavior using Document Object Model (DOM) API.
Although Internet Explorer 9 and Google Chrome 19 support most HTML5 features, there are some that are supported only in Opera 11.
Introduction to HTML5 Forms
Among the other features of HTML5, there has been a great enhancement to Web forms. HTML5 Web forms are those sections on the Web page that contain special elements called as controls. The controls, such as check boxes, radio buttons, and text boxes provide a visual interface to the user to interact with them. A user provides data through these controls that is sent to the server for further processing. Thus, it is very important to create forms with lot of consideration for usability and accessibility by the users.
In HTML5, creation of form is made easier for Web developers by standardizing them with rich form controls. It also provides client-side validations that are now handled natively by the browsers. This not only reduces the load time of the pages, but also removes the need of the repetitive JavaScript codes to be included on the page.
Even the visual appearance of the forms is improved when displayed on different devices, such as iPhone, ipad, touch screens, and browsers. This enhances the users experience while interacting with them.
10.3 New Features in HTML5 Forms
HTML5 Web forms bring great improvements related to form creation for the Web developers and also for users interacting with them. The following are the changes introduced in HTML5 forms:
New form elements
New input types
New attributes
Browser-based validation
New Elements
HTML5 has introduced a range of new elements that are expanding the options for more number of elements related to input on the forms.
Table 10.1 lists the new elements in HTML5.
Element Description
progress Represents the completion progress of a task on the page
meter Represents a scale of known range
datalist Represents a set of options used with list attribute to make a drop-down control
output Represents the result of a calculation
New Input Types
The input element is a data field that allows the user to edit the data on the form. It has an attribute named type which controls the data type and characteristics of the input element.
Table 10.2 lists the new input types supported by HTML5 that specify the kind of input expected from the users on the Web page.
Type Description
email Represents the completion progress of a task on the page
search Represents a scale of known range
url Represents a set of options used with list attribute to make a drop-down control
tel Represents the result of a calculation
number Represents a numeric value in the input field
range Represents a numeric value to be selected from a range of numbers
date Represents a calendar which is shown at every click on the field
week Represents date in year-week format
Type Description
month Represents a value with year-month format
time Represents a value in hours and minutes format
datetime Represents a full date and time input field with a time zone
datetime-local Represents a full date and time with no time zone
color Represents a predefined interface for selecting color
New Attributes
HTML5 has introduced several new attributes that can be used with form and input elements. Attributes help the elements to perform their tasks.
Table 10.3 lists the new attributes in HTML5.
Table 10.3 lists the new attributes in HTML5.
Type Description
placeholder Represents a hint that help users to enter the correct data in the field
required A Boolean attribute that validates the entry in the field
multiple A Boolean attribute that allows multiple values to be entered in the field
autofocus Focuses the input element on page load
pattern Represents a regular expression for validating the field’s value
form Allows the elements to reference the form by including the form name
Browser-based Validation
HTML4 supported the use of custom JavaScript or libraries to perform validation on the client-side browsers. These validations ensure that the input fields are checked before the form is submitted to the server for further processing.
The new attributes in HTML5, such as required and pattern can be used with the input elements to perform validation. This relieves the Web developers from writing the custom JavaScript code for performing client-side validation on the Web pages. HTML5 also provides advanced validation techniques that can be used with JavaScript to set custom validation rules and messages for the input elements.
CSS Styling Techniques
A Web developer can enhance the form elements with the pseudo-class selectors, such as :required, :valid, and :invalid.
For example, the input fields which cannot be left blank while submitting the form can be displayed with an outline. To achieve this, input field with required attribute can be styled using CSS. Applying CSS styles make it easier for user to navigate and complete the form.
Code Snippet 1 shows the CSS code for formatting non-empty and incorrect data input in the input element fields on the form.
Code Snippet 1:
<style>
input:required {
outline: 1px red solid;
color: green ;
}
input:required:valid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
input:required:invalid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form method=”get” action=”try.php”>
Name: <input type=”text” name=”name” required=”true” /><br/>
Email: <input type=”email” name=”emailid” required=”true” />
<input type=”submit” value=”submit” />
</form>
Forms API
HTML5 has introduced JavaScript API for forms. This API is used to customize validations and processing performed on the forms. The new form’s API provides new methods, events, and properties to perform complex validations combining fields or calculations.
Table 10.4 lists the events and methods.
Events and Methods Description
setCustomValidity (message) Sets the custom error message that is displayed when the form is submitted by the user
checkValidity() Checks the validity of the e-mail address entered by the user
oninvalid Allows script to run only when the element is invalid
onforminput Allows script to run when the form gets an input from the user
onformchange Represents a regular expression for validating the field’s value
form Allows script to run when the form changes
Working with New Input Types
The type attribute of the input element determines what kind of input will be displayed on the user’s browser. The default input is type=”text”.
The registration form in the session is using the following input types:
text
label
radio
textarea
checkbox
submit
HTML5 has introduced more data-specific user interface elements. Now, you will see the new input types in detail.
E-mail Addresses
The type=”email” is used for specifying one or more e-mail addresses. To allow multiple addresses in the e-mail field, separate each address with comma-separator.
In the registration form, the input type is changed from text to email as shown in Code Snippet 2.
Code Snippet 2:
<form method=”get” action=”test.html”>
<label for=”emailid”>Email:</label>
<input type=”email” value=”” id=”emailid” name=”emailaddress”
maxlength=”255” />
<input type=”submit” value=”submit”/>
</form>
In the code, <label> tag defines a label for the element on the form. The for attribute of <label> tag binds it with the related element, that is email element, on the form. The value of for attribute must match with the value of id attribute assigned to the element.
Also, the email contains two attributes, namely id and name. The id attribute specifies a unique id for the element. The value of the id attribute should be unique within the document. It can be used as a reference for styles in style sheet or to access elements using DOM API in JavaScript.
The name attribute specifies a name for the input element. It can be used for referencing the elements in a JavaScript or form data after a form is submitted to the server for processing. The look of the input is still like a plain text field, but changes are applied behind the scenes. Browsers, such as Firefox, Chrome, and Opera will display a default error message if user submits the form with some unrecognizable contents.
Telephone Number
The type=”tel” input element is used for accepting telephone numbers. As compared to email and url types, the tel type does not impose a particular pattern. It supports characters, numbers, and special characters except new lines or carriage returns. The reason for not imposing any pattern for tel type is that different countries support various lengths and punctuation in the phone numbers. Thus, there cannot be a standard format for them.
A user can enforce a pattern for tel input type by using placeholder or pattern attribute. A JavaScript code can also be provided for performing client-side validation on the tel input type.
Code snippet 4 shows the code for including tel input type on the registration form.
Code Snippet 4:
<label for=”telno”>Telephone Number:</label>
<input type=”tel” value=”” id=”telno” name=”telephone_no”
maxlength=”10” />
Number
The input type=”number” is used for accepting only number values. The input element displayed for number type is a spinner box. The user can either type a number or click the up or down arrow to select a number in the spinner box.
Code Snippet 5:
<label for=”stud_age”>Age:</label>
<input type=”number” value=”15” id=”stud_age”
name=”studentage” min=”15” max=”45” step=”1” />
<input type=”submit” value=”submit”/>
In the code, the number input type has attributes, such as min and max to specify the minimum and maximum value for the input.
Range
The input type=”range” is similar to number type and displays a slider control on the page. The range type is used when the exact value is not required in the input. In other words, the value from this type is not accurate. For example, an online survey form asking the clients to rate the products may not receive exact values in the ratings.
Code Snippet 6 shows the code for including range input type with attributes min and max.
Code Snippet 6:
<label>Survey for packages offered[scale: 1-10]:</label>
<input type=”range” name=”rating” min=”1” max=”10” />
<input type=”submit” value=”submit”/>
In the code, the range input type contains attributes, such as min, max, step, and value. The min and max attributes are used to specify the minimum and maximum value allowed for a range and are set to 1 and 10 respectively. The step attribute specify the intervals for incrementing the value. The value of step attribute is 1 by default. The value attribute specifies the default value for the range. The default value is the midpoint of the range specified.
Date and Time
HTML5 has introduced several new input types for date and time. The format for all these date and time types is according to the ISO standards. At present only Opera provides the support for date element by displaying a calendar control.
Date
This input type contains only date in year, month, and day format. The time part is not support by date type.
Code Snippet 7 shows the code of the date input type.
Code Snippet 7:
<label for=”stdate”>Date:</label>
<input type=”date” id=”stdate” name=”startdate”
min=”2000-01-01”/>
<input type=”submit” value=”Submit” id=”btnSubmit”></input>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
<label for=”stmonth”>Month:</label>
<input type=”month” id=”stmonth” name=”startmonth” />
<input type=”submit” value=”submit”/>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
Introduction :
HTML, the core language of the World Wide Web is being used for designing Web pages for nearly a decade. With the continuous evolvement in the Web, Web designers and programmers find it difficult to make pages more flexible and dynamic in behavior. The dynamic behavior is particularly expected when displaying Web forms to the users. For example, HTML5 allows creating combo boxes, adding placeholder text on the page, providing client-side validations through JavaScript, and achieving dynamic behavior using Document Object Model (DOM) API.
Although Internet Explorer 9 and Google Chrome 19 support most HTML5 features, there are some that are supported only in Opera 11.
Introduction to HTML5 Forms
Among the other features of HTML5, there has been a great enhancement to Web forms. HTML5 Web forms are those sections on the Web page that contain special elements called as controls. The controls, such as check boxes, radio buttons, and text boxes provide a visual interface to the user to interact with them. A user provides data through these controls that is sent to the server for further processing. Thus, it is very important to create forms with lot of consideration for usability and accessibility by the users.
In HTML5, creation of form is made easier for Web developers by standardizing them with rich form controls. It also provides client-side validations that are now handled natively by the browsers. This not only reduces the load time of the pages, but also removes the need of the repetitive JavaScript codes to be included on the page.
Even the visual appearance of the forms is improved when displayed on different devices, such as iPhone, ipad, touch screens, and browsers. This enhances the users experience while interacting with them.
10.3 New Features in HTML5 Forms
HTML5 Web forms bring great improvements related to form creation for the Web developers and also for users interacting with them. The following are the changes introduced in HTML5 forms:
New form elements
New input types
New attributes
Browser-based validation
New Elements
HTML5 has introduced a range of new elements that are expanding the options for more number of elements related to input on the forms.
Table 10.1 lists the new elements in HTML5.
Element Description
progress Represents the completion progress of a task on the page
meter Represents a scale of known range
datalist Represents a set of options used with list attribute to make a drop-down control
output Represents the result of a calculation
New Input Types
The input element is a data field that allows the user to edit the data on the form. It has an attribute named type which controls the data type and characteristics of the input element.
Table 10.2 lists the new input types supported by HTML5 that specify the kind of input expected from the users on the Web page.
Type Description
email Represents the completion progress of a task on the page
search Represents a scale of known range
url Represents a set of options used with list attribute to make a drop-down control
tel Represents the result of a calculation
number Represents a numeric value in the input field
range Represents a numeric value to be selected from a range of numbers
date Represents a calendar which is shown at every click on the field
week Represents date in year-week format
Type Description
month Represents a value with year-month format
time Represents a value in hours and minutes format
datetime Represents a full date and time input field with a time zone
datetime-local Represents a full date and time with no time zone
color Represents a predefined interface for selecting color
New Attributes
HTML5 has introduced several new attributes that can be used with form and input elements. Attributes help the elements to perform their tasks.
Table 10.3 lists the new attributes in HTML5.
Table 10.3 lists the new attributes in HTML5.
Type Description
placeholder Represents a hint that help users to enter the correct data in the field
required A Boolean attribute that validates the entry in the field
multiple A Boolean attribute that allows multiple values to be entered in the field
autofocus Focuses the input element on page load
pattern Represents a regular expression for validating the field’s value
form Allows the elements to reference the form by including the form name
Browser-based Validation
HTML4 supported the use of custom JavaScript or libraries to perform validation on the client-side browsers. These validations ensure that the input fields are checked before the form is submitted to the server for further processing.
The new attributes in HTML5, such as required and pattern can be used with the input elements to perform validation. This relieves the Web developers from writing the custom JavaScript code for performing client-side validation on the Web pages. HTML5 also provides advanced validation techniques that can be used with JavaScript to set custom validation rules and messages for the input elements.
CSS Styling Techniques
A Web developer can enhance the form elements with the pseudo-class selectors, such as :required, :valid, and :invalid.
For example, the input fields which cannot be left blank while submitting the form can be displayed with an outline. To achieve this, input field with required attribute can be styled using CSS. Applying CSS styles make it easier for user to navigate and complete the form.
Code Snippet 1 shows the CSS code for formatting non-empty and incorrect data input in the input element fields on the form.
Code Snippet 1:
<style>
input:required {
outline: 1px red solid;
color: green ;
}
input:required:valid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
input:required:invalid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form method=”get” action=”try.php”>
Name: <input type=”text” name=”name” required=”true” /><br/>
Email: <input type=”email” name=”emailid” required=”true” />
<input type=”submit” value=”submit” />
</form>
Forms API
HTML5 has introduced JavaScript API for forms. This API is used to customize validations and processing performed on the forms. The new form’s API provides new methods, events, and properties to perform complex validations combining fields or calculations.
Table 10.4 lists the events and methods.
Events and Methods Description
setCustomValidity (message) Sets the custom error message that is displayed when the form is submitted by the user
checkValidity() Checks the validity of the e-mail address entered by the user
oninvalid Allows script to run only when the element is invalid
onforminput Allows script to run when the form gets an input from the user
onformchange Represents a regular expression for validating the field’s value
form Allows script to run when the form changes
Working with New Input Types
The type attribute of the input element determines what kind of input will be displayed on the user’s browser. The default input is type=”text”.
The registration form in the session is using the following input types:
text
label
radio
textarea
checkbox
submit
HTML5 has introduced more data-specific user interface elements. Now, you will see the new input types in detail.
E-mail Addresses
The type=”email” is used for specifying one or more e-mail addresses. To allow multiple addresses in the e-mail field, separate each address with comma-separator.
In the registration form, the input type is changed from text to email as shown in Code Snippet 2.
Code Snippet 2:
<form method=”get” action=”test.html”>
<label for=”emailid”>Email:</label>
<input type=”email” value=”” id=”emailid” name=”emailaddress”
maxlength=”255” />
<input type=”submit” value=”submit”/>
</form>
In the code, <label> tag defines a label for the element on the form. The for attribute of <label> tag binds it with the related element, that is email element, on the form. The value of for attribute must match with the value of id attribute assigned to the element.
Also, the email contains two attributes, namely id and name. The id attribute specifies a unique id for the element. The value of the id attribute should be unique within the document. It can be used as a reference for styles in style sheet or to access elements using DOM API in JavaScript.
The name attribute specifies a name for the input element. It can be used for referencing the elements in a JavaScript or form data after a form is submitted to the server for processing. The look of the input is still like a plain text field, but changes are applied behind the scenes. Browsers, such as Firefox, Chrome, and Opera will display a default error message if user submits the form with some unrecognizable contents.
Telephone Number
The type=”tel” input element is used for accepting telephone numbers. As compared to email and url types, the tel type does not impose a particular pattern. It supports characters, numbers, and special characters except new lines or carriage returns. The reason for not imposing any pattern for tel type is that different countries support various lengths and punctuation in the phone numbers. Thus, there cannot be a standard format for them.
A user can enforce a pattern for tel input type by using placeholder or pattern attribute. A JavaScript code can also be provided for performing client-side validation on the tel input type.
Code snippet 4 shows the code for including tel input type on the registration form.
Code Snippet 4:
<label for=”telno”>Telephone Number:</label>
<input type=”tel” value=”” id=”telno” name=”telephone_no”
maxlength=”10” />
Number
The input type=”number” is used for accepting only number values. The input element displayed for number type is a spinner box. The user can either type a number or click the up or down arrow to select a number in the spinner box.
Code Snippet 5:
<label for=”stud_age”>Age:</label>
<input type=”number” value=”15” id=”stud_age”
name=”studentage” min=”15” max=”45” step=”1” />
<input type=”submit” value=”submit”/>
In the code, the number input type has attributes, such as min and max to specify the minimum and maximum value for the input.
Range
The input type=”range” is similar to number type and displays a slider control on the page. The range type is used when the exact value is not required in the input. In other words, the value from this type is not accurate. For example, an online survey form asking the clients to rate the products may not receive exact values in the ratings.
Code Snippet 6 shows the code for including range input type with attributes min and max.
Code Snippet 6:
<label>Survey for packages offered[scale: 1-10]:</label>
<input type=”range” name=”rating” min=”1” max=”10” />
<input type=”submit” value=”submit”/>
In the code, the range input type contains attributes, such as min, max, step, and value. The min and max attributes are used to specify the minimum and maximum value allowed for a range and are set to 1 and 10 respectively. The step attribute specify the intervals for incrementing the value. The value of step attribute is 1 by default. The value attribute specifies the default value for the range. The default value is the midpoint of the range specified.
Date and Time
HTML5 has introduced several new input types for date and time. The format for all these date and time types is according to the ISO standards. At present only Opera provides the support for date element by displaying a calendar control.
Date
This input type contains only date in year, month, and day format. The time part is not support by date type.
Code Snippet 7 shows the code of the date input type.
Code Snippet 7:
<label for=”stdate”>Date:</label>
<input type=”date” id=”stdate” name=”startdate”
min=”2000-01-01”/>
<input type=”submit” value=”Submit” id=”btnSubmit”></input>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
<label for=”stmonth”>Month:</label>
<input type=”month” id=”stmonth” name=”startmonth” />
<input type=”submit” value=”submit”/>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
Wednesday 13 May 2015
Html session 10
Html session 10 theory :
Color :
HTML5 provides a predefined interface for selecting the colors using input type=”color”. The input value from the color input field is a hexadecimal number. For example, #00FF00 represents a hexadecimal RGB color value.
At present, the color input type is supported on Opera browser and some new smart phones.
Code Snippet 12 shows the usage of color input type to display a color picker on the Web page.
Code Snippet :
<label>Color:</label>
<input type=”color” name=”mycolor” />
<input type=”submit” value=”submit”/>
New Form Attributes
Earlier, Web developers needed to write JavaScript snippets for performing the validations on the data entered by the users in form fields. HTML5 has provided several new attributes that perform the validations without writing JavaScript snippets for them. These attributes perform the following tasks:
Check data provided by users with the regular expression pattern assigned to the fields
Inform users with appropriate errors
Check that the required fields are not left empty by the users
Enable multiple values for the fields, if provided
These attributes can be used to support scripting drawbacks, without actually hard coding them in the Web pages. Browsers that do not understand these new attributes will ignore them.
10.5.1 Required
This is a boolean attribute that informs the browser to submit the form only when the required fields are not left empty by the users. The input type elements, such as button, range, and color cannot be set for required attribute as they have a default value.
Different Web browsers such as Opera, Chrome, and Firefox provide different error messages, such as ‘This is a required field’, or ‘Please fill out this field’ for required attribute.
Code Snippet 13 shows assignment of required attribute to the name field on the registration form.
<label>Name: <em> <img src=”star.jpg” width=”9” height=”10”
alt=”” border=”0”> </em>
</label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required =”true”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true”/>
<input type=”submit” value=”submit”/>
Placeholder
This attribute displays a short hint or text inside a form element. This informs the user about what data needs to be entered in that field. The placeholder text toggles, which means it appears in the field and disappears when the user clicks inside the field. Earlier, Web developers provided this functionality through JavaScript snippets which is now done in the browsers with the help of placeholder attribute. At present, all the browsers such as Chrome, Safari, Opera, and Firefox support the placeholder attribute.
If the size of the hint exceeds the field size, then use title attribute to describe text for the field.
Code Snippet 14 shows the assignment of placeholder attribute to the name field on the registration form.
<label>Name: <img src=”required_star.gif” height=”10px”
width=”10px”/></label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required=”true” placeholder=”First Name”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true” placeholder=”Last Name” /><br/>
Pattern
This attribute uses regular expressions for validating the fields. The data entered by the user must match with the pattern specified in the regular expression. This helps to limit the input accepted from the user.
While including regular expressions through pattern attribute, it informs the users about the excepted pattern for the data. This can be achieved in the current browsers using the title attribute, which is displayed as a tool tip when the users move the pointer over the field.
You need to validate a zip code of five numbers on the form. There is no pre-defined input type to restrict the input to numbers of specified length. Thus, pattern attribute can be used to create user-defined check values for the field. Also, a title attribute can be used to customize the error message displayed for the field.
Code Snippet 15 shows the assignment of pattern attribute to the phone number field on the registration form.
<label>Phone number:<img src=”required_star.gif” height=”10px”
width=”10px”/></label>
<input type=”tel” value=”” size=”4” maxlength=”5” tabindex=”11”
required=”true” placeholder=”Code”pattern=”[+0-9]{1,4}”
title=”Format:(+)99(99)”/>
<label>-</label>
<input type=”tel” value=”” size=”10” maxlength=”12”
tabindex=”13” required=”true” placeholder=”Number” pattern=”[0-9]{8,}” title=”Minimum 8 numbers”/>
In the code, [+0-9] pattern indicates that only special character ‘+’ as well as numbers are allowed. Also, {1, 4} refers to the length of the numbers, that is between 1 and 4. Similarly, {8,} means minimum eight numbers are allowed in the tel input type field.
Multiple
This is a boolean attribute that allows multiple values for some input types. This was available only for select input type in the earlier version of HTML.
HTML5 allows multiple attribute with input types, such as email and file. If assigned, it allows selection of multiple files, or include several e-mail addresses in the email field separated by comma separator.
At present, browsers such as Chrome, Opera, and Firefox support multiple attribute for email and file element.
Code Snippet 16 shows the assignment of multiple attribute to the e-mail address field on the registration form.
Code Snippet :
<label>Email Address:<img src=”required_star.gif” height=”10px” width=”10px”/></label>
<input type=”email” value=”” name=”emailid” maxlength=”255” tabindex=”5” required=”true” placeholder=”Email Address” multiple/>
In the code, multiple attribute will allow insertion of multiple e-mail addresses in the field. Every e-mail address will be validated individually by the browser.
Autofocus
Earlier, Web developers were using JavaScript code to set the focus to the input field on page load. The purpose was to force the focus over the input field, even if the user selected some other element while page is still loading. As a result of the JavaScript code, control moves to the input field upon completion of page load. This way, regardless of what the user selected, the focus would always be on the input field.
To provide an easier solution for this behavior, HTML5 has introduced autofocus attribute for the form elements. The autofocus attribute will focus on the input field on page load. However, depending upon the situation, it will not move the focus away if the user has selected some other field. Only one element can be focused with autofocus attribute on a particular page while loading.
Code Snippet 17 shows the assignment of autofocus attribute to the first name field on the registration form.
<label>Name:</label>
<br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
placeholder =”First Name” autofocus/>
<input type=”submit” value=”submit”/>
<br>
<label>First Name</label>
Form
Earlier, all the form controls need to be provided between the opening and closing <form> tag. In HTML5, elements can be inserted at any place in the document and they can reference the form using the form attribute .
Code Snippet 18:
<body>
<input type=”text” name=”mytext” id=”mytext” form=”myform”/>
. . .
. . .
<form id=”myform”>
. . .
. . .
</form>
</body>
In the code, the form is declared with an id attribute. The value of the id attribute is assigned to the input element using form attribute.
Color :
HTML5 provides a predefined interface for selecting the colors using input type=”color”. The input value from the color input field is a hexadecimal number. For example, #00FF00 represents a hexadecimal RGB color value.
At present, the color input type is supported on Opera browser and some new smart phones.
Code Snippet 12 shows the usage of color input type to display a color picker on the Web page.
Code Snippet :
<label>Color:</label>
<input type=”color” name=”mycolor” />
<input type=”submit” value=”submit”/>
New Form Attributes
Earlier, Web developers needed to write JavaScript snippets for performing the validations on the data entered by the users in form fields. HTML5 has provided several new attributes that perform the validations without writing JavaScript snippets for them. These attributes perform the following tasks:
Check data provided by users with the regular expression pattern assigned to the fields
Inform users with appropriate errors
Check that the required fields are not left empty by the users
Enable multiple values for the fields, if provided
These attributes can be used to support scripting drawbacks, without actually hard coding them in the Web pages. Browsers that do not understand these new attributes will ignore them.
10.5.1 Required
This is a boolean attribute that informs the browser to submit the form only when the required fields are not left empty by the users. The input type elements, such as button, range, and color cannot be set for required attribute as they have a default value.
Different Web browsers such as Opera, Chrome, and Firefox provide different error messages, such as ‘This is a required field’, or ‘Please fill out this field’ for required attribute.
Code Snippet 13 shows assignment of required attribute to the name field on the registration form.
<label>Name: <em> <img src=”star.jpg” width=”9” height=”10”
alt=”” border=”0”> </em>
</label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required =”true”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true”/>
<input type=”submit” value=”submit”/>
Placeholder
This attribute displays a short hint or text inside a form element. This informs the user about what data needs to be entered in that field. The placeholder text toggles, which means it appears in the field and disappears when the user clicks inside the field. Earlier, Web developers provided this functionality through JavaScript snippets which is now done in the browsers with the help of placeholder attribute. At present, all the browsers such as Chrome, Safari, Opera, and Firefox support the placeholder attribute.
If the size of the hint exceeds the field size, then use title attribute to describe text for the field.
Code Snippet 14 shows the assignment of placeholder attribute to the name field on the registration form.
<label>Name: <img src=”required_star.gif” height=”10px”
width=”10px”/></label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required=”true” placeholder=”First Name”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true” placeholder=”Last Name” /><br/>
Pattern
This attribute uses regular expressions for validating the fields. The data entered by the user must match with the pattern specified in the regular expression. This helps to limit the input accepted from the user.
While including regular expressions through pattern attribute, it informs the users about the excepted pattern for the data. This can be achieved in the current browsers using the title attribute, which is displayed as a tool tip when the users move the pointer over the field.
You need to validate a zip code of five numbers on the form. There is no pre-defined input type to restrict the input to numbers of specified length. Thus, pattern attribute can be used to create user-defined check values for the field. Also, a title attribute can be used to customize the error message displayed for the field.
Code Snippet 15 shows the assignment of pattern attribute to the phone number field on the registration form.
<label>Phone number:<img src=”required_star.gif” height=”10px”
width=”10px”/></label>
<input type=”tel” value=”” size=”4” maxlength=”5” tabindex=”11”
required=”true” placeholder=”Code”pattern=”[+0-9]{1,4}”
title=”Format:(+)99(99)”/>
<label>-</label>
<input type=”tel” value=”” size=”10” maxlength=”12”
tabindex=”13” required=”true” placeholder=”Number” pattern=”[0-9]{8,}” title=”Minimum 8 numbers”/>
In the code, [+0-9] pattern indicates that only special character ‘+’ as well as numbers are allowed. Also, {1, 4} refers to the length of the numbers, that is between 1 and 4. Similarly, {8,} means minimum eight numbers are allowed in the tel input type field.
Multiple
This is a boolean attribute that allows multiple values for some input types. This was available only for select input type in the earlier version of HTML.
HTML5 allows multiple attribute with input types, such as email and file. If assigned, it allows selection of multiple files, or include several e-mail addresses in the email field separated by comma separator.
At present, browsers such as Chrome, Opera, and Firefox support multiple attribute for email and file element.
Code Snippet 16 shows the assignment of multiple attribute to the e-mail address field on the registration form.
Code Snippet :
<label>Email Address:<img src=”required_star.gif” height=”10px” width=”10px”/></label>
<input type=”email” value=”” name=”emailid” maxlength=”255” tabindex=”5” required=”true” placeholder=”Email Address” multiple/>
In the code, multiple attribute will allow insertion of multiple e-mail addresses in the field. Every e-mail address will be validated individually by the browser.
Autofocus
Earlier, Web developers were using JavaScript code to set the focus to the input field on page load. The purpose was to force the focus over the input field, even if the user selected some other element while page is still loading. As a result of the JavaScript code, control moves to the input field upon completion of page load. This way, regardless of what the user selected, the focus would always be on the input field.
To provide an easier solution for this behavior, HTML5 has introduced autofocus attribute for the form elements. The autofocus attribute will focus on the input field on page load. However, depending upon the situation, it will not move the focus away if the user has selected some other field. Only one element can be focused with autofocus attribute on a particular page while loading.
Code Snippet 17 shows the assignment of autofocus attribute to the first name field on the registration form.
<label>Name:</label>
<br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
placeholder =”First Name” autofocus/>
<input type=”submit” value=”submit”/>
<br>
<label>First Name</label>
Form
Earlier, all the form controls need to be provided between the opening and closing <form> tag. In HTML5, elements can be inserted at any place in the document and they can reference the form using the form attribute .
Code Snippet 18:
<body>
<input type=”text” name=”mytext” id=”mytext” form=”myform”/>
. . .
. . .
<form id=”myform”>
. . .
. . .
</form>
</body>
In the code, the form is declared with an id attribute. The value of the id attribute is assigned to the input element using form attribute.
Tuesday 12 May 2015
Html tutorials
Html tutorials session 10 :
Html session 10 theory :
Autocomplete Attribute :
Many browsers help user in filling forms by providing data in the input fields, such as email and tel, based on their earlier input. In many situations, the autocomplete behavior may not be secure, especially with certain fields accepting password or credit card number data.
HTML5 offers an autocomplete attribute which provides control on prefilled values displayed in the fields. It must be specified on the form element which applies for all input fields or on particular input fields. The input element that can support autocomplete are text, url, tel, password, datepickers, range, and color.
The autocomplete feature comprises two states namely, on and off. The on state indicates that the data that is not sensitive can be remembered by the browser. Similarly, the off state indicates that the data will not be remembered. Such data may be sensitive and not safe for storing with the browsers. Hence, user needs to explicitly provide the data each time while filling the form.
By default, many browsers have the autocomplete feature enabled in them. The browsers that do not support autocompletion, can be turned on or off for this behavior by specifying autocomplete attribute either on the form or specific input elements.
New Form Elements
HTML5 has introduced some brand new elements that can be incorporated in the Web pages. These new elements are specifically designed to be used with the JavaScript. When combined with JavaScript, these new elements can be more functional.
At present, all the browsers do not provide the support for these new elements. If the control is not supported by the browser, then it displays element as a text field. Opera provides the support for all the new form elements.
The new form elements introduced in HTML5 are as follows:
Datalist
Progress
Meter
Output
Datalist
Datalist is a form-specific element. It provides a text field with a set of predefined list of options that are displayed in a drop-down list. When the text field receives focus, a list of options is displayed to the user.
The <datalist> element is very similar to standard <select> element available in earlier HTML. The only difference in datalist is that it allows the user to enter data of their choice or select from the suggested list of options.
The lists of options for the <datalist> element are placed using the option element. Then, the datalist is associated with an input element using the list attribute. The value of the list attribute is the value of id attribute provided with the <datalist> element. The same datalist can be associated with several input fields. At present, only Opera browser provides the support for the datalist.
Code Snippet 20 shows the syntax of providing the <datalist> element on the form.
Code Snippet :
<label> Select the mode of payment: </label>
<input type=”text” name=”payment” list=”paymentlist” />
<datalist id=”paymentlist”>
<option value=”Cash-on-Delivery”>
<option value=”Net Banking”>
<option value=”Credit Card”>
<option value=”Debit Card”>
<option value=”e-Gift Voucher”>
</datalist>
<input type=”submit” value=”submit”/>
In the code, a datalist requires value attribute to be added with the <option> tag. Values nested between the opening and closing <option> tag will not be displayed in the datalist menu.
Progress
The progress element represents the current status of a task, which gradually changes as the task heads for completion. This is not a form-specific element.
For example, when the user downloads any file from a particular Web page, the download task is represented as a progress bar.
Code Snippet 21 shows the syntax for providing progress element on the form.
Code Snippet 21:
<label> Downloading status: </label>
<progress value=”35” max=”100” ></progress>
<input type=”submit” value=”submit”/>
In the code, the progress element contains two attributes namely, max and value. The max attribute declares the maximum value for the task to be processed for its completion.
The value attribute indicates how much task has been processed so far.
Meter
The meter element represents a measurement scale for a known range. The known range have the definite minimum and maximum values to measure the data on the scale. For example, a meter element can be used to represent measurements, such as disk usage space, fraction value, or significance of a query result. All these have a known maximum value defined for them. The meter element cannot indicate age, height, or weight, as maximum values for them cannot be specified.
Code Snippet 22 shows the code of the meter element.
Code Snippet 22:
<label> Total score of marks: </label>
0 <meter min=”0” max=”400” value=”180” title=”numbers scored” low=”120” high=”300”> </meter> 400<br/>
<input type=”submit” value=”submit”/>
In the code, the meter element contains six attributes that are used to determine the measurements in the known range.
The min and max attribute specifies the minimum and maximum value that sets bounds for the range. The default value for the max attribute is 1. The value attribute specifies the current measured value. The high and low attributes specifies the range of values that can be considered as high or low for the given range.
For example, in the given range of scores, the range of values below 120 will be considered low, but anything above 300 will be considered as high.
There is another attribute named optimum which refers to the ideal value for the measurement.
Output
The output element displays the results of a calculation on a form. The result values displayed in the output element are processed from the other form elements. For example, the output element might be used to display the total cost on the purchase items after calculating discount amount in a registration form or purchase order form.
Code Snippet 23 shows the calculation of data from other form elements to be displayed in the output element.
Code Snippet :
<form oninput=”x.value = parseInt(type.value)*
parseInt(duration.value)”>
<label>Membership Type:</label>
<select name=”type”>
<option value=”400”>Gold - $400</option>
<option value=”500”>Silver - $500</option>
<option value=”600”>Platinum - $600</option>
</select>
<label>Duration [years]:</label>
<input type=”number” value=”0” name=”duration”
min=”1”max=”5” step=”1” />
<label> Annual Payment Fees: $.</label>
<output name=”x” for=”type duration”></output>
In the code, for attribute relates the output element with the elements whose values are taken for calculation. The form oninput event handles the input event which is fired whenever the value of the elements change on receiving input from the user. A JavaScript code can also be written to update the values for the output element.
Html session 10 theory :
Autocomplete Attribute :
Many browsers help user in filling forms by providing data in the input fields, such as email and tel, based on their earlier input. In many situations, the autocomplete behavior may not be secure, especially with certain fields accepting password or credit card number data.
HTML5 offers an autocomplete attribute which provides control on prefilled values displayed in the fields. It must be specified on the form element which applies for all input fields or on particular input fields. The input element that can support autocomplete are text, url, tel, password, datepickers, range, and color.
The autocomplete feature comprises two states namely, on and off. The on state indicates that the data that is not sensitive can be remembered by the browser. Similarly, the off state indicates that the data will not be remembered. Such data may be sensitive and not safe for storing with the browsers. Hence, user needs to explicitly provide the data each time while filling the form.
By default, many browsers have the autocomplete feature enabled in them. The browsers that do not support autocompletion, can be turned on or off for this behavior by specifying autocomplete attribute either on the form or specific input elements.
New Form Elements
HTML5 has introduced some brand new elements that can be incorporated in the Web pages. These new elements are specifically designed to be used with the JavaScript. When combined with JavaScript, these new elements can be more functional.
At present, all the browsers do not provide the support for these new elements. If the control is not supported by the browser, then it displays element as a text field. Opera provides the support for all the new form elements.
The new form elements introduced in HTML5 are as follows:
Datalist
Progress
Meter
Output
Datalist
Datalist is a form-specific element. It provides a text field with a set of predefined list of options that are displayed in a drop-down list. When the text field receives focus, a list of options is displayed to the user.
The <datalist> element is very similar to standard <select> element available in earlier HTML. The only difference in datalist is that it allows the user to enter data of their choice or select from the suggested list of options.
The lists of options for the <datalist> element are placed using the option element. Then, the datalist is associated with an input element using the list attribute. The value of the list attribute is the value of id attribute provided with the <datalist> element. The same datalist can be associated with several input fields. At present, only Opera browser provides the support for the datalist.
Code Snippet 20 shows the syntax of providing the <datalist> element on the form.
Code Snippet :
<label> Select the mode of payment: </label>
<input type=”text” name=”payment” list=”paymentlist” />
<datalist id=”paymentlist”>
<option value=”Cash-on-Delivery”>
<option value=”Net Banking”>
<option value=”Credit Card”>
<option value=”Debit Card”>
<option value=”e-Gift Voucher”>
</datalist>
<input type=”submit” value=”submit”/>
In the code, a datalist requires value attribute to be added with the <option> tag. Values nested between the opening and closing <option> tag will not be displayed in the datalist menu.
Progress
The progress element represents the current status of a task, which gradually changes as the task heads for completion. This is not a form-specific element.
For example, when the user downloads any file from a particular Web page, the download task is represented as a progress bar.
Code Snippet 21 shows the syntax for providing progress element on the form.
Code Snippet 21:
<label> Downloading status: </label>
<progress value=”35” max=”100” ></progress>
<input type=”submit” value=”submit”/>
In the code, the progress element contains two attributes namely, max and value. The max attribute declares the maximum value for the task to be processed for its completion.
The value attribute indicates how much task has been processed so far.
Meter
The meter element represents a measurement scale for a known range. The known range have the definite minimum and maximum values to measure the data on the scale. For example, a meter element can be used to represent measurements, such as disk usage space, fraction value, or significance of a query result. All these have a known maximum value defined for them. The meter element cannot indicate age, height, or weight, as maximum values for them cannot be specified.
Code Snippet 22 shows the code of the meter element.
Code Snippet 22:
<label> Total score of marks: </label>
0 <meter min=”0” max=”400” value=”180” title=”numbers scored” low=”120” high=”300”> </meter> 400<br/>
<input type=”submit” value=”submit”/>
In the code, the meter element contains six attributes that are used to determine the measurements in the known range.
The min and max attribute specifies the minimum and maximum value that sets bounds for the range. The default value for the max attribute is 1. The value attribute specifies the current measured value. The high and low attributes specifies the range of values that can be considered as high or low for the given range.
For example, in the given range of scores, the range of values below 120 will be considered low, but anything above 300 will be considered as high.
There is another attribute named optimum which refers to the ideal value for the measurement.
Output
The output element displays the results of a calculation on a form. The result values displayed in the output element are processed from the other form elements. For example, the output element might be used to display the total cost on the purchase items after calculating discount amount in a registration form or purchase order form.
Code Snippet 23 shows the calculation of data from other form elements to be displayed in the output element.
Code Snippet :
<form oninput=”x.value = parseInt(type.value)*
parseInt(duration.value)”>
<label>Membership Type:</label>
<select name=”type”>
<option value=”400”>Gold - $400</option>
<option value=”500”>Silver - $500</option>
<option value=”600”>Platinum - $600</option>
</select>
<label>Duration [years]:</label>
<input type=”number” value=”0” name=”duration”
min=”1”max=”5” step=”1” />
<label> Annual Payment Fees: $.</label>
<output name=”x” for=”type duration”></output>
In the code, for attribute relates the output element with the elements whose values are taken for calculation. The form oninput event handles the input event which is fired whenever the value of the elements change on receiving input from the user. A JavaScript code can also be written to update the values for the output element.
Subscribe to:
Posts (Atom)