Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<style>
  /* example of user interface selectors http://www.w3.org/TR/css3-ui/#user-interface-selectors */
 input:focus:invalid { background-color: lightPink;}
input:valid { background-color:lightGreen }
input:required {border: 2px solid red;}
input:optional {border: 2px solid green;}
</style>
</head>
<body>
 
  This is an input field : <input type="text"/><p>
  <label for="name">Enter at least 6 chars, max 9 chars: </label> 
  
  <!-- the input element http://dev.w3.org/html5/spec/the-input-element.html#the-input-element -->
<input id="name" name="inputName" 
  placeholder="6 to 9 chars please..." 
  pattern="\w{6,9}" 
  required
  autofocus
  type="text"/>
  <p>
    Try to click on the label left to the input field.
    Notice that the focus in on the second input field, thanks to the "autofocus" attribute.
    
</body>
</html>
Output

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

Dismiss x
public
Bin info
mrstevepro
0viewers