Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>New input types</title>
</head>
<body>
  <form>
    <label for="telephone">Telephone:</label>
    <input type="tel" pattern="[0-9]{10}" name="telephone" id="telephone">
  
    <label for="website">Website:</label>
    <input type="url" name="website" id="website">
  
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
  
    <label for="date">Date:</label>
    <input type="date" name="date" id="date">
  
    <label for="time">Time:</label>
    <input type="time" name="time" id="time">
  
    <label for="number">Number:</label>
    <input type="number" name="number" id="number">
    
    <label for="range">Range:</label>
    <input type="range" name="range" id="range">
    
    <label for="range">Styled Range:</label>
    <input type="range" name="range" id="range" class="input--range" max="100" min="0" step="10" as="range">
  
    <label for="color">Color:</label>
    <input type="color" name="color" id="color">
    
    <label>
      Datalist:
      <input list="datalist" name="datalist">
      <datalist id="datalist">
        <option value="Cat">
        <option value="Monkey">
        <option value="Mouse">
        <option value="Panda">
        <option value="Possum">
      </datalist>
    </label>
​
    <input type="submit" value="Submit">
  </form>
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
acacheungpro
0viewers