Jump to content

Create page login guest




If you want to create a guest login page, it's straightforward. I've provided you with a code that you can easily integrate into your website;



Background and Style:

I chosen a background for the page and styled it with CSS to center the content, creating an appealing look.

Login Form:

I created a login form named loginForm with fields for the nickname, age, and gender. These fields are contained in a visible block with the class block_access_verific.

Welcome Message:

I prepared a block named block_access_nickname initially hidden. This block will be displayed when the user has provided the required information.


Function to Change Nickname:

I created a cambia_nick() function allowing users to change their nickname. When activated, it hides the current nickname block and displays the input fields block (block_access_verific).

Local Storage Check:

Upon page load, I check if there are already saved details in Local Storage (nickname, age, and gender). If yes, I automatically fill the form fields with these values.

Form Handling:

When a user submits the form, I check if the entered nickname is valid (no special characters, spaces, and not exceeding 20 characters). If valid, I save the data in Local Storage.

Additional Notes:

I use localStorage to make the user experience persistent across sessions.

Nickname validation is performed using the isValidNickname function.

The form is set to send data to a link (action="mylink"). Make sure this link correctly handles the form data.

I hope this provides a clear understanding of what the code is doing!




<!DOCTYPE html>
<html lang="it">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, partial-scale=1">
        body {
            background-image: url(image) !importante;
            dimensione dello sfondo: copertina !importante;
            display: flessibile;
            allineare gli elementi: centro;
            giustifica-contenuto: centro;
            altezza: 100vh;
            margine: 0;
            famiglia di caratteri: Arial, sans-serif;

        #login-form {
            imbottitura: 20px;
            raggio del bordo: 8px;
            allineamento testo: centro;
            larghezza: 300px;
            sfondo: #fff;

        seleziona {
            margine-bottom: 10px;
            imbottitura: 8px;
            larghezza: calc(100% - 16px);
            dimensionamento del box: border-box;
            sfondo: #fff !importante;

        pulsante {
            imbottitura: 10px;
            colore di sfondo: #4CAF50;
            colore bianco;
            bordo: nessuno;
            raggio del bordo: 4px;
            cursore: puntatore;
            larghezza: 100%;
            margine superiore: 9px;

        .block_access_nickname {
            display: nessuno;

        .cambia_nick {
            colore: #000;
            sfondo: #E8F5E9;
            imbottitura: 5px;
            margine superiore: 23px;
            cursore: puntatore;

    <div id="login-form">
        <h2>Accedi | Scegli il nickname</h2>
        <form id="loginForm" Method="POST" action="mylink">
            <div class="block_access_verific">
                <input type="text" id="nickname" name="nickname" placeholder="Nickname" richiesto>
                <input type="number" id="age" name="age" placeholder="Età (1-100)" min="1" max="100" richiesto>
                <select id= "gender" name="gender" richiesto>
                    <option value="1">Maschio</option>
                    <option value="2">Femmina</option>
            <div class="block_access_nickname "></div>
            <button type="submit" id="submitBtn">Entra nella chat</button>

        function cambia_nick() {
            var storedNickname = localStorage.getItem('nickname');
            blockAccessNickname.style.display = 'nessuno';
            var blockAccessVerific = document.querySelector('.block_access_verific');
            blockAccessVerific.style.display = 'blocca';

        var blockAccessVerific = document.querySelector('.block_access_verific');
        var blockAccessNickname = document.querySelector('.block_access_nickname');

        if (localStorage.getItem('nickname') && localStorage.getItem('age') && localStorage.getItem('gender')) {
            blockAccessVerific.style.display = 'none';
            var storedNickname = localStorage.getItem('nickname');
            blockAccessNickname.innerHTML = 'Stai usando il nickname <b>' + storedNickname + '</b> <br> <div class="cambia_nick" onclick="cambia_nick()">Cambia</div>';
            blockAccessNickname.style.display = 'blocca';

        window.onload = function() {
            var storedNickname = localStorage.getItem('nickname');
            var storedAge = localStorage.getItem('age');
            var storedGender = localStorage.getItem('gender');

            if (storedNickname && StoredAge && StoredGender) {
                document.getElementById('nickname').value = StoredNickname;
                document.getElementById('age').value = storedAge;
                document.getElementById('gender').value = storedGender;

        document.getElementById('loginForm').addEventListener('submit', function(event) {
            var nickname = document.getElementById('nickname').value;
            if (!isValidNickname(nickname)) {
                alert('Il nickname non può contenere caratteri speciali, spazi o superare i 20 caratteri.');

            var età = document.getElementById('età').value;
            localStorage.setItem('nickname', nickname);
            localStorage.setItem('età', età);
            localStorage.setItem('gender', document.getElementById('gender').value);

        function isValidNickname(nickname) {
            var regex = /^[a-zA-Z0-9]+$/;
            return regex.test(soprannome) && soprannome.lunghezza <= 20;






Recommended Comments

There are no comments to display.

  • Create New...