Facebook Style Homepage, Registration Form, Login Design

Hi friends hope you are doing well. Today i am going to share a very useful code  “Facebook login sign up home page design”  I thought this might be useful, I have seen a lot of tutorials about facebook home page design but this is seriously it worth reading at. This snippet give you understanding of how the facebook home page is structured and some inside tweaking of html and css classes.

Demo Download

Source Code

Facebook login form

<form id="login_form" action="#" method="post">
    <table role="presentation" cellspacing="0">
        <tbody>
            <tr>
                <td class="html7magic">
                    <label for="email">Email or Phone</label>
                </td>
                <td class="html7magic">
                    <label for="pass">Password</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="inputtext" name="email" id="email" tabindex="1"
                    type="email"> </td>
                <td>
                    <input class="inputtext" name="pass" id="pass" tabindex="2"
                    type="password"> </td>
                <td>
                    <label class="uiButton uiButtonConfirm" style="" id="loginbutton"
                    for="u_0_l">
                        <input value="Log In" tabindex="4" id="u_0_l" type="submit"> </label>
                </td>
            </tr>
            <tr>
                <td class="login_form_label_field">
                    <div><a href="#">Forgotten account?</a> </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

Facebook signup form

<form method="post" id="reg" name="reg" action="#">
    <div id="reg_form_box" class="large_form">
        <div>
            <div class="mbm">
                <div class="_5dbb" id="u_0_0">
                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                        <div class="placeholder" aria-hidden="true">First name</div>
                        <input class="inputtext _58mg _5dba _2ph-"
                        name="firstname"
                        type="text">
                    </div>
                </div>
            </div>
            <div class="mbm">
                <div class="_5dbb" id="u_0_2">
                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                        <div class="placeholder" aria-hidden="true">Surname</div>
                        <input class="inputtext _58mg _5dba _2ph-"
                        type="text">
                    </div>
                </div>
            </div>
        </div>
        <div id="reg_form_minus_name_fields" class="">
            <div class="mbm">
                <div class="_5dbb" id="u_0_4">
                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                        <div class="placeholder" aria-hidden="true">Mobile number or
                            email address</div>
                        <input class="inputtext _58mg _5dba _2ph-"
                        type="text">
                    </div>
                </div>
            </div>
            <div class="mbm" id="u_0_6">
                <div class="_5dbb" id="u_0_7">
                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                        <div class="placeholder" aria-hidden="true">Re-enter mobile number
                            or email address</div>
                        <input class="inputtext _58mg _5dba _2ph-"
                        type="text">
                    </div>
                </div>
            </div>
            <div class="mbm">
                <div class="_5dbb" id="u_0_9">
                    <div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
                        <div class="placeholder" aria-hidden="true">New password</div>
                        <input class="inputtext _58mg _5dba _2ph-"
                        type="password">
                    </div>
                </div>
            </div>
            <div class="_58mq _5dbb _5634" id="u_0_b">
                <div class="mtm mbs _2_68">Birthday</div>
                <div class="_5k_5">

                    <select name="birthday_day" id="day" title="Day"
                    class="_5dba" role="null">
                        <option value="0" selected="selected">Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                    <select id="month" title="Month" class="_5dba">
                        <option value="0" selected="selected">Month</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <option value="4">Apr</option>
                        <option value="5">May</option>
                        <option value="6">Jun</option>
                        <option value="7">Jul</option>
                        <option value="8">Aug</option>
                        <option value="9">Sept</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>

                    <select aria-label="Year" name="birthday_year"
                    id="year" title="Year"
                    class="_5dba">
                        <option value="0">Year</option>
                        <option value="2016">2016</option>
                        <option value="2015">2015</option>
                        <option value="2014">2014</option>
                        <option value="2013">2013</option>
                        <option value="2012">2012</option>
                        <option value="2011">2011</option>
                        <option value="2010">2010</option>
                        <option value="2009">2009</option>
                        <option value="2008">2008</option>
                        <option value="2007">2007</option>
                        <option value="2006">2006</option>
                        <option value="2005" selected="selected">2005</option>
                        <option value="2004">2004</option>
                        <option value="2003">2003</option>
                        <option value="2002">2002</option>
                    </select>
                    </span>
                    </span>
                    <a class="mlm _58ms" id="birthday-help" href="#"
                    title="Click for more information"
                    rel="async" role="button">Why do I need to provide my date of birth?</a>
                </div>
            </div>
            <div class="mtm _5wa2 _5dbb" id="u_0_j">
                <span class="_5k_3" data-type="radio" id="u_0_k">
                  <span class="_5k_2 _5dba"><input name="sex" value="1" id="u_0_h" type="radio">
				<label class="_58mt" for="u_0_h">Female</label></span>
                <span class="_5k_2 _5dba">
				<input name="sex" value="2" id="u_0_i" type="radio">
				<label class="_58mt" for="u_0_i">Male</label>
				</span>
                </span>
            </div>
            <div class="_58mu" data-nocookies="1" id="u_0_d">
                <p class="_58mv">By clicking Create an account,
                    you agree to our <a href="#"
                    id="terms-link" target="_blank"
                    rel="nofollow">Terms</a>                    and that you have read
                    our <a href="#" id="privacy-link"
                    target="_blank" rel="nofollow">Data Policy</a>,
                    including our <a href="#"
                    id="cookie-use-link"
                    target="_blank" rel="nofollow">Cookie Use</a>.</p>
            </div>
            <div class="clearfix">
                <button type="submit" class="_6j mvm _6wk _6wl _58mi _3ma _6o _6v"
                name="websubmit" id="u_0_e">Create an account</button>
                <span
                class="hidden_elem _58ml"
                id="u_0_o"></span>
            </div>
        </div>
    </div>

    </div>
    </div>

    </div>
    </div>
</form>

Demo Download

I hope this code will help you out. Do like & share this article with your friends on social media sites like Facebook, Twitter, google Plus, LinkedIn, scoop.it, etc. Please don’t forget to subscribe our newsletter to get awesome tutorials and tools.