<form novalidate class="narrow">
  <h2 class="h3">Search</h2>
  					
  <input type="search" 
    id="search-text" 
    class="form-control" 
    placeholder="search" 
    autofocus />
	
</form>	

<form class="narrow">
  <h2 class="h3">Contact Info</h2>
  					
  <input type="text"
    id="name-text"
    placeholder="first and last name"
    required
    pattern="(.*)\s(.*)"
    class="form-control">
			
  <input type="email" 
    id="email-text"
    placeholder="email address"
    required
    class="form-control">
			
  <input type="tel" 
    id="phone-text"
    placeholder="phone number"
    required
    class="form-control">
			
  <input type="url" 
    id="phone-text"
    placeholder="web address"
    class="form-control">
		
  <h2 class="h3">Perferences</h2>
  
  <input type="number" 
    id="bedrooms-text"
    placeholder="# of bedrooms"
    min="1"
    max="6"
    class="form-control">
	
  <h3 class="h4">Days Until Available to Move</h3>
  <div>
    <div class="col-sm-6">
      <input type="range" 
        id="move-range" 
        min="0" max="120" 
        step="10" value="30">
    </div>
    <div class="col-sm-4">
      <span id="move-value">30</span>
    </div>
  </div>	   
	
	
  <input type="text" 
    id="direction-list"  
    list="direction-data"
    placeholder="directional preference"
    class="form-control">
			
  <datalist id="direction-data">
    <option value="North"></option>
    <option value="South"></option>
    <option value="East"></option>
    <option value="West"></option>
  </datalist>
	
  <input type="color" 
    id="main-color"
    value="#ffffff"
    class="form-control push-down-top">
	
  <h2 class="h3">Available Date</h2>
			
  <input type="month"
    class="form-control"
    value="2016-06" />
			
  <input type="week"
    class="form-control"
    value="2016-W26" />
		   
  <input type="datetime-local"
    class="form-control"
    value="2016-06-26T09:30:00" />
	
  <div class="push-down-top">
    <button class="btn btn-link">Cancel</button>
    <input type="submit" class="btn btn-default" value="Save" />
  </div>
  
</form>

input:required {
  border-left: 4px solid #c33;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #c33;
  border-color: #c33;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #c33;
  -webkit-box-shadow: 0 0 6px #fcc;
     -moz-box-shadow: 0 0 6px #fcc;
          box-shadow: 0 0 6px #fcc;
}

var moveValue = document.getElementById('move-value');
				
document.getElementById('move-range').addEventListener('change', function() {
	moveValue.innerText = this.value;
}, false);