Skip to main content

NETWORK BASICS

Network A system of interconnected computers and computerized peripherals such as printers is called computer network. This interconnection among computers facilitates information sharing among them. Computers may connect to each other by either wired or wireless media. A computer network consists of a collection of computers, printers and other equipment that is connected together so that they can communicate with each other.  


Network application
A Network application is any application running on one host and provides a communication to another application running on a different host, the application may use an existing application layer protocols such as: HTTP(e.g. the Browser and web server), SMTP(e.g. the email-client). And may be the application does not use any existing protocols and depends on the socket programming to communicate to another application. So the web application is a type of the network applications. 
There are lots of advantages from build up a network, but the th…

Building the User Interface by Using HTML5: Organization, Input, and Validation

Choosing and Configuring HTML5 Tags to Organize Content and Forms
Making The Move To HTML5
HTML5 markup introduces many new markup tags for organizing the structure of HTML documents, which makes documents easier to create and modify. The new tags have more intuitive names than similar constructs in previous HTML specifications; the tags are named more appropriately for the part of the page they apply to, such as <header>, <section>, and <footer>. HTML5 has also streamlined table creation, moving many of the table attributes that affect width, cell padding, and vertical and horizontal alignment to the CSS file.

Understanding Semantic HTML

One of the very handy new features of HTML5 is the use of semantic markup, which gives better meaning, or definition, to several tags so they make more sense to humans, programs, and Web browsers. As mentioned in Lesson 2, not all HTML tags have been replaced or updated for HTML5, but some new tags introduced in HTML5 make the work of creating Web pages a lot easier. 

In HTML 4.01 and prior specifications, a developer creating the structure of an HTML document uses the <div> tag frequently throughout. The <div> tag often includes a class or ID attribute, which may also include CSS styles such as background-color, height, and width. A simple example of a <div> tag is:

<div id="header" > This is a header </div>

NOTE class and id are global attributes, which means they can be used with any HTML element. You can see the complete list of global HTML attributes at http://dev.w3.org/ html5/markup/global-attributes.html.

The div element alone doesn’t have much meaning without the id or class attribute. Even the ID can be assigned a value of your choice, such as "header", "header_inner", "slogan", "content", "style", and many more. An example from an HTML 4.01 document is shown as follows:
<div id="header">  
<div id="header_inner">   
 <img src="images/doghappy.jpg" 
alt="Attaboy Pet Services" />     
<div id="slogan">Happy dogs are good dogs</div>  
</div> 
</div>
HTML5 uses simpler tags to replace many of the div tags, 

Using Tags to Add Structure to an HTML Document

New HTML5 elements for structuring and organizing content in an HTML document include header, footer, section, nav, article, and aside.

Now that you understand semantic markup, let’s look at several of the new HTML5 elements for organizing documents. Table 3-1 lists new HTML5 structure-related tags and describes them.

NOTE As you learned in Lesson 1, the HTML5 standard won’t be finalized for several years, which means changes to the specification are still occurring. The major Web browsers, like Microsoft Internet Explorer and Mozilla Firefox, support many HTML5 elements but not all of them. The “When Can I Use” Web site at http://caniuse.com/ is an excellent source for determining which browsers support specific HTML5 features. The Web site is updated regularly, so you should make it a part of your essential HTML5 resources. In addition, you can test any browser’s support for HTML5 by browsing to the HTML5 Test Web site at http://html5test.com.

THE HEADER AND FOOTER ELEMENTS

The header element defines a header for a document, section, or article. In HTML 4.01, you use the header div as mentioned in the previous section (<div id="header">). The footer element defines a footer for a document or section, and typically contains information about the document or section, such as the author name, copyright data, links to related documents, and so on. The footer element doesn’t automatically appear at the bottom (or foot) of the document—you need to use CSS to instruct the browser where to display the footer. Footers that appear at the bottom of every Web page or document are known as “sticky footers.” 

An example of an article with a header tag and a footer tag is as follows:

<article>  
<header>    
<h1>Learning HTML5</h1>   
 <h2>The New Elements</h2>  
</header> 
 <p>New HTML5 tags make Web page and application  
development easier than ever.</p>  
<footer>   
 <p>Published: <time datetime="2012-09   
 03"September 3, 2012</time></p> 
 </footer> 
</article>
Like the div element, you can use the header and footer elements multiple times in an HTML document,

THE SECTION ELEMENT 

The section element defines a section in a document, such as a chapter, parts of a thesis, or parts of a Web page whose content is distinct from each other. The WC3 specifies uses for the section element to differentiate it from other structure-related elements, mainly that it contain at least one heading and that it define something that would appear in the document’s outline. For example, you should use the section element to divide different parts of a one-page Web site or to create a portfolio of images. The following is an example of a simple section: 
<section>  
<h1>Eight Count</h1>  
<p>Hip-hop dance instructors often teach moves  
that have eight counts per set.</p>
 </section>

Knowing when to use the <section> tag versus a different element can be tricky at times. When you’re working on an HTML document and are unsure which element to use, browse the W3C HTML5 specification or research the Web to see how other developers have handled a similar situation. 

When defining a section header, which may contain h1 through h6 headings, you can use the hgroup element to group headings. The hgroup element affects organization but not presentation. Consider using hgroup when you have a heading and a subheading one right after the other, as follows. 

<section>  
 <hgroup> 
<h1>Hip-Hop Dance Routines</h1>
 <h3>The Eight-Count Method</h3>
   </hgroup>   
<article>     
<p>Hip-hop dance instructors often teach     
 moves that have eight counts per set.</p>  
 </article> 
</section>

CREATE AN HTML DOCUMENT WITH A HEADER, SECTIONS, AND A FOOTER

GET READY. To create an HTML document using the HTML5 header, section, and footer elements, perform the following steps: 

1. Using an HTML editor or app development tool and a Web browser, create a simple HTML document that incorporates the <header>, <section>, and <footer> tags. Include two sections, and be sure to include at least one h1 element within the sections. You can include images if you want. The markup might look like the following:

2. Save the file as L3-MyPage.html. 

3. Validate the document using the W3C Markup Validation Service at http://validator. w3.org. If you need help doing so, refer to Lesson 2. 

4. Leave the editing tool and Web browser open if you continue to the next exercise during this session.

<!doctype html>
 <html> 
<head>    
<meta charset="utf-8" />    
<title>My Page</title> 
</head> 
<body> 
<header>   
<h1>Selecting a Concert Style</h1> 
</header> 
<section>   
<h1>Symphonies</h1>  
 <p>A symphony is a type of musical composition generally 
 performed by a full orchestra.</p> 
</section> 
<section>   
<h1>Raves</h1>  
<p>A rave is a gathering of people who listen and dance to  
music, especially electronic music, usually performed by a  
live band or live DJs.</p> 
</section> 
<footer>   
<p>Author: Nathaniel Becker</p> 
</footer> 
</body> 
</html>

THE NAV ELEMENT 
The nav element defines a block of navigation links. The nav element is useful for creating a set of navigation links as your document’s primary navigation, a table of contents, breadcrumbs in a footer, or Previous-Home-Next links. 

The W3C mentions that you don’t have to use <nav> tags for all navigation links, just major blocks of links. Because <nav> tags are interpreted by screen reader software for the visually challenged, the software can determine if it should make the navigation links available to the user immediately or not, depending on their importance. 

The following example shows the <nav> tag in use:
 <nav>  <a href="/hiphop/">Hip-Hop</a>
  <a href="/modern/">Modern</a> 
 <a href="/swing/">Swing</a> 
 <a href="/tap/">Tap</a> 
</nav>

An example of markup for Previous-Home-Next links follows, with vertical bars after each navigation item to separate it from the others visually:

<nav>  
<a href="http://www.example.com/Services">Previous</a> |  
<a href="http://www.example.com">Home</a> |  
<a href="http://www.example.com/About">Next</a> 
</nav> 
<br />

ADD THE NAV ELEMENT TO AN HTML DOCUMENT 

GET READY. To add the nav element to an HTML document, perform the following steps: 1. In your HTML editor or app development tool, open the L3-MyPage.html file (if it’s not already open) and save it as L3-MyPage-nav.html to create a new file. 2. Include the following nav tags and content within the <header> tag:
<header>   <h1>Selecting a Concert Style</h1>  <nav>    <a href="#symphonies">Symphonies</a> |    <a href="#raves">Raves</a>  </nav> </header>
This navigation block will link to the Symphonies and Raves sections in the HTML document. 3. To make the links work, modify the Symphones and Raves <h1> heads as follows:
<h1><a id="symphonies">Symphonies</a></h1> <h1><a id="raves">Raves</a></h1>
4. Re-save the file as L3-MyPage-nav.html and then open it in a Web browser. The navigation links would appear in a Web page as shown in Figure 3-7.
5. Leave the editing tool and Web browser open if you continue to the next exercise during this session.

THE ARTICLE ELEMENT The article element defines a part of an HTML document that consists of a “self-contained composition” that is independent from the rest of the content in the document. Content set off by <article> tags can be distributed in syndication, so think of it as content that makes sense on its own. (Web syndication is the process of making content from one Web site available to many Web sites.).

Examples of content suitable for tagging with <article> include a magazine article, a blog entry, or content for an RSS feed. You can also use the article element for About and Contact content, which are independent from the rest of the page on which they reside but aren’t necessarily going to be syndicated. 

THE ASIDE ELEMENT 

The aside element is used to set off content that’s related to the current topic but would interrupt the flow of the document if left inline. Essentially, the aside element is used for information that lends itself to sidebars and notes. This content might give a more detailed look at a topic, offer related reading links, or display definitions for keywords in the paragraph. The aside element doesn’t change the position of content or how the content displays; it simply lets the browser and search engines know that it’s related content.
<article>  <header>    <h1>Learning HTML5</h1>    <h2>The New Elements</h2>  </header>  <p>New HTML5 tags make Web page and application  development easier than ever. One of the very   handy new features of HTML5 is the use of   semantic markup.</p>  <aside> <h4><b>semantic markup</b></h4> <p> gives better meaning, or definition, to tags so they make more sense to humans, programs, and Web browsers</p>    </aside>  <p>Not all HTML tags have been replaced or updated   for HTML5, but some new tags introduced in HTML5   make the work of creating Web pages a lot   easier.</p> <footer>    <p>Published: <time datetime="2012-09    03">September 3, 2012</time></p>  </footer> </article>
The markup would appear in a Web page as shown in Figure 3-8.

As you can see in Figure 3-8, the aside content doesn’t really stand out from the rest of the content. You could add the horizontal rule <hr /> tag before and after the aside content, which would appear in a Web browser as shown in Figure 3-9. 

You could also use CSS to adjust the margins of the aside content so it’s indented on the left and right. In later lessons, you’ll learn CSS layout techniques to display similar content in a box along the left or right side of the corresponding body text.

ADD THE ASIDE ELEMENT TO AN HTML DOCUMENT 

GET READY. To add the aside element to an HTML document, perform the following steps: 1. In your HTML editor or app development tool, open the L3-MyPage-nav.html file (if it’s not already open) and save it as L3-MyPage-art-aside.html to create a new file. 2. Include an aside element just before the footer, as follows: <aside>    <hr />     <p>Note: The U.S. Drug Enforcement Administration is also    interested in raves. Go to http://www.justice.gov/dea/    ongoing/raves.html to learn more.</p> </aside> 3. Re-save the file as L3-MyPage-art-aside.html and view it in a Web browser. The page should look similar to Figure 3-10. 4. Validate the document using the W3C Markup Validation Service at http://validator. w3.org. 5. Close the file, and then leave the editing tool and Web browser open if you continue to the next exercise during this session.

Using Tags to Create Tables and Lists

Tables and lists give structure to specific information in HTML documents. A table contains rows and columns, and displays data in a grid. In HTML, you can create ordered and unordered lists. Each item in an ordered list is marked by a number or letter. An unordered list is a bulleted list.

This section focuses on how to create tables and lists using HTML elements. HTML5 introduces some new elements for both tables and lists, but most of the tags and concepts are the same as previous specifications. If you’ve ever created an HTML table or list, you should be able to breeze through this section.

CREATING TABLES

 An HTML table contains rows and columns, and is used to organize and display information in a grid format. Some developers use tables for layout purposes, such as to position or align content with images, but that’s not the best use for tables. 

Regarding markup, every HTML table begins with the <table> tag. Rows are marked by the <tr> tag, column headers use the <th> tag, and cells are defined by the <td> tag.

The markup for a very basic two-column, five-row table is as follows. Comments have been added to indicate columns and rows, which are informational only and don’t appear when the document is viewed in a browser, is shown in Figure 3-11: <table border="1">  <tr> <!--first row-->    <th>Quarter</th> <!--first column in first row-->    <th>Total Sales</th> <!--first row, second column-->  </tr>  <tr> <!--second row-->    <td>Q1</td>    <td>$4,349</td>  </tr>  <tr> <!--third row-->    <td>Q2</td>    <td>$2,984</td>  </tr>  <tr> <!--fourth row-->    <td>Q3</td>    <td>$3,570</td>  </tr>  <tr> <!--fifth row-->    <td>Q4</td>    <td>$7,215</td>  </tr> </table>

Building on a simple table, you can use the <caption> tag to add a caption above or below the table. To apply inline styles using HTML rather than CSS, use the <col> tag to apply styles to an entire column. (You’ll learn about inline formatting shortly.) The <colgroup> tag groups columns within a table so you can apply formatting to the group rather than just a column. When creating a long table that requires scrolling within a browser, use the <thead>, <tfoot>, and <tbody> tags. The content within the table header and footer will remain on the page while the content marked by <tbody> will scroll between them. The <thead> tag creates column headings (bolded by default), and the <tfoot> tag is used to display the last row, such as a totals row. The <tbody> tag defines all of the content between the header and footer. The following is an example of the markup for a table with three columns and five rows, the first row being the column headings and the last row the table foot. The markup also includes a caption above the table. The markup is shown rendered by a browser in Figure 3-12: <table>  <caption>Sales for Employee ID 2387</caption>
    <colgroup span="2" style="background-color:#EEE8AA;">    </colgroup>

  <colgroup style="background-color:#00FA9A;">    </colgroup>
  <thead>    <tr> <th scope="col">Quarter</th> <th scope="col">Total Sales</th> <th scope="col">Goal Met?</th>    </tr>  </thead> <tfoot>    <tr> <th scope="col">Total</th> <th scope="col">$18,118</th>    </tr> </tfoot>  <tbody>    <tr> <td>Q1</td> <td>$4,349</td> <td>Yes</td>    </tr>    <tr> <td>Q2</td> <td>$2,984</td> <td>No</td>    </tr>    <tr> <td>Q3</td> <td>$3,570</td> <td>Yes</td>
Figure 3-12 A more advanced version of a simple table
Building the User Interface by Using HTML5: Organization, Input, and Validation | 67
    </tr>    <tr> <td>Q4</td> <td>$7,215</td> <td>Yes</td>    </tr>  </tbody>

Notice in the preceding example the use of background color for grouped columns. This is an example of inline formatting. The style attribute uses one or more CSS properties and values, separated by semicolons. For HTML color, you can use either the color name or the hexadecimal code. The hexadecimal code #EEE8AA produces the pale goldenrod color. The hexadecimal code #00FA9A produces the spring green color. An HTML standard color chart is available at http://www.w3schools.com/html/html_colornames.asp. You could also center the content in a cell, column, or column group using style="textalign:center". To string multiple properties and values in the same style attribute, use syntax similar to style="color:blue;text-align:center". CSS and its many properties are covered in Lessons 4 through 6 of this book. Table 3-3 summarizes the common elements used to build tables in HTML5.

GET READY. To create a table, perform the following steps: 1. Using an HTML editor or app development tool and a Web browser, create a file named L3-PracTable.html with the following markup:
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>    <meta charset="utf-8" />    <title>High-grossing Movies</title> </head> <body> <table border="1">  <tr>    <th>Movie</th>    <th>Gross Proceeds</th>  </tr>  <tr>    <td>Avatar</td>    <td>$2.7 billion</td>  </tr>  <tr>    <td>Titanic</td>    <td>$2.1 billion</td>  </tr>  <tr>    <td>The Dark Knight</td>    <td>$1.0 billion</td>  </tr> </table> </body> </html>
2. Italicize the title of each movie by using the <i> tags. 3. Modify the table to add a caption above the table that reads “High-grossing Movies” and a footer that includes the word “Total” and “$5.8 billion”. 4. Change the background of the entire table, from column headings through the footer, to khaki, using hexadecimal code #F0E68C. To do so, add the following colgroup markup between <table border="1"> and <thead>, as follows:
<table border="1"> <colgroup span="2" style="background-color:#F0E68C;">    </colgroup> <thead>
5. Save the file and view it in a Web browser. The finished table should look similar to Figure 3-13. Revise your markup if necessary and resave the file. 6. Close the file, and then leave the editing tool and Web browser open if you continue to the next exercise during this session.

CREATING LISTS 

Creating lists in HTML5 is simple, especially if you’ve created them in previous HTML specifications. The rules are nearly identical, although HTML5 modified how one list item should be used and introduces some new attributes.
There are two primary types of HTML lists: • Ordered list: Orders the list entries using numbers, by default. It uses the <ol> tag. You can use the following attributes with an ordered list: a. reversed: Uses the value “reversed,” which reverses the order of the list, in descending order; this attribute is not supported in most browsers as of this writing b. start number: Specifies the start value of the ordered list c. type: Specifies the kind of marker to use at the beginning of each list item; the value “1” is the default and displays decimal numbers, the value “A” uses capital letters, the value “a” uses lowercase letters, the value  “I” uses uppercase Roman numerals, and the value “i” uses lowercase Roman numerals • Unordered list: Displays list entries in a bulleted list. It uses a <ul> tag. Items in a list are marked by <li>, which indicates an ordinary list item. Let’s look at some examples. Here is an ordered list, shown in a browser in Figure 3-14: <p>Favorite cupcakes:</p> <ol>  <li>Chocolate chip cheesecake</li>  <li>Strawberry delight</li>  <li>Italian creme</li> </ol> Here is an unordered list, and shown in a Web browser in Figure 3-15: <p>Cupcake flavors:</p> <ul>  <li>Strawberry delight</li>  <li>Chocolate chip cheesecake</li>  <li>Italian creme</li> </ul>

You can change the round bullet symbols in an unordered list by simply adding an attribute to change the nature of the bullets. For square symbols, add type="square" to the <ul> tag, and for empty circles add type="circle". You can also add the attributes to individual list items (marked by <li>) to affect individual points. For example, to display all bullet symbols as filled-in squares: <p>Cupcake flavors:</p> <ul type="square">  <li>Strawberry delight</li>  <li>Chocolate chip cheesecake</li>  <li>Italian creme</li> </ul>
The markup would appear as shown in Figure 3-16.

Another type of list is the definition list. It displays items with their definitions below the list item and indented. The <dl> tag defines the list, the <dt> tag marks each term in the item, and the <dd> tag defines each description. Here’s an example of the markup, and Figure 3-17 shows the rendered list. <dl>  <dt>Strawberry delight</dt>    <dd>Strawberry meringue buttercream with     tiny wild strawberries</dd>  <dt>Chocolate chip cheesecake</dt>    <dd>Mini chocolate chips blended with creamy     cheesecake and a chocolate brownie bottom,     topped with cream cheese frosting</dd>  <dt>Italian creme</dt>    <dd>Italian cream cake topped with cream     cheese frosting and toasted coconut</dd> </dl>

HTML5 also uses the menu element, which presents a list (or menu) of commands, usually with buttons. The W3C prefers that you use the menu element only for context menus, lists of form controls and commands, toolbars, and similar items. The HTML5 menu element is not widely supported by browsers as of this writing.

GET READY. To create an ordered list, perform the following steps: 1. Using an HTML editor or app development tool and a Web browser, enter the following: <!doctype html> <html> <body>
  <ol>    <li>Desktops</li>    <li>Laptops</li>    <li>Tablets</li>    <li>Smartphones</li>  </ol>
</body> </html> 2. Save the file as L3-OrderedList.html and view it in a Web browser. 3. To change the initial markers to capital letters, insert type="A" in the <ol> tag, like this: <ol type="A"> 4. Save the file and view it in a Web browser. Do the list items now start with A, B, C, and D? 5. To start list numbering at 5, insert start="5" in the <ol> tag. Replace the current <ol> tag with this: <ol start="5"> 6. Save the file and view it in a Web browser. Do the list items now start with 5 and end with 8? 7. Close the file, and then leave the editing tool and Web browser open if you continue to the next exercise during this session.

Developers use Web forms as the interface for collecting information from Web site and client application users. HTML input elements serve to build a form’s interface and ensure that information is collected from users consistently. Validation ensures that the entered information is in the correct format and usable before sending the data to the server.
THE BOTTOM LINE
In HTML, input and validation apply to forms. A Web form is a Web page that provides input fields for a user to enter data, which is sent to a server for processing. From there, the information is stored in a database or forwarded to a recipient. Web forms are used as the interface for many different tasks: • To log in to a Web site, server, or network • To collect contact information, such as name, email address, phone number, and mailing address • To sign up for emails or newsletters from an organization • To capture user comments after an article on a Web site • To select preferences on a Web page • To enter reservation information
Many client applications use some kind of Web form to interact with the user. You use HTML input elements to build a form’s interface and ensure that information is collected from users consistently. Validation ensures that the entered information is in the correct format and usable before sending the data to the server. For example, if you enter “637 Park Street” into a Web address field, which is expecting something like “http://www.example.com”, validation will fail and prompt the user to correct the input. Validation also reduces the amount of spam and malicious content that can make its way to the server or the recipient of the form’s data.
Understanding Input and Forms
Most Web forms, or at least many fields in most forms, require specifically formatted input. The new HTML5 form and input attributes are intuitive, easy to use, and replace a lot of scripting that was required in HTML 4.01 and previous versions.
Form input is the information a user enters into fields in a Web or client application form. (To keep things simple, we use the term “Web form” most of the time, but it applies to client application as well.) HTML5 introduces several new form and input element attributes, such as url for entering a single Web address, email for a single email address or a list of email addresses, and search to prompt users to enter text they want to search for. The new attributes make form development much easier than in the past. What used to take a lot of scripting can be accomplished by HTML5 tags. On the flip side, many of the new attributes are not yet supported by all of the major browsers. However, if you use a new element or attribute that isn’t yet supported, the browser “falls back” to an alternate display, a different form of input, or what have you. HTML5 introduces two new attributes for the form element—autocomplete and no-validate. All attributes for the form element are listed in Table 3-4, with the new attributes indicated with a double asterisk.

EXPLORING FORM CREATION, INPUT ATTRIBUTES, AND VALUES 

To create a form, use the <form> start and end tags. All of the form’s content and fields go between the two <form> tags. Most forms also include the id attribute in the start tag, as follows: <form id="keyword">  <content and fields> </form>
The field-set element is used with many forms to group related elements. The <field-set> tag draws a box around individual elements and/or around the entire form, as shown in Figure 3-18.

If the form is included in an HTML document with other items, you can use the <div> tag at the beginning and end of the form to separate it from other content. Using the <div> tag also lets you include inline formatting, if the form uses tags to align fields vertically short and simple and you don’t want to create a CSS style sheet. The <div> tag uses the id attribute and appears before the first <form> tag. The label element displays the label for each field. An example of the markup for a very simple form is: <div id="contact-form"  style="font-family:'Arial Narrow','Nimbus Sans  L',sans-serif;">   <form id="contact" method="post" action="">    <fieldset> <label for="name">Name</label> <input type="text" name="name" />    </fieldset>    <fieldset> <label for="email">Email</label> <input type="email" name="email" />    </fieldset> </form> </div> <!-- end of contact-form -->

Now let’s look at some of the new HTML5 attributes and values. Although this section doesn’t address everything listed in Tables 3-4 and 3-5, it does describe and show examples of some of the most commonly used attributes and values. The required attribute requires information in a field when the form is submitted. The email attribute (shown in the preceding example) requires the user to enter an email address. The browser will alert the user with an error message to fix these issues. An example of an input element with the required and email attributes is: <input type="email" required /> To make a form more user-friendly, add placeholder text. Placeholder text is text displayed inside an input field when the field is empty. It helps users understand the type of information they should enter or select. When you click on or tab to the input field and start typing, the newly entered text replaces the placeholder text. An example of the placeholder attribute is: <input name="fName" placeholder="First Name" /> The pattern attribute provides a format (a regular expression) for an input field, which is used to validate whatever is entered into the field. For example, let’s say you have a required input field for employee ID. Every employee ID begins with two capital letters followed by four digits. You would use a text input field with the required and pattern attributes to ensure that the field (1) is populated when the user clicks the submit button and (2) contains a value that matches the correct format for an employee ID. If the user hovers over the field, the message in the title attribute displays, which you add separately. An example of the pattern attribute is: <input type="text" id="empID" name="Employee-ID"  required pattern="[A-Z]{2}[0-9]{4}"   title="Employee ID is two capital letters followed  by four digits"> You can use the pattern attribute with these <input> types: text, search, url, telephone, email, and password.

The datalist element enables you to present the user with a drop-down list of options to select from. Only the options in the list may be selected. Alternately, you could insert type="text" into the input element to create a text box in which the user enters text. The following example lets the user select from one of three countries:
<input id="country" name="country" size="30" list="countries" />  <datalist id="countries">    <option value="United States">    <option value="Canada">    <option value="United Kingdom">  </datalist>
The search value for the type attribute enables you to create a search feature for a Web page. An example of the markup is:
<form>  <input name="search" required>  <input type="submit" value="Search"> </form>
Finally, the autofocus attribute moves the focus to a particular input field when a Web page loads. An example of autofocus is when you open a search engine Web page and the insertion point automatically appears in the input box so you can type search terms without first clicking in the box. An example of the markup to place the focus on a field named fname when a page loads is:
<input type="text" name="fname"  autofocus="autofocus" />
autofocus has historically been handled by JavaScript, and if a user turns off JavaScript in a Web browser, the autofocus feature doesn’t work. To work around this issue, the HTML5 autofocus attribute is supported by all major browsers and behaves consistently across all Web sites.

CREATE A SIMPLE WEB FORM GET READY. 
To create a simple Web form, perform the following steps: 

1. Using an HTML editor or app development tool and a Web browser, create a simple Web form with the following markup:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contact Us</title> </head> <body>  <div id="contact-form">    
  <form id="contact" method="post" action="">  <fieldset>    
  <label for="custname">Name</label>  <input type="text" id="custname" />
80 | 
  <label for="email">Email</label>  <input type="email" id="email" />
  <label for="phone">Phone</label>  <input type="text" id="phone" />
  <label for="message">Questions or     Comments</label>  <textarea name="message"></textarea>
  <input type="submit" name="submit" id="submit"     value="Submit" />
</fieldset> </form>
</div><!-- End of contact-form -->
</body> </html> 2. Save the file as L3-WebForm-orig.html. The rendered version is shown in Figure 3-20.

3. The Web form looks unstructured. Ideally, you would use CSS to apply alignment, but because you haven’t learned CSS yet, you can apply a workaround to make the fields align vertically. One method is to add <fieldset> start and end tags around each label/input pair. This would align the fields vertically and add boxes around them. Using opening and closing <p> tags instead of <fieldset> tags would accomplish the same thing but without adding boxes. For this exercise, use the <p> tags. Figure 3-21 shows the same Web form with <p> tags around the label/input pairs, including the comments field.
4. Add placeholder text to all fields. The result should look similar to Figure 3-22, if viewed in the Mozilla Firefox Web browser. 
 5. Save the file as L3-WebForm-placeholders.html. 6. Leave the file and editing tool open if you continue to the next exercise during this session.

HTML5 provides new attributes that validate Web form fields as users are entering data or when they click the submit button. The attributes include required, email, and pattern, among others. 
82 | 
Validation is the process of verifying that information entered or captured in a form is in the correct format and usable before sending the data to the server. Some things that are verified during validation are: • Required fields are empty • Email addresses are valid • Dates are valid • Text does not appear in a numeric field or vice versa
Using HTML 4.01 and previous specifications, you often needed to use a lot of JavaScript or scripting in another language to create custom validity rules and response messages, or to determine if an element is invalid. In HTML5, several of the input element types you learned about in the last section offer automatic validation of input, which means the browser checks the data the user inputs. This is referred to as client-side validation, because the input data is validated before submission to the server. (In cases in which the server validates data received from an input form, it’s referred to as server-side validation.) If the user enters the wrong type of data into a field, such as an email address in a field with the url attribute, the browser instructs the user to enter a valid URL. Let’s look at examples of the default error messages that are generated during automatic validation. The required attribute avoids the problem of empty fields that need to be populated. When a user skips a required field and clicks the submit button, an error message appears as shown in Figure 3-23. This example uses the Mozilla Firefox Web browser.
HTML5 also offers validation of Web addresses entered into fields with the <input type="url"> construct, and numbers entered into fields with the <input type="number"> construct. If you use the min and max attributes with type="number", you will receive an error message from the browser if you enter a number that’s too small or too large. Finally, the pattern attribute prevents the user from entering data that doesn’t follow the pattern expression. In this example, the pattern attribute validates a five-digit zip code: <input type= "text" name= "zipcode"   pattern= "[0-9] {5}"   title= "Five-digit zip code" /> Incorrectly entering data in the Zip Code field in the Firefox browser results in the error message shown in Figure 3-24.
As mentioned previously, no markup is required to activate HTML5 form validation—it’s on by default. To turn it off, use the novalidate attribute for specific input fields.

ADD VALIDATION FIELDS TO A WEB FORM GET READY. To add validation fields to a Web form, perform the following steps: 1. Using an HTML editor or app development tool, open L3-WebForm-placeholders.html. 2. Save the file as L3-WebForm-valid.html. 3. Add the required attribute to the email field, as follows: <p>  <label for="email">Email</label>  < input type="email" name="email" required placeholder="Email address">  </p> 4. Add the pattern attribute to the phone field. The expression should restrict entry to area code and phone number, in the format XXX-XXX-XXXX, as follows:
  <p>  <label for="phone">Phone</label>  < input type="text" name="phone" pattern="[0-9]{3}[0-9]{3}-[0-9]{4}" placeholder="Phone number">  </p> 5. Save the file, and then view it in a Web browser. Type text in each input field except the email field and click the Submit button. Did you receive an error message prompting you to enter an email address? 6. Type text in each field again including the email field, but this time type a phone number without the area code and then click Submit. Did you receive an error regarding the phone number field? 7. Close the file, the editing tool or app development tool, and the Web browser.




Comments

Popular posts from this blog

What if Analysis

What-If Analysis What-If Analysis in Excel allows you to try out different values (scenarios) for formulas. The following example helps you master what-if analysis quickly and easily.  Use scenarios to consider many different variables  A scenario is a set of values that Excel saves and can substitute automatically in cells on a worksheet. You can create and save different groups of values on a worksheet and then switch to any of these new scenarios to view different results. 
Create Different Scenarios 
Note: You can simply type in a different revenue and Cost into cell B2 and B3 respectively to see the corresponding result of a scenario in cell B4. However, what-if analysis enables you to easily compare the results of different scenarios.  
I. On the Data tab, click What-If Analysis and select Scenario Manager from the list. The Scenario Manager Dialog box appears  II. Add a scenario by clicking on Add.  III. Type a name (e.g. “First Case”), select cell B2 and B3 (represents “Revenue” and “…

PROFESSIONAL ENGLISH

Asking For and Giving Opinions on Likes and Dislikes

Words Meaning Sample Sentence Opinion A statement or judgment formed about some matter. Bhoomika gave her final opinion on the company’s matter. Dialogue A conversation between two or more people. Her dialogue stated her opinion about the company’s matter. Expression The action of making known one’s thought or feelings. Her expression was sad at the meeting. Frank An open, honest, and direct speech or writing Bhoomika is very frank with her friends. Recover Return to normal state of health, mind or strength. The company’s economic crisis will be recovered soon. Turmoil A state of great disturbance. The company is facing financial turmoil. Economics The branch of knowledge concerned with the production, consumption, and transfer of wealth. Bhoomika studied Economics at the State University. Betrayed Expose to danger by treacherously giving information to an enemy.

DAILY LIFE VOCABULARY

Apology Etiquette and Office Vocabulary 

Chapter Vocabulary

Word Meaning Sample Sentence Stressed A state of any mental or emotional tension. Ram seems much stressed after his poor exam. Launch An act of instance of starting something. The government launched a new scheme for the poor people. Error A mistake Ravi found a grammatical error in his new grammar book. Scold Blaming someone for any wrong doing Bhuvan scolded his employees for their poor performance. Accuse Claiming that someone has done something wrong. Bharati accuses her friend Chaya for stealing her necklace. Fair Good and honest Ravi got promoted for doing a fair job. Ashamed Embarrassed or guilty because of one’s action. <