casella di testo

**InternetMania** · 25-08-2008, 09:37

ciao a tutti ...

non sono sicuro di essere nella sezione giusta, ma credo che questo sia un effetto creato con il css ... comunque ...

io volevo creare una casella di testo simile a quella in allegato, ... mi potete spiegare come posso fare? grazie a tutti .. ciao ciao

**fcaldera** · 25-08-2008, 10:22

copia e incolla

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        * {
            margin      : 0;
            padding     : 0;
            font-size   : 10px;
            font-family : verdana, arial, sans-serif;
        }
        
        fieldset { 
            border      : 1px #ccc solid; 
            height      : auto;
            overflow    : hidden;
            width       : 543px;
            display     : block;
            margin      : 3px 0 0 3px;
            background-color    : #eee;
        }
        
            fieldset input { 
                border          : 0; 
                width           : 218px;
                float           : left;
                display         : inline;
                background-color: #fff;
                color           : #999;
                font-size       : 1.3em;
                padding         : 1px;
                height          : 18px;
            }
        
            fieldset ins { 
                text-decoration : none;
                width           : 285px;
                padding-left    : 35px;
                float           : left;
                display         : inline;
                
                height          : 20px;
                line-height     : 20px;
                font-size       : 1.2em;
                
                background-position : top left;
                background-repeat   : no-repeat;
        }
        
        
        /*** icone ***/
        #fieldname ins { background-image      : url(ico-name.gif); }
        #fieldemail ins { background-image      : url(ico-email.gif); }
        
        /* altre icone qui */
        </style>
    </head>

<body>

    <form ... >
        <fieldset id="fieldname">
            <input type="text" />
            <ins>Nome (richiesto)</ins>
        </fieldset>
        
        <fieldset id="fieldemail">
            <input type="text" />
            <ins>Email</ins>
        </fieldset>
        ...
        
        
    </form>

</body>
</html>

e ritaglia le immagini come quella allegata (chiamala ico-name.gif e mettila nella stessa cartella del file html o non la vedrai)

Studia il codice e il posizionamento degli oggetti

Keywords: form helper helpers messaggi errore errori completamento hints tips suggerimenti

**InternetMania** · 25-08-2008, 10:31

e per dare un effeto di "punta" alla casella di testo come in allegato come posso fare??

**InternetMania** · 25-08-2008, 10:32

ho sbagliato prima con l'allegato, eccolo qui sotto ...

nella parte gialla (che poi lascio bianca) si inserisce il testo, l'effetto è nella punta che ce sulla sinistra della casella ...

**fcaldera** · 25-08-2008, 10:51

magari facendo un immagine come la mia ma invertendo il senso della punta?

**InternetMania** · 25-08-2008, 10:55

si solo che io ho copiato il codice ma non veniva la punta, per questo che te l'ho chiesto ... io ho capito di ritagliare solo le immagini, non la punta ..

**fcaldera** · 25-08-2008, 10:59

nel post di prima ti ho allegato un'immagine di prova. Copiala come indicato

**InternetMania** · 25-08-2008, 11:03

si questo si ... però io non vedo l'url che si collega alla freccetta .. quindi non sapevo come e dove inserire la freccetta ...

**fcaldera** · 25-08-2008, 11:06

Originariamente inviato da InternetMania
si questo si ... però io non vedo l'url che si collega alla freccetta .. quindi non sapevo come e dove inserire la freccetta ...

...

tasto destro del mouse sopra l'immagine e fai "salva con nome"...

**InternetMania** · 25-08-2008, 12:29

si questo lo so ... ma intendevo che non so dove inserire l'immagine all'interno del codice ...

Discussione: casella di testo

Strumenti discussione

Ricerca discussione

Visualizza

casella di testo

Permessi di invio