Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

January 8, 2015

HTML - Pattern Matching

From HTML5, a pattern attribute has been introduced which allows validation of an input field using regular expression. The validation is carried out by the browser and no javascript is required. This is great news for developers as sometimes javascript validation becomes a tedious and repetitive task.

In this post, I will show how to use patterns in html forms with examples and then list a few common regular expression. Note that, in the example, I have not included a regular expression for email address. It's actually not required to validate email using regular expression and instead we can directly use the input type as email.

April 29, 2014

Data attributes are a cool way to store extra data for html elements. Previously, when we needed to store additional data for an html element we would store it hidden elements whereas now with data attributes, we can store it within the html element itself as shown below.

  1. <li data-test="test">data</li>


Since data attributes are standard html attributes, we can use it within as well. Here's an example on how we can load country / capital data within a ListView control, store the capital information as data attribute and then display the capital when the user hovers over the country using jQuery.

April 10, 2014

HTML5 Data Attributes and Javascript

We have an html page or an page with html elements and I want to store some data for the html elements on the client side. Prior to html5, we might be storing the data using hidden fields or query string but it's not really a clean approach and would require some javascript and matching the element and hidden field ids before it works.

To support the above use case html elements now has a new attribute "data-" and we can specify any name after the "data-". For example, we can have a data attribute like below.

March 11, 2014

Display raw XML in html page

I was working on a page where I had to display raw XML to an page and surprisingly it turned out to be quite challenging. Seriously, how hard can it be. I remember displaying xml by encoding it but that's not really an option in my scenario.

XML control – did not work

I tried using the XML control but it did not work. The control renders xml without displaying the raw xml. I could see the xml displayed in the source code of the browser but it would not appear in the browser.

Label & Literal control – did not work

Then I tried using the Label and Literal control but it did not display any content from the xml. The xml appeared in the source code but the browser could not interpret it. However, the controls can display xml once the xml is encoded.

<Pre> , <code>html elements – did not work

Then I tried using the <pre> and <code> elements but there was no improvement. The browser still would not display the xml. The <pre> tag basically can display xml once it is encoded.

TextArea element – finally it worked

Finally, I used the textarea element and it worked.  The problem with textarea is that it is editable and it has other display features like border and resize options. Fortunately, these properties can be modified using css. So, here is the code to display xml in a textarea. I have used dummy xml for the snippet.

  1. <!DOCTYPE html>
  3. <html xmlns="">
  4. <head runat="server">
  5.     <title></title>
  6.     <style>
  7.         .tbox { width:80%; height:80px; border:0; overflow:visible; resize:none; outline:none; }
  8.     </style>
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.     <div>
  13.         <asp:TextBox ID="t1" runat="server" ReadOnly="true" CssClass="tbox" TextMode="MultiLine"></asp:TextBox>
  14.     </div>
  15.     </form>
  16. </body>
  17. </html>


And here is the back end code to get the xml.

Back end
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     DisplayXml();
  4. }
  6. private void DisplayXml()
  7. {
  8.     string xml = "<data><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test></data>";
  9.     t1.Text = xml;                   
  10. }


Now run the page and it should just work. With the height and width of the text area, set to something that is reasonable in your application.

January 8, 2014

html import–a reality

Few days back I was reading an article on about html imports and I was delighted even it's experimental at this stage. Html import did not exist and was always an import feature to me for web development. I remember creating asp pages for small sites when html would have easily suffice. I needed to add header / footer and using asp for just that did not make any sense to me. Html had ways for importing javascript and css and I was always wondered about html imports. I also used iframes and frames instead but never really liked the way frames work.

So, how does html import work? Well, it does not work in most browsers. In fact, it only works in Chrome 31+ when "html imports" is turned on. It is important to note that it is a standard mentioned in W3C so the feature might become common in other browsers. So, how do I write the import code snippet. Here's how.

  1. <link rel="import" id="id1" href="page2.html" />


As you can see, it's similar to css import except the rel attribute value is now import. So, as a next step, I ran the page in the Chrome browser and it does not do anything. Oh, I need to turn on the html import feature first. To do so, I went to chrome://flags/#enable-html-imports and clicked on enabled and fingers crossed.


But no luck, nothing happened. I could see a flicker that the document is loaded while running the browser but it does not appear in the display. After more readings, I figured html import only the import the file. To display the content or a portion of the content from the file, we need to use javascript. Here's the javascript and the full page.

  1. <!DOCTYPE html>
  2. <html><!-- xmlns="">-->
  3. <head>
  4.         <title></title>
  5.     <link rel="import" id="id1" href="page2.html" />
  6. </head>
  7. <body>
  8.       <div id="page1div"></div>
  10. <script>
  11.      var content = document.querySelector('link[rel="import"]').import;
  12.      var el = content.querySelector('#page2div'); //id of div whose content will be displayed
  13.      document.getElementById("page1div").appendChild(el.cloneNode(true));
  14.    </script>
  15. </body>
  16. </html>


  1. <div id="main">main content
  2. <div id="page2div">page 2 content</div>
  3. </div>


The javascript uses the .import selector to get the content from the html document. I then select the div from imported html document whose content will be displayed and clone the node. Then, I run the page and that's it. It works now.

December 12, 2013

There is not a lot of differences between window's onload and body onload events except that window's onload event fires at start whereas body's onload event fires once all content is downloaded. So, in case, we need to find an element and update style or content, etc to it, then, body onload is the way to go. Whereas if it does not matter - then we can use either window's onload or body onload event. Below is an example html source code to check when each of the events is fired.

November 27, 2012

Should I use Cookies or Web Storage?

Cookies and Web Storage serve similar purpose in some and different purpose in many ways. Both cookies and web storage stores data on the client but cookies are sent back to the server on every request. So, if the data is needed to be used only by the client - then, its better to use web storage. However, if the data needs to be used by the server then cookies is the way. For example, for sessions, cookies is the definitely needed. Cookies, like web storage, can be accessed fom client side as well using javascript.

One more thing to note is that not all browsers support web storage yet - for example, Internet explorer 7-, Firefox 3.5- and Chrome 4- does no not support web storage. So, web storage may not be a solution on all situations.

Also, web storage can have maximum storage of 5MB whereas cookies have a maximum storage of 4KB.

Cookies can also have an expiration date - that is, it expires after some time period. On the other hand, web storage is of 2 types - local and session. Session storage is really like local storage except that it expires when the session ends.
Reference: Shahed Kazi at