Menù

Demo

Indicazioni sulla scelta dell'user :
Lunghezza minima 8 caratteri .
Almeno due caratteri numerici .

Indicazioni sulla scelta della password :
Lunghezza minima 8 caratteri .
Almeno due caratteri numerici .
Almeno un carattere speciale .


Solo caratteri numerici
  • aggiornato il 02/02/2025 19:59:51

Top 5

Tooltip - informazioni compilazione campi

Piccolo script per visualizzare un box informazioni a fianco di un campo di tipo testo.

Richiamo la libreria Jquery

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

La funzione javascript

    $(document).ready(function(){
        $("input[type='text']").focus(function(){
            $(".tooltip").hide();
            $(this).next().show();
        });      
    });

l'html del form

<form>
    <label>Username : </label>
    <input type="text" name="user"/>
    <span class="tooltip">
        Indicazioni sulla scelta dell'user : <br/>
        Lunghezza minima 8 caratteri . <br/>
        Almeno due caratteri numerici . <br/>
    </span>
    <br/>
    <label>Password : </label>
    <input type="text" name="pass"/>
    <span class="tooltip">
        Indicazioni sulla scelta della password : <br/>
        Lunghezza minima 8 caratteri . <br/>
        Almeno due caratteri numerici . <br/>
        Almeno un carattere speciale . <br/>
    </span>
    <br/>
    <label>Ripeti password : </label>
    <input type="text" name="rpass"/>
    <span></span><!-- nessun tooltip -->
    <br/>
    <label>Telefono : </label>
    <input type="text" name="tel"/>
    <span class="tooltip">
        Solo caratteri numerici
    </span>
    <br/>
</form>

Ultimo ma non meno importante il codice css

    form {
        line-height: 28px;
    }
    form label {
        display: inline-block;
        width: 120px;
        text-align: right;
        margin-right:5px;
    }
    span.tooltip {
        display: none;
        position: absolute;
        width: 180px;
        overflow: hidden;
        text-align: left;;
        color: #4A4F59;
        background-color: #F5F5F5;
        border-radius:4px;
        border:1px solid #E1E1E1;
        padding:6px;
        margin-left:5px;
        font-size:.8em;
        color:#777;
    }

criric

Mi sono appassionato di programmazione web a 34 anni, un pò tardi, da allora però non perdo mai occasione per imparare qualcosa di nuovo in questi campi.

Inserisci un commento

Codice antispam

Categorie

Comunicazioni

Puoi utilizzare questo modulo per qualsiati tipo di segnalazione.

Codice antispam

 

I dati di questo modulo non verranno pubblicati.