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>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/*
     CSS-Tricks Example
     by Chris Coyier
     http://css-tricks.com
*/
​
*                                   { margin: 0; padding: 0; }
body                                { background: #393939; color: white; font: 14px Helvetica, sans-serif; }
a                                   { text-decoration: none; color: #9bf9ff; border-bottom: 1px dotted #9bf9ff; }
a:hover                             { border-bottom-style: solid; }
#page-wrap                          { width: 500px; margin: 25px auto; }
h1                                  { font: 26px Georgia, Serif; margin: 0 0 10px 0; }
form                                { margin: 50px 0 0 0; }
label                               { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
input[type=text]                    { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
form div                            { overflow: hidden; margin: 0 0 5px 0; }
.button                             { margin: 0 0 0 5px; text-indent: -9999px; cursor: pointer; width: 29px; height: 29px; float: left; text-align: center; background: url(http://tamelarich.com/wp-content/uploads/2009/03/blue-plus-minus-buttons-300x146.jpg) no-repeat; }
.dec                                { background-position: 0 -29px; }
#submit                             { margin: 15px 0 0 175px; font: 20px Helvetica, sans-serif; padding: 5px 10px 3px 10px; border: 1px solid black; background: #eee; }
#submit:hover                       { background: #ccc; }
</style>
</head>
<body>
  <form method="post" action="">
    <div>
        <label for="name">French Hens</label>
        <input type="text" name="french-hens" id="french-hens" value="3"/>
    </div>
    <div>
        <label for="name">Turtle Doves</label>
        <input type="text" name="turtle-doves" id="turtle-doves" value="2"/>
    </div>
    <div>
        <label for="name">Partridges</label>
        <input type="text" name="partridge" id="partridge" value="1" />
    </div>
​
    <input type="submit" value="Submit" id="submit" />
</form>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers