HTML5 Form Fields

-
In this post I'm going to write about HTML5 form fields. HTML5 has introduced a lot of input controls, which would otherwise been very tedious to code using javascript.
Note that if the browser does not support any of these controls, it would just render a plain text field.

1. Color Picker:
<input type="color"/>


2. Range slider
This input type displays a slider within min and max range of values.
<input type="range" min="10" max="80"/>

3. Date 
<input type="date"/>
4. Email
<input type="email"/>
5. URL 
<input type="url"/>

6. Datalist 
<input type="text" list="states"/>
 <datalist id="states"> 
        <option value="CA"> 
        <option value="TX"> 
        <option value="FL"> 
</datalist>
The datalist input type provides a suggestion list drop down while entering data in the text field.
7. Search 
<input type="search"/>
The search input type would provide a google search kind of look and feel with cross button.

Comments

Post a Comment

Popular posts from this blog

Pivotal Cloud Foundry (PCF) Integration with Elastic Cloud Storage (ECS)

-
Recently, I was involved in integrating Pivotal Cloud Foundry with Elastic Cloud Storage (ECS), an object storage solution from EMC. In this post, I'm going to document the hiccups we faced during this integration and how did we resolve this, so that it is easier for other folks who would like to carry out this integration. References: We followed the blog post, https://blog.codedellemc.com/2016/01/05/emc-ecs-with-cloud-foundry/ and the service broker code from git hub, https://github.com/spiegela/ecs-cf-service-broker .  1. application.yml file Configuration: First task would be to update the application.yml file in the broker code to have the correct configuration. Note the spring profiles created in yml file. The active spring profile is defined in the build.gradle file to be 'development'. So based on that, we need to update the correct section in the yml file. Under the broker section: a) Provide a valid ECS namespace name (The namespa
Read more

Restful code example using Spring MVC

-
In my previous blog, I talked about Restful webservices design. In this blog, I will provide sample code for the same using Spring MVC framework. Spring MVC 3.x supports annotation based controllers, which are Restful in nature.  Let us create a sample Spring web application for performing CRUD on User entity. Creating project: Create a Maven project with a archetype 'maven-archetype-webapp'. pom.xml <!-- version property --> <properties> <spring.version>3.1.2.RELEASE</spring.version> </properties> <!-- servlet dependency for compilation --> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <type>jar</type> <scope>compile</scope> </dependency> <!-- Spring MVC dependencies --> <dependency> <groupId>org.springframework</groupId> <artifactId&
Read more

Spring Integration - Bulk processing Example

-
Image
In this post, I'm going to share my experience in using Spring Integration for a bulk processing task. This was the first time I was using Spring Integration and it did not disappoint me. It was pretty robust in terms of error handling and definitely scalable. Disclaimer: The actual task being performed has been modified into a fictitious e – commerce domain task, since I cannot reveal the original task which is customer specific and confidential. However, the nature of the task in terms of processing of clob and xml remain the same and the complexity of the original task has been retained. Also, the views posted on this post are strictly personal. Objective: The objective is to work upon customer information from an ecommerce application and process it and save it into database as clob data. The task is to perform data processing by reading xml from a file in the file system and then store it as clob into a table. Following is the high level of tasks required t
Read more