Filtra la ricerca ...
Frase esatta
Categorie

Come inserire icone nei campi input di un form

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Per questo form e l’inserimento delle icone ( altrimenti dette glyphicons) nei campi input text e textarea ho utilizzato Bootstrap.

Bootstrap è stato realizzato dagli sviluppatori di Twitter, è uno dei framework CSS più utilizzati, viene per esempio usato per realizzare template di Wordpres, Joomla, HTML, ecc; con esso si possono realizzare davvero layout molto piacevoli e soprattutto responsive, che oramai è diventato un must se vogliamo un sito user friendly.

Come creare un form con CSS Bootstrap

Per prima cosa creiamo un nuovo documento HTML e prima della chiusura del tag head, richiamiamo la libreria ed il relativo file CSS, necessari al corretto funzionamento di Bootstrap :

bootstrap.min.css
bootstrap.min.js

Avremo quindi una struttura tipo

Nel mio caso ho richiamato le librerie direttamente dalla CDN, ma per progetti in produzione, vi consiglio di richiamarle da locale in modo tale da diminuire notevolmente il tempo di caricamento. Si possono scaricare liberamente da qui.

A questo punto realizziamo il nostro form, nel mio esempio ho 4 campi input, di cui uno è una textarea, ma potete sbizzarrirvi a piacimento dando spazio alla vostra fantasia!

Analizziamo il codice :

#container : è il contenitore del form

.form-group : permette di impaginare il form facendolo “floattare”

.inner-addon e .left-addon : utilizzati per allineare e formattare correttamente le icone

.glyphicon : richiamo lo stile delle icone

.glyphicon-user : richiamo la relativa icona

placeholder : inserisce del testo all’interno dei campi input text e textarea (può sostituire la consueta label)

A questo punto il risultato è quello nella figura sottostante, ma come potrete notare manca qualcosa, le icone non sono impaginate correttamente.

come inserire icone glyph in campi input

Ora aggiungiamo qualche riga di CSS per impaginare correttamente le icone all’interno dei campi input

Una volta aggiunto il CSS il risultato è il seguente

come creare un form con boostrap

Lista icon glyphicons di Bootstrap

Se volete utilizzare altre icone, potete trovare una lista completa qui

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.