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.

Javascript - Html - Css - Php - Mysql

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.