Scribd
Upload
39 views3 pages

Name: Anooskavin G Roll No: 191Cs119: HTML Head Title Title Script Script Script Script Head

The document contains an HTML program for a login page with a form containing fields for a username and password. The password field includes a "Show Password" button that toggles the input type between password and text. A tooltip is also added to the password field to display validation requirements.

Uploaded by

Anoos Kavin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views3 pages

Name: Anooskavin G Roll No: 191Cs119: HTML Head Title Title Script Script Script Script Head

The document contains an HTML program for a login page with a form containing fields for a username and password. The password field includes a "Show Password" button that toggles the input type between password and text. A tooltip is also added to the password field to display validation requirements.

Uploaded by

Anoos Kavin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

NAME : ANOOSKAVIN G

ROLL NO: 191CS119

PROGRAM:

<html>

<head>

    <title>LOGIN</title>

    <SCript src="https://code.jquery.com/jquery-3.5.1.min.js"></SCript>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min
.js"></script>
</head>

<body>
    <center>
        
            <br />
            <h2 align="center"
                style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe 
UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-
serif;">
                Login</h2>
            <center>
                <form id="login_form" style=" margin: auto;">
                    <div><label
                            style="font-family: -apple-system, BlinkMacSystemF
ont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Ne
ue', sans-serif;">Username:</label>
                        <input type="text" name="username" id="username" place
holder="Username"
                            style="padding: 10px 20px;
                        margin: 8px 0;
                        box-sizing: border-box; border-radius: 8px;" />

                        <br>
                        <label
                            style="font-family: -apple-system, BlinkMacSystemF
ont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Ne
ue', sans-serif;">Password:</label>
                        <input type="password" name="password" id="password" p
laceholder="Password" style="padding: 10px 20px;
                            margin: 8px 0;
                            box-sizing: border-box;border-radius: 8px; border-
style: solid;"
                            title="*must be 8 characters
                             *atleast one uppercase
                             *include splecial characters" />
                   
                    <br>
                    <button type="button" id="show_password" name="show_passwo
rd">ShoW Password</button>
                </form>
            </center>
            <br />
        </div>
    </center>
</body>

</html>
<script>

    $(document).ready(function () {

        $('#show_password').on('click', function () {
            var passwordField = $('#password');
            var passwordFieldType = passwordField.attr('type');
            if (passwordField.val() != '') {
                if (passwordFieldType == 'password') {
                    passwordField.attr('type', 'text');
                    $(this).text('Hide Password');
                }
                else {
                    passwordField.attr('type', 'password');
                    $(this).text('Show Password');
                }
            }
            else {
                alert("Please Enter Password");
            }
        });
    });
    $(document).ready(function () {
        $('#password').tooltip();
    }); 
</script>
OUTPUT :

You might also like