Sample code for simple registration and login form using HTML, CSS, and JavaScript

0

Creating a full-fledged social media application involves both front-end (JavaScript) and back-end (server-side language and database) development.

 

Below is a basic example of a front-end code snippet using HTML, CSS, and JavaScript for a simple registration and login form. Please note that this example does not include server-side logic or database interactions, as a complete social media app would require a server to handle these tasks.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Simple Social Media App</title>

    <style>

        body {

            font-family: Arial, sans-serif;

        }

        form {

            max-width: 300px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

 

<form id="registrationForm">

    <h2>Register</h2>

    <label for="regUsername">Username:</label>

    <input type="text" id="regUsername" required>

    <br>

    <label for="regPassword">Password:</label>

    <input type="password" id="regPassword" required>

    <br>

    <button type="button" onclick="registerUser()">Register</button>

</form>

 

<form id="loginForm">

    <h2>Login</h2>

    <label for="loginUsername">Username:</label>

    <input type="text" id="loginUsername" required>

    <br>

    <label for="loginPassword">Password:</label>

    <input type="password" id="loginPassword" required>

    <br>

    <button type="button" onclick="loginUser()">Login</button>

</form>

 

<script>

    function registerUser() {

        // Placeholder function for user registration

        var username = document.getElementById('regUsername').value;

        var password = document.getElementById('regPassword').value;

 

        // Add logic to send registration data to the server

        console.log('Registering user:', username);

    }

 

    function loginUser() {

        // Placeholder function for user login

        var username = document.getElementById('loginUsername').value;

        var password = document.getElementById('loginPassword').value;

 

        // Add logic to send login data to the server

        console.log('Logging in user:', username);

    }

</script>

 

</body>

</html>

 

In a real-world scenario, you would need to implement server-side logic to handle user registration and login, and you should also use secure practices, such as HTTPS, and store user passwords securely (e.g., using bcrypt).

 

This example focuses on the front-end aspect of user registration and login forms using basic HTML, CSS, and JavaScript.

Post a Comment

0Comments

Post a Comment (0)