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]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Booking</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <style>
  label em {
    color: red;
  }
  input.red {
    border: 1px solid red;
  }
  </style>
  <script>
  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(){
       if(this.checkEmail()){
        $("#run-script").append("new price is " + this.returnPrice() + "US<br />");} else {
        alert("email is wrong");}
      }
    }
   </script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please      <a href="http://browsehappy.com/">upgrade your browser</a> or <a  href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<form action="#run-script" id="run-script">
  <fieldset>
  <legend>Book Hotel Room</legend>
  <dl>
      <dt><label for="forename">Firstname:<span class="required"><em>*</em>                   
      </span></label></dt><dd>
      <input type ="text" id="forename" name="forename" value="" placeholder="Enter Firstname" 
      required="required" autofocus="autofocus" /></dd>

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

      <dt><label for="email">Email Adress: <span class="required">
      <em>*</em></span></label></dt>
      <dd><input type="email" name="email" id="email" placeholder="email@domain.com" 
      required class="required" /></dd>

      <dt><label for="emailrepeat">Email Repeat: <span class="required"
      ><em>*</em></span></label></dt>
      <dd><input type="email" name="emailrepeat" id="emailrepeat" 
      placeholder="email@domain.com" required class="required" /></dd>

      <dt><label for="date">Enter Date: <span class="required"
      ><em>*</em></span></label></dt>
      <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">
      <script>
           $("#run-script").submit(function(e) {
           validation.isValid();
           e.preventDefault();
       });
      </script>
    </dl>
  </fieldset>
</form>
</body>
</html>

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!

    Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s