Starting with HTML5 Forms

By
HTML5 forms add a lot of power to html forms which result in reduced development time. And HTML5 are improved for developer as well as users using them.


HTML5 specification added lots of feature in forms but all browsers are at different states. Check www.html5test.com for current support to HTML5 form elements.

Below is the list of newly added input type in HTML5. 



Input Type Purpose
tel For entering a telephone number.
search To prompt users to enter text that they want to search for.
url For entering a single URL.
email For entering either a single email address or a list of email addresses.
datetime For entering a date and time with the time zone set to UTC.
date For entering a date with no time zone.
month For entering a date with a year and a month, but no time zone.
week For entering a date that consists of a week-year number and a week number, but no time zone.
time For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone.
datetime-local For entering a date and time with no time zone.
number For numerical input.
range For numerical input, but unlike number, the actual is not important.
color For choosing color through a color well control.


Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. And from below example it is very clear that new input elements saves a lot of javascript validation code. Code for example form is provided below.











<form oninput='fullName.value = "Mr. " + firstName.value + " " + lastName.value' onsubmit="return alter('Saved')";>
<output id="fullName" name="fullName"></output><br/>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name" required="required" autofocus="autofocus"/><br/>  
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name" required="required"/><br/>
<input type="email" id="email" name="email" placeholder="example@demo.com" required="required"/><br/>
<input type="email" id="emailConfirm" name="emailConfirm" placeholder="Confirm Email Address" required="required" oninput="verifyEmail(this)"/><br/>
<input type="tel" id="telNo" name="telNo" placeholder="Enter Your Phonenumber"/><br/>
<input type="url" id="webAddress" name="webAddress" placeholder="Enter Your Website"/><br/>
<input type="number" id="age" name="age" min="18" max="100" required="required" placeholder="Enter Your Age"/><br/>
<input type="submit" value="Save Info" /> <br/>
</form>
<script>
function verifyEmail(input) {
  if (input.value != document.getElementById('email').value) {
    input.setCustomValidity('The two email addresses must match.');
  } else {
    // input is valid -- reset the error message
    input.setCustomValidity('');
  }
}
</script>

Comments

  1. Anna SchaferNovember 14, 2015 at 10:25 PM

    Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. responsive web development

    ReplyDelete

Post a Comment

Popular posts from this blog

SSIS Package : Export Data from Database, Daily to New Excel Without Using Script Task

By
Image
Export data from database to excel sheet with new excel per day SSIS => SQL Server Integration Services, is used for ETL (Extract, Transform and Load) type of work. It is advanced version of DTS we can say. Here we can schedule packages as jobs and it will execute without human intervention. In this article we will export the data from SQL database table to excel sheet day wise. To start with this you will need to install SQL Server 2008 with BIDS (Business Intelligence Development Studio) Now moving forward the first step would be go to File => New Project => Select “Business Intelligence Projects” from left panel and “Integration Service Project” from right panel. Give proper name and save at desired location. On OK click, it will open Package.dtsx. Create a Template folder somewhere on your hard drive. In that folder create a sample excel with just the headers that you want in the final excel. We will use this template to create new excel every day
Read more

Spring Data Reactive MongoDb :: Date Aggeration with Timezone

By
A short example on how to aggravate by date with a different timezone using Spring Data Reactive Mongodb. Code Snippet on github public Flux getHourlyReport() { DateOperators.Timezone timezone = DateOperators.Timezone.valueOf("America/New_York"); Aggregation aggregation = Aggregation.newAggregation(Aggregation.project() .and(DateOperators.Hour.hour("$tweet.createdAt") .withTimezone(timezone)) .as("hour") , Aggregation.group("hour").count().as("sum")); Flux data = this.mongoTemplate.aggregate(aggregation, "realTweets", Map.class); return data; }
Read more

Getting Started With ForkJoinPool - Map & Reduce of Java

By
CodeProject ForkJoinPool - Java's Map & Reduce ForkJoinPool ::FJP is a executor service for Fork-Join Taks or tasks which can computed using divide and conqor or we can say FJP is inbuild Map & Reduce framework in Java.                FJP implements work-steal so all threads try to find and execute task submitted by other tasks in FJP or external program. FJP try to maintain active threads as per number of processor available.   FJP provides below methods to submit task ::==> Call Type External Task Clients i.e. main method Inner Task Divide and Conquer Calls Call from non-fork/join clients  Call from within fork/join computations Arrange async execution  execute(ForkJoinTask)  ForkJoinTask.fork() Await and obtain result  invoke(ForkJoinTask)  ForkJoinTask.invoke() Arrange exec and obtain Future  submit(ForkJoinTask)  ForkJoinTask.fork() (ForkJoinTasks are Futures)
Read more