Template

by sffriend

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- This uses bootstrap to give some basic styles, and jQuery for basic js library functionality. -->

<!-- HTML5 Doctype -->
<!-- <!DOCTYPE html> -->

<!-- 
Ideas:
   Toggle between two view that are on the DOM at the same time
   Trigger AJAX calls on button clicks
   Client side form validation
   HTML placeholder or password 
-->

<div id="page">
    <h3>Welcome!</h3>
    <div id="signinForm" class="form">
        <div>
            <label for="signinEmail">Email:</label><br/>
            <input id="signinEmail" type="email" placeholder="ex. [email protected]" class="form-control">
        </div>    
        <div>
            <label for="signinPassword">Password:</label><br/>
            <input id="signinPassword" type="password" class="form-control">
        </div>
        <div>
            <input type="button" value="Sign in" class="btn btn-success">
            Don't have an account? <a class="toggleForm" href="javascript:void(0)">Sign up</a>
        </div>
    </div>
    <div id="signupForm" class="form hidden">
         <div>
            <label>Name:</label><br/>
            <input type="text" placeholder="ex. John Doe" class="form-control">
        </div> 
         <div>
            <label>Email:</label><br/>
            <input type="email" placeholder="ex. [email protected]" class="form-control">
        </div>    
        <div>
            <label>Password:</label><br/>
            <input type="password" class="form-control">
        </div>
        <div>
            <input type="button" value="Sign up" class="btn btn-success">
            Already have an account? <a class="toggleForm" href="javascript:void(0)">Sign in</a>
        </div>
    </div>
</div>

CSS

#page {
    width: 75%;
    margin: 0 auto;
}

#page div {
    padding-bottom: 10px;
}

.hidden {
    display: none;
}

JavaScript

//Signup and Signin links will toggle the form views
$(".toggleForm").on("click", function(){
    $(".form").toggleClass("hidden");
});