add.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="./css/site.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> 
<title>WineMemo - Remember the wine</title>
<script src="./js/mobiscroll-1.5.3.js" type="text/javascript"></script>
<script src="js/phonegap-1.3.0.js" type="text/javascript"></script>

</head>

<body class="ui-mobile-viewport">

<div id="addPage" data-role="page" class="homeBody ui-page ui-page-active">
	<div id="header-home" data-role="header" data-position="inline">
	<a href="index.html" data-icon="back" data-direction="reverse">Back</a>
    <h1>Add a wine to your catalog</h1>
    <a href="#" onclick="saveWine();" data-icon="plus">Add</a>
</div>
    
		<div id="OTHomeLogo" class="mainContentPanel">
        <img src="images/header-logo.png" class="homeLogo">
        </div>
	
    <div id="formAdd">
    	<form method="post">
        	<div data-role="fieldcontain">
  			  <label for="name" class="labelForm">Name:</label>
   			 <input type="text" name="name" id="ti_Name" value="" />
			</div>	
        
        	<div data-role="fieldcontain">
  			  <label for="year" class="labelForm">Year:</label>
   			 <input type="year" min="1945" max="2020"   name="year" id="ti_Year" value="" />
			</div>	
       
        	<div data-role="fieldcontain">
  			  <label for="region" class="labelForm">Region:</label>
   			 <select name="select-choice-1" id="ti_Region">
     			<option value="Alsace">Alsace</option>
      			<option value="Bordeaux">Bordeaux</option>
      			<option value="Burgundy">Burgundy</option>
      			<option value="Beaujolais">Beaujolais</option>
                <option value="Champagne">Champagne</option>
                 <option value="Rhone">Côtes du Rhone</option>
                 <option value="Jura">Jura</option>
                  <option value="Lanquedoc">Lanquedoc</option>
                   <option value="Medoc">Medoc</option>
                    <option value="Others">Others</option>
  			 </select>
			</div>	
            
            <div data-role="fieldcontain" data-theme="a">
    <fieldset data-role="controlgroup" data-theme="a">
    		<legend  class="labelForm">Color:</legend>
         	<input type="radio" name="color_choice" data-theme="a" data- id="radio-choice-1" value="Red"  />
         	<label for="radio-choice-1" class="radioBtn">Red</label>

         	<input type="radio"  name="color_choice" data-theme="a" value="White" id="radio-choice-2"   />
         	<label for="radio-choice-2" class="radioBtn">White</label>

         	<input type="radio" name="color_choice" data-theme="a" value="Pink" id="radio-choice-3"   />
         	<label for="radio-choice-3" class="radioBtn">Pink</label>

         	<input type="radio" name="color_choice" data-theme="a" value="Champagne" id="radio-choice-4"   />
         	<label for="radio-choice-4" class="radioBtn">Sparkling</label>
    </fieldset>
</div>
<div data-role="fieldcontain" data-theme="b">
   <label for="slider" class="labelForm" data-theme="b">Rate:</label>
   <input type="range" name="slider" id="ti_Rate" value="5" min="0" max="10" data-track-theme="b" data-theme="e"  />
</div>
<div data-role="fieldcontain">
<label for="comments">Comments:</label>
	<textarea name="comments" id="ti_comments" ></textarea>
</div>
<div data-role="fieldcontain">
	<a href="#" onclick="takePicture();" data-role="button">Take a picture</a>
    <img width="300" id="winePicture"/>
    <input type="hidden" name="hidden_src_image" id="hidden_src"/>
 </div>
        </form>
    </div>
   
</div>

</body>
</html>