Fw

Wordpress Creative Developer

Tutorial Javascript – Realizzare Una Textarea Dinamica

  • Tutorial Jquery
  • -

Oggi vediamo un semplice ed efficace tutorial su javascript, dove realizzeremo una textarea dinamica, le cui dimensioni si adatteranno al testo che andiamo ad inserire.

Tutorial Jquery - Come Realizzare Una Text Area Ridimensionabile

Ci vuole veramente poco per ottenere questo effetto. Vediamo quali sono i passi per realizzarlo.

Scarica i sorgenti
prima di iniziare con il tutorial.

Passo 1. Inizializzazione script

Al solito tra i tag head bisogna inserire i codici necessari per inizializzare lo script.

 

Passo 2. Inserimento della textarea

Ecco il codice HTML per inserire la textarea

Passo 3. Applichiamo lo script

Ora non resta che applicare lo script alla textarea, con queste poche righe di codice.

Passo 4. Textarea con stile

Ognuno di poi poi potrà personalizzare come preferisce la textarea. Ecco un esempio.

body,html { margin: 0; padding: 0; background: #d5b88e; }
.label {  
padding: 5px; 
font: bold 10px Georgia, sans-serif;
}

.form { 
padding: 20px 20px 10px; 
background: #d5b88e; 
width: 580px; 
overflow: hidden; 
}

.form label { font: bold 0.9em Georgia, Arial, sans-serif; 
color: #583d17; 
padding: 0 0 0 5px;}

.form .w { 
float: left; 
clear: both; 
padding: 5px 5px 0; 
background: #b39a76; 
font: bold 0.8em Helvetica, Arial, sans-serif; 
color: #333; 
overflow: hidden; }

.form .w span { padding: 0 0 5px; float:left; }

.form .input { 
border: 1px solid #d5b88e; 
line-height: 20px; 
padding: 5px 5px 5px 5px; 
margin: 0 0 5px 0; 
width: 537px; 
font: 16px Georgia, Arial, sans-serif; 
}

.form .w label { padding:0; }

Questa è una soluzione per rendere le form meno scontate e cercare di coinvolgere maggiormente l’utente nell’interazione con il sito.

Scarica il sorgente

Guarda il tutorial

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *