HTML5 Lab

HTML5 experiences: #1 - Forms

HTML

<header>
    <h1>HTML5 Labs:</h1>​
</header>
<nav>
    <ul>
        <li><a href="#Forms">Forms</a></li>
        <li><a href="#Canvas">Canvas</a></li>​
        <li><a href="#VideoAndAudio">Video and Audio</a></li>
    </ul>
</nav>
<section id="Forms">
    <form action="#" method="post">
        <fieldset>
            <legend>The Usual Parts</legend>
            <label for="FirstName">First Name: </label>
            <input type="text" id="FirstName" name="FirstName" placeholder="John"/>​​
            <label for="LastName">Last Name: </label>
            <input type="text" id="LastName" name="LastName" placeholder="Doe"/>​​<br />
            <div id="sex">​
                <label for="sex">Sex: </label>
                <label for="sex-male">Male: </label>
                <input type="radio" id="sex-male" name="sex" value="male">
                <label for="sex-female">Female: </label>
                <input type="radio" id="sex-female" name="sex" value="female">
            </div> 
            <label>I own:</label>
            <label for="macbookpro">a MacBook Pro</label>
            <input type="checkbox" name="accessory" id="macbookpro" value="macbookpro" />
            <label for="ipod">an iPod</label>​
            <input type="checkbox" name="accessory" id="ipod" value="ipod" />
        </fieldset>​​
    </form>
</section>​
<section id="Canvas">
    <header><h2>Canvas</h2></header>
    <canvas></canvas>
</section>​

CSS

html{
    font-size:100.01%; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
}

body {
    font-size: 75%;
    color: #444;
    background: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
    line-height:1.48;
}



nav{
    display: block;
    height: 3em;
    border: 1px solid #ccc;​
}

nav li{
    float: left;
    margin: 0.75em 1.5em;
}

nav a{
    font-weight: bold;
    text-decoration: none;
    color: #444;​
}

nav a:visited{
    color: #222;​
}

nav a:hover{
    color: #666;
}

label{ 
    font-weight: bold;
    margin-right: 0.5em;
}
fieldset{ 
    padding:1.4em; 
    margin: 0 0 1.5em 0; 
    border: 1px solid #ccc; 
}
legend{ 
    font-weight: bold; 
    font-size:1.2em; 
}

input, select, textarea{
    background-color:#fff;
    border:1px solid #bbb;
    text-indent: 0.75em;
    height: 1.5em;
    outline: none;
    margin:0.5em 0;
}

input:hover, select:hover, textarea:hover{
    border:1px solid #bbb;
}

input[type="radio"] { 
    vertical-align: text-bottom;
    height: 1.3em;
    margin:0 0.5em;
}
input[type="checkbox"] { 
    vertical-align: bottom; 
    height: 1.5em;
    margin:0 0.5em;
}

canvas{
    width: 100%;
    height: 300px;
    border: 1px solid #aaa;
}

JavaScript

var canvas = function() {
    var ctx = document.querySelector('canvas').getContext('2d');
    
    ctx.fillStyle = 'rgba(255,175,0,1)';
    var yellowCube = ctx.fillRect(10, 10, 50, 50);

};

canvas();