chapter: Form Components
  ==================
  <form action=<send.php> action="get">
  
  </form>
      
      
  ====================================
  <form action=<send.php> action="get" data-transition="pop">
  
  </form>
      
      
  ====================================
  <label for="company">Company Name:</label>
  <input type="text" id="company">
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="company">Company Name:</label>
  <input type="text" id="company" name="company">
  </div>
  <div data-role="fieldcontainer">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search">
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="comments">Your comments:</label>
  <textarea id="comments" name="comments></textarea>
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="name">Your Name:</label>
  <input type="text" id="name" required placeholder="Enter your name">
  </div>
  
  <div data-role="fieldcontainer">
  <label for="age">Your Age:</label>
  <input type="number" id="age" required placeholder="Enter your age" min="10" 
  max="110">
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="birth">Your Birthdate:</label>
  <input type="date" id="birth" name="birth">
  
  <label for="favmonth">Your favorite month:</label>
  <input type="month" id="favmonth" name="favmonth">
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="qty">Quantity:</label>
  <input type="range" id="qty" name="qty" min="1" max="100" value="5">
  </div>
      
      
  ====================================
  <div data-role="fieldcontainer">
  <label for="qty">Quantity:</label>
  <input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e" 
  data-track-theme="b">
  </div>
      
      
  ====================================
    <label for="updated">Receive updates</label>
  <select id="updated" name="updated" data-role="slider">
  <option value="no">No</option>
  <option value="yes">Yes</option>
  </select>
      
      
  ====================================
    <label for="training">Training</label>
  <select id="training" name="training">
  <option value="1">HTML5</option>
  <option value="2">jQuery Mobile</option>
  <option value="3">iOS</option>
  <option value="4">Android</option>
  <option value="5">BlackBerry</option>
  <option value="6">Qt for Meego</option>
  </select>
      
      
  ====================================
    <label for="lang">Languages you like</label>
  <select id="lang" name="lang" multiple>
  <option value="1">C/C++</option>
  <option value="2">Objective-C</option>
  <option value="3">Java</option>
  <option value="4">C#</option>
  <option value="5">Visual Basic</option>
  <option value="6">ActionScript</option>
  <option value="7">Delphi</option>
  <option value="8">Phyton</option>
  <option value="9">JavaScript</option>
  <option value="10">Ruby</option>
  <option value="11">PHP</option>
  </select>
      
      
  ====================================
  <div data-role="controlgroup">
  <legend>Color and Size</legend>
  <select id="color" name="color">
  <option value="1">Blue</option>
  <option value="2">White</option>
  <option value="3">Red</option>
  <option value="4">Black</option>
  <option value="5">Pink</option>
  </select>
  <select id="size" name="size">
  <option value="1">X-Small</option>
  <option value="2">Small</option>
  <option value="3">Medium</option>
  <option value="4">Large</option>
  <option value="5">X-Large</option>
  </select>
  </div>
  
  <div data-role="controlgroup" data-type="horizontal">
  <legend>Week day and time</legend>
  <select id="weekday" name="weekday" multiple>
  <option value="1">Mon</option>
  <option value="2">Tue</option>
  <option value="3">Wed</option>
  <option value="4">Thu</option>
  <option value="5">Fri</option>
  </select>
  <select id="time" name="time">
  <option value="1">Morning</option>
  <option value="2">Midday</option>
  <option value="3">Afternoon</option>
  </select>
      
      
  ====================================
  <div data-role="controlgroup" data-type="horizontal">
  <legend>Delivery options</legend>
  
  <label for="weekday">Week day</label>
  <select id="weekday" name="weekday" multiple>
  <option value="1">Mon</option>
  <option value="2">Tue</option>
  <option value="3">Wed</option>
  <option value="4">Thu</option>
  <option value="5">Fri</option>
  </select>
  <label for="time">Time</label>
  <select id="time" name="time">
  <option value="1">Morning</option>
  <option value="2">Midday</option>
  <option value="3">Afternoon</option>
  </select>
  </div>
      
      
  ====================================
    <label for="training">Training</label>
  <select id="training" name="training" data-native-menu="false">
  <option value="1">HTML5</option>
  <option value="2">jQuery Mobile</option>
  <option value="3">iOS</option>
  <option value="4">Android</option>
  <option value="5">BlackBerry</option>
  <option value="6">Qt for Meego</option>
  </select>
      
      
  ====================================
    <label for="training">Training</label>
  <select id="training" name="training" data-native-menu="false" data-overlay-theme="e">
  <option value="0" data-placeholder="true">Select your training</option>
  <option value="1">HTML5</option>
  <option value="2">jQuery Mobile</option>
  <option value="3">iOS</option>
  <option value="4">Android</option>
  <option value="5">BlackBerry</option>
  <option value="6">Qt for Meego</option>
  </select>
      
      
  ====================================
  <legend>Menu type</legend>
  
  <label for="menuNative1">Native menu, single selection</label>
  <input type="radio" id="menuNative1" name="menuType" value="1">
  
  <label for="menuNative2">Native menu, multiple selection</label>
  <input type="radio" id="menuNative2" name="menuType" value="2">
  
  <label for="menuNonNative1">Non-native menu, single selection</label>
  <input type="radio" id="menuNonNative1" name="menuType" value="3">
  
  <label for="menuNonNative2">Non-native menu, multiple selection</label>
  <input type="radio" id="menuNonNative2" name="menuType" value="4">
      
      
  ====================================
  <div data-role="controlgroup">
  <-- label and radio elements go here -->
  </div>
      
      
  ====================================
  <legend>Delivery method</legend>
  
  <div data-role="controlgroup" data-type="horizontal">
  
  <label for="deliveryUPS">UPS</label>
  <input type="radio" id="deliveryUPS" name="delivery" value="ups">
  
  <label for="deliveryDHL">DHL</label>
  <input type="radio" id="deliveryDHL" name="delivery" value="dhl">
  
  <label for="deliveryFedex">FedEx</label>
  <input type="radio" id="deliveryFedex" name="delivery" value="fedex">
  
  </div>
      
      
  ====================================
    <label for="accept">I accept terms and conditions</label>
  <input type="checkbox" id="accept" name="accept" value="yes">
      
      
  ====================================
  <legend>Delivery options</legend>
  
  <div data-role="controlgroup">
  
  <label for="optionGift">Pack it as a Gift</label>
  <input type="checkbox" id="optionGift" name="optionGift" value="yes">
  
  <label for="optionBag">Send it with a bag</label>
  <input type="checkbox" id="optionBag" name="optionBag" value="yes">
  
  <label for="optionRemove">Remove the box</label>
  <input type="checkbox" id="optionRemove" name="optionRemove" value="yes">
  
  </div>
      
      
  ====================================
  <div data-role="controlgroup" data-type="horizontal">
  
  <label for="bold">B</label>
  <input type="checkbox" id="bold" name="bold" value="yes">
  
  <label for="italic">I</label>
  <input type="checkbox" id="italic" name="italic" value="yes">
  
  <label for="underline">U</label>
  <input type="checkbox" id="underline" name="underline" value="yes">
  
  </div>
      
      
  ==================