<div class="tab">
        <button class="tabLinks" onclick="openForm(event, 'signIn')">sign in</button>
        <button class="tabLinks" onclick="openForm(event, 'signUp')">sign up</button>
    </div>
    <!-- Tab content -->
    <form action="#" target="_blank">
            <div id="signUp" class="tabContent">
                <fieldset>
                    <legend>Sign up</legend>
                        Tài khoản: <br>
                        <input type="text" placeholder="Enter Your Name"> <br>
                        Mật khẩu <br>
                        <input type="password" placeholder="Enter Password">
                        <br><br>
                        <!-- submit và button -->
                        <input type="submit">
                </fieldset>
            </div>
            <div id="signIn" class="tabContent">
                <fieldset>
                    <legend>Sign In</legend>
                        Họ và tên: <br>
                        <input type="text" placeholder="Enter Your Name"> <br>
                        Mật khẩu: <br>
                        <input type="password" placeholder="Enter Your Password"> <br>
                        Đăng nhập Email: <br>
                        <input type="email" placeholder="Example:abc@gmail.com"> <br>
                        Hoặc: <br>
                        <input type="button" value="Đăng kí">
                </fieldset>
            </div>
    </form>
    <script>
        function openForm(event, formName) {
    //Declare all variables
    var i, tabContent, tabLinks;

    //Get all elements with class="tabContent" and hide them
    tabContent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    //Get all elements with class="tabLinks" and remove the class "active"
    tabLinks = document.getElementsByClassName("tabLinks");
    for (i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }

    //Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementsById(formName).style.display = "block";
    event.currentTarget.className += " active";

}
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55