Form in HTML

Vediamo come si compila un form nel linguaggio html.

Iniziamo a definire il tag come un blocco, quindi avrà la sintassi:
           
<form>...<form>



Il tag form ha come attributi principali tre tipi diversi:

  • method: specifica il metodo di invio dei dati ed accetta i valori get o post;
  • action: specifica il tipo di script che riceverà ed elaborerà i dati;
  • target: specifica se il frutto dell'elaborazione verrà mostrata nella stessa finestra o in un altra;




TAG per creare moduli

Una volta che abbiamo dichiarato il form bisogna inserire i tag al suo interno per formarlo e dargli le caratteristiche a seconda delle nostre esigenze.

“name” serve per indicare il nome del form, “action” indica l’URL del programma o della pagina dirisposta che processerà i dati.

Questi tag sono:


  • name: serve per indicare il nome del form: datidelform / iscrizione / ecc...
  • action: indica l'URL del programma o della pagina che processerà i dati;
  • input: genera gran parte degli elementi del form, a seconda del type specificato;
  • select: crea una casella di riepilogo a scorrimento (detta selectbox);







INPUT


E' il principale tag dei form, gli input più utilizzati sono i seguenti:

  • text: è la casella di testo su una singola linea;
  • file: per caricare i file, cioè caselle di selezione di file locale al fine di poterli trasmettere al server remoto;
  • radio: gruppo di opzioni al cui interno deve essere fatta una scelta, non multipla;
  • checkbox: gruppo di opzioni al cui interno deve essere fatta una scelta, anche multipla;
  • textarea: dove poter inserire testi piuttosto lunghi;
  • button: si può creare dei bottoni neutri al quale associare dei javascript;
  • image: permette di inserire immagini attive, come bottoni;
  • reset: bottone che serve per resettare il form;
  • submit: è il bottone con il quale viene processato il form;




ACTION

Rappresenta il principale scoglio nella realizzazione del form, tuttavia grazie al Form & PHP/MySQL Generator è possibile realizzarli in maniera gratuita e online.





Esempio generale

Per vedere quello che abbiamo già detto, e come funziona, inseriamo il codice: 


             
<form method="post" action="esegui.php">

<!-- CASELLE DI TESTO -->
   Nome<br>
   <input type="text" name="nome"><br>
   Cognome<br>
   <input type="text" name="cognome"><br>

<!-- SELECTBOX -->
   Paese<br>
   <select name="paese">
   <option value="I">Italia</option>
   <option value="E">Estero</option>
</select><br>

<!-- RADIO -->
   Sesso<br>
   <input type="radio" name="sesso" value="M"> M<br>
   <input type="radio" name="sesso" value="F"> F<br>

<!-- CHECKBOX -->
   Hobby<br>
   <input type="checkbox" name="hobby" value="S"> Sport<br>
   <input type="checkbox" name="hobby" value="L"> Lettura<br>
   <input type="checkbox" name="hobby" value="C"> Cinema<br>
   <input type="checkbox" name="hobby" value="I"> Internet<br>

<!-- TEXTAREA -->
   Commento<br>
   <textarea name="commento" rows="5" cols="30"></textarea>
<br><br>

<!-- SUBMIT -->
<input type="submit" name="invia" value="Invia i dati">

</form>

Che non avendo specificato nessun tipo codice CSS del nostre form, diventa:



Nome

Cognome

Paese

Sesso
M
F
Hobby
Sport
Lettura
Cinema
Internet
Commento


Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...