form demo

codeacademy work

by Nikita Jadhao

HTML

<div id="header"><h1>Contact Us!</h1></div>
        <div id="wrapper">
            <div id="inputs">
                <form name="input" action="#" method="post">
            	    First name: <input type="text" name="firstname" value="first name"><br/>
            	    Last name: <input type="text" name="lastname" value="last name"><br/>
            	    E-mail: <input type="email" name="email" value="e-mail address"><br/><br/>
                </form>
            </div>
            <div>
                <form id="options">
                    Message: <br/><textarea name="msg"></textarea><br/>
                    <p>Sex:</p>
                    <input type="radio" name="sex" value="male">Male
                    <input type="radio" name="sex" value="female">Female<br/><br/>
                    <input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
                    <input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/> 
                    <input type="submit" value="Submit">
                </form>
            </div>
        </div>

CSS

#header {
    position: relative;
    top: -10px;
    background-color: #00A0B0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	height: 40px;
}

h1 {
    font-family: Lobster;
    color: #FFFFFF;
    text-align: center;
}

form {
    font-family: Verdana, Arial, sans-serif;
}

p {
    font-family: Verdana, Arial, sans-serif;
    display: inline-block;
}

input {
    font-family: Verdana, Arial, sans-serif;
    color: #777;
}

textarea {
	vertical-align: top;
	width: 400px;
	color: #777;
}

#wrapper {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    position: relative;
    top: -10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    box-shadow: 3px 3px 3px #444;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.8em;
}

#inputs {
	width: 200px;
	clear: both;
}

#inputs input {
	width: 100%;
	clear: both;
}