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>
  <title>Form Project</title>
  <style type="text/css" rel="stylesheet">
    #but{text-align:center;}
    td{text-align:right;}
    span{padding=0; margin=0;float:left;}
  </style>
</head>
<body>
 <form id="formId">
  <table border = "1">
​
    <tr>
      <th>Provide your contact information</th>
      <th>Provide your login access information</th>
    </tr>
​
​
    <tr>
      <td><label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label></td>
      <td><label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>  </td>
    </tr>
​
​
    <tr>
      <td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
      <td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>  
    </tr>
​
​
    <tr>
      <td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
      <td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
    </tr> 
​
​
    <tr>
      <td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
    </tr>
​
​
    <tr>
      <td><label for ="Citylist"><span>City:</span>
        <input type = "text" id ="citylist"
        placeholder="Select a city" list = "cities" required/>
        <datalist id= "cities">
          <option value = "Bronx"/>
          <option value = "Brooklyn"/>
          <option value = "Queens"/>
          <option value = "Manahttan"/>
          <option value = "Staten Island"/>
        </datalist>
        </label>
        </td>
    </tr>
​
    <tr>
    <td><label for ="StateList"><span>State:</span>
        <input type = "text" id ="State"
        placeholder="Select a city" list = "states" required/>
        <datalist id= "states">
          <option value = "New York"/>
          <option value = "New Jersey"/>
          <option value = "California"/>
          <option value = "Virginia"/>
          <option value = "Maine"/>
        </datalist>
        </td>
    </tr>
​
​
    <tr>
      <td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
      </tr>
​
    <tr>
      <td>
        <label><span>Phone</span>
          <input type ="tel" placeholder="(123)456-789"
          pattern="\(\{3}) +\d{3}-\d{4}" required/>
        </label>
      </td>
    </tr>
​
    <tr>
      <td>
        <label><span>Email:</span>
          <input type="email" placeholder="name@domain.com" required/> 
        </label>
      </td>
    </tr>
​
    <tr>
      <td>
        <label><span>Birth Date:</span>
          <input type="date" required/>
        </label>
      </td>
    </tr>
  </table>
 </form>
 <script type="text/javascript" src="form.js"></script>
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers