Webresource development with HTML5 features}–How to show default text in controls on your HTML webresources

Wanted to share this really cool stuff with fellow Dynamics CRM consultants who might not be aware of this html5 feature.

 

We had a webresource and where we had multiple input controls. Our client wanted that these input controls should show some default text to make the user understand the type of input the application is expecting in the input control.

For e.g – suppose we have a text box for email. We can show some default text like ‘some@example.com’ to highlight the format of the input to the end user. Typically in UI, it should render something like below.

If you try to implement this custom you would need to do the following things.

• Create a common library to show the suggestive text
• When the user starts to type in, the default text should go away
• The default text should not be considered during mandatory field validation
• If the user deleted the text, the default text should re-appear
• Last but not the least, separate CSS styles for the default text and text entered by the user.

 

What if I say that you do not need to do all this if HTML5. All you need to do is set the value of a new attribute in HTML5 called placeholder. The code for the above screenshot would be the one below.

<input type="email" name="email" placeholder="someone@example.com">
<input type="text" name="first_name" placeholder="First name">

The good thing is that the browser controls everything for you. If you are wondering what is input type = ‘email’ in the HTML above, well that is another new stuff in HTML5. To know more about that, you can refer to my following blog post.

https://debajmecrm.com/webresource-development-part-i-using-new-html5-features-in-html-webresources-in-dynamics-crm/

So next time somebody asks you to develop a webresource, show off some your HTML5 skills as well

 

Hope this helps!