HTML5 forms example

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src=""></script>
  label em {
    color: red;
  } {
    border: 1px solid red;
  var validation ={
    checkEmail: function(){
       if($('#email').val() === $('#emailrepeat').val()){return true;} else{return false;}
    returnPrice: function(){
    //base price is 90$ for a room, 20$ per extra guest
      return (90 + ($('#persons').val() * 20)) * $('#nights').val();
    isValid: function(){
        $("#run-script").append("new price is " + this.returnPrice() + "US<br />");} else {
        alert("email is wrong");}
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please      <a href="">upgrade your browser</a> or <a  href="">activate Google Chrome Frame</a> to improve your experience.</p>
<!-- Add your site or application content here -->
<form action="#run-script" id="run-script">
  <legend>Book Hotel Room</legend>
      <dt><label for="forename">Firstname:<span class="required"><em>*</em>                   
      <input type ="text" id="forename" name="forename" value="" placeholder="Enter Firstname" 
      required="required" autofocus="autofocus" /></dd>

      <dt><label for="surname">Lastname:<span class="required"
      <dd><input type ="text" id="surname" name="surname" value="" placeholder="Enter 
      Surname" required="required" /></dd>

      <dt><label for="email">Email Adress: <span class="required">
      <dd><input type="email" name="email" id="email" placeholder="" 
      required class="required" /></dd>

      <dt><label for="emailrepeat">Email Repeat: <span class="required"
      <dd><input type="email" name="emailrepeat" id="emailrepeat" 
      placeholder="" required class="required" /></dd>

      <dt><label for="date">Enter Date: <span class="required"
      <dd><input type="date" name="date" required class="required" /></dd>

      <dt><label for="nights">How many nights: 
      <span class="required"><em>*</em></span></label></dt>
      <dd><input type="number" name="nights" id="nights" min="1" max="5" value="1" /></dd>

      <dt><label for="persons">How many guests: 
      <span class="required"><em>*</em></span></label></dt>
      <dd><input type="number" name="persons" id="persons" min="1" max="3" value="1" /></dd>

      <input type="submit" value="Check Price">
           $("#run-script").submit(function(e) {

One thought on “HTML5 forms example

  1. You really make it seem so easy along with your presentation however I to find this topic to be actually one thing that I believe I might by no means understand. It kind of feels too complicated and very broad for me. I am looking forward on your subsequent put up, I’ll attempt to get the hang of it!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s