domenica 27 Settembre 2020

Download in corso

Softwareone.it

08-01-2019

HTML, i form

Il form è l’oggetto più semplice che possiamo usare per interagire con il navigatore.
Possiamo usare il form in due modi:Spedizione tramite CGI, PHP od altri linguaggiConfigurazione tramite script

La spedizione tramite mail del contenuto form può essere effettuato anche tramite i servizi che alcuni portali ci mettono a disposizione.

Solitamente dobbiamo inserire solo due o tre righe iniziali. Cercare sul web “servizio FORM-MAIL“.

Creare un form è molto semplice. Tutto si basa sui tag html, per ogni oggetto del form (pulsante, area testo ecc.) si creano in automatico delle variabili che contengono il testo o valore inserito nel form.

Quando spediamo il form le variabili con le informazioni arrivano al server per l’utilizzo. Il processo (tramite script php od altro) restituisce il risultato dopo aver manipolato tali variabili.

Nel caso il form sia associato ad uno script javascript non c’è bisogno di inviarlo al server. La manipolazione dei dati inseriti sarà effettuata direttamente dal browser del navigatore.

I form possono anche contenere o essere contenuti in tabelle od altri box. Questo NON influenza la spedizione dei dati.

Sintassi iniziale

La sintassi inizia sempre con la riga <form> e si conclude con </form>

<form action=" " method=" " enctype=" ">......</form>

Attributi accettati

  • action=” “Indica dove mandare il form. Può essere un URL, in default ha lo stesso url del sito.
  • method=” “ Indica come mandare le informazioni all’url. Può essere “post” oppure “get”. L’unica differenza fra i due metodi è che post spedisce le variabili nascondendole al navigatore, mentre get inserisce le variabili nell’url del browser.
  • enctype=” “ Indica il tipo di contenuto del form quando method=”post”.
  1. application/x-www-form-urlencoded” Valore di default (se non specificato nel tagform) per inviare testo o valori comuni.
  2. multipart/form-data Per inviare grandi quantità di dati (file, immagini ecc.) oppure del testo che contenga alcuni caratteri non asc
  • name=” “ Indica il nome dell’elemento form per un eventuale richiamo di css o script. Il suo utilizzo è stato declassato a favore di id=” “.
  • class=” “ Specifica il nome della classe css che ne regola la grafica (è possibile utilizzare anche style=” “).
  • title=” “Eventuale titolo del form
  • target=” “ Nel caso il sito utilizzi i frame è possibile far arrivare i dati del form in quella pagina.

INPUT

Il tag INPUT associato al tipo (type=” “) dà vita a numerosi formati per raccogliere informazioni dal navigatore (caselle di testo, pulsanti, password ecc.).

La sintassi è molto semplice, anche se ogni tipo ha la propria specifica:

<input type=" " name=" ">

Attributi comuni

  • name=” ” indica il nome del campo. Servirà per richiamarlo con script o altre procedure.
  • type=” ” button, checkbox, hidden, image, password, radio, reset, submit, text.
  • id=” ” indica il nome per un’eventuale richiamo css o script.
  • class=” ” indica il nome della classe css che ne regola la grafica (è possibile inserire anche style=” “)

Analizziamo ogni tipo con relativi esempi. Da ricordare che non tutti i tipi hanno attributi uguali:

<input type="text">

Il tipo text consente di inserire il testo dentro un campo composto da una sola riga (a differenza del tag textarea).

Codice

<form>
<input name="ciao" type="text" maxlength="20" size="10" value="inizio">
</form>

Attributi specifici type=”text”

<input type="password">
  • maxlength=” ” numero max di caratteri che possiamo immettere.
  • size=” ” lunghezza della finestra misurata in numero di caratteri.
  • value=” ” la frase iniziale.
  • readonly – se inseriamo questo attributo in un campo text precompilato (input type=”text” value=”frase precompilata”), il testo può solo essere letto e NON modificabile dal navigatore

Il tipo password consente di inserire del testo coperto da asterischi.

Codice

<form>
<input name="ciao" type="password" maxlength="4" size="7">
</form>
<input type="checkbox">

Il type=”checkbox”
consente di inserire una casella di spunta all’interno del form.

A differenza del type=”radio” le caselle checkbox possono essere attivate senza un numero max di limite.

Codice

<input type="radio">

Il type=”radio” 
inserisce una serie di caselle radio dove soltanto una può essere selezionata. Con l’attributo checked si preseleziona in automatico una casella.

Di default (se non è presente checked) è selezionato il primo radio del form. Si suggerisce di inserire sempre l’attributo checked perchè non tutti i browser agiscono di default.

Codice

<form>
<input name="ciao" type="radio" value="1">
<input name="ciao" type="radio" value="2" checked>
<input name="ciao" type="radio" value="3">
</form>

input type=”file”

Il type=”file”
consente di selezionare un file (.txt immagine od altro) dal computer del navigatore per inviarlo tramite il form. In questo caso nella riga iniziale del form si deve utilizzare il metodo post edenctype=”multipart/form-data”

<form action="pagina.php" method="post" enctype="multipart/form-data">
<input name="ciao" type="file">
</form>

input type=”hidden”

Con il type=”hidden”
inseriamo un campo nascosto nel form per la trasmissione dei dati. La variabile che generiamo sarà utile per eventuali controlli o trasmissioni di dati che altrimenti andrebbero persi con l’invio del form.

<form>
<input name="ciao" type="hidden" value="33">
</form>

Non apparirà niente a video, ma è molto importante sapere che quando il navigatore spedirà il form sarà creata una variabile con il nome ciao con valore 33. Tale variabile sarà trasmessa con tutti gli altri dati del form, senza nessuna azione diretta dell’utente.

<input type="button">

Il tipo button non è da confondere con il tipo submit (che serve per inviare il form). Il tipo button si utilizza quando il form può contenere una funzione javascript, magari per aiutare nel compilamento oppure per fare un controllo.

Codice con esempio javascript:

<script type="text/javascript"> 
function ciao3(form){alert("Io sono la funzione ciao3");} 
</script>
<form>
<input name="ciao" type="button" value="premi" onClick="ciao3(this.form)">
</form>
<input type="reset">

Il pulsante type=”reset” consente di resettare allo stato iniziale. In pratica cancella tutti i dati inseriti dal navigatore e riporta tutto il form allo stato di partenza.

<form>
<input type="reset" value="resettare">
</form>
<input type="submit">

Il tipo type=”submit” consente di inviare alla pagina o programma prestabilito all’inizio. Se cliccato invieremo tutte le informazioni che il navigatore ha inserito.

<form>
<input type="submit" value="spedisci">
</form>
<input type="image">

Il type=”image” crea un pulsante di tipo submit con l’inserimento di un’immagine.

Si consiglia sempre di inserire l’attributo alt=” ” per consentire leggere un testo alternativo nel caso l’immagine non sia raggiungibile o non visibile dal browser. L’invio dei dati comprende anche l’invio delle coordinate del click (x ed y) consentendo di applicare un’azione diversa a seconda della posizione del clic.

In pratica otterremo l’invio con due variabili chiamate:

nome.x
con nome che prende il valore dell’attributo name=” “. Questa variabile trasmette la coordinata del clic a partire dalla sinistra dell’immagine (valore in pixel).

nome.y 
con nome che prende il valore dell’attributo name=” “. Questa variabile trasmette la coordinata del clic a partire dall’alto dell’immagine (valore in pixel).

<form>
<input name="softwareone.it" type="image" src="/immagini/logo/logo-rgb.png" alt="immagine di prova">
</form>

TEXTAREA

Consente di inserire del testo.

<form>
<textarea rows="5" cols="20" >qui devi inserire tutto il testo che ti pare.Spesso ci vediamo strane leggi e norme,chissà che ne faranno dei nostri form...</textarea>
</form>

SELECT

Il tag SELECT consente al navigatore di scegliere fra più opzioni. Le opzioni possono essere singole o multiple. Il tag SELECT al suo interno contiene i tag OPTION, che in pratica sono le opzioni cliccabili disponibili.

<form>
<select name="ciao" size="1" >
<option selected value="1"> prima </option>
<option value="2"> seconda </option>
<option value="3"> terza </option>
<option value="4"> quarta </option>
</select>
</form>

SELECT OPTGROUP

Questo tag si utilizza con SELECT solo se all’interno dobbiamo inserire dei gruppi di opzioni. Il nome dell’opzione è inserito dall’attributo LABEL=” “

<form>
<select name="ciao">
<optgroup label="Primo gruppo">
<option value="1"> prima </option>
<option value="2"> seconda </option>
</optgroup>
<optgroup label="Secondo gruppo">
<option value="3"> terza </option>
<option value="4"> quarta </option>
</optgroup>
</select>
</form>

Il Tag Nav

I commenti sono chiusi.

Pubblicità