04. Fakebook Register Form

Homework: HTML5 Forms

by Polina Petrova

HTML

<form id="register-form">
        <figure id="logo">              
            <img src="http://prikachi.com/images/530/6063530e.jpg" alt="Facebook logo" />
        </figure>            
        <h1>Registration</h1>
        <h2>It is safe and it will always be</h2>

        <fieldset id="none-important-info">
            <legend>None-Important Information</legend>
            <p>
                <input type="text" id="first-name" name="first-name" placeholder="First Name">
                <input type="text" id="last-name" name="last-name" placeholder="Last Name">
            </p>
            <p>
                <input type="email" id="email" name="email" placeholder="Your Email" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z0-9_]{3,}.[a-zA-Z0-9_]{2,4}">
                <input type="text" id="phone" name="phone" placeholder="Phone Number" pattern="\+[0-9]{3}\-[0-9]{3}\-[0-9]{2}\-[0-9]{2}\-[0-9]{2}">
            </p>
            <p>
                <input type="password" id="password" name="password" placeholder="Your Password">
                <input type="text" name="website" id="website" placeholder="Website">
            </p>
            <p>
                <label for="birthday">Birthday</label>
                <input type="datetime-local" id="birthday" name="birthday" placeholder="YYYY-MM-DDTHH:MM" />
            </p>
            <p>                    
                <input type="radio" name="male" id="male" />
                <label for="male" class="inl">Male</label>                    
                <input type="radio" name="female" id="female" />
                <label for="female" class="inl">Female</label>                    
                <input type="radio" name="other" id="other" />
                <label for="other" class="inl">Other</label>
            </p>
        </fieldset>

        <fieldset id="important-info">
            <legend>Important Information *required</legend>
            <p>
                <select name="country" id="country" autofocus...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*RESET end*/
html{
    background-color:#2D598E;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    color:#fff;
    font-size:100%;    
    line-height:100%;
    text-transform:capitalize;
}
form#register-form{
    font-size:0.9rem;
    margin: 0 auto;
    text-align:center;
    width:795px;
    padding:0;
    display:inline-block;    
}
figure{
    text-align:center;    
    width:600px;
    height:180px;
    overflow:hidden;  
    margin: 0 auto; 
}
figure#logo img{
    width:560px;    
}
h1{
    font-size:2.5rem;
    line-height:4rem;
    font-weight:bold;
}
h2{
    font-size:1.2rem;
    line-height:2rem;
    font-weight:bold;
}
fieldset{    
    display:inline-block;
    text-align:left;
    padding:0.5rem 0.8rem;
    line-height:1.2rem;
    border:1px solid #fff;
    border-radius:0.6rem;    
    margin:1rem 0 0.8rem 1rem;
    float:left;
}
#none-important-info{    
    float:left;
    display:inline-block;
    width:295px;    
}
#important-info{ 
    width:400px;
    float:left;
   ...