HTML: tipi di form checkbox, radio, select, file, hidden

un Web designer ha a disposizione altri tipi di FORM che permettono di creare interfacce dove l'utente puo operare delle scelte di dati.

CHECKBOX consente all'utente di fare delle scelte multiple. Si possono rendere delle scelte selezionate di default con l' attributo CHECKED o renderle non selezionabili con DISABLED

<form action="prova">
	Linguaggi conosciuti
	<br><br>

	<input type="checkbox" name="html" value="html"/> html
	<br />

	<input type="checkbox" name="css" value="css" checked="checked"/> css
	<br />

	<input type="checkbox" name="javascript" value="javascript" disabled="disabled"/> JavaScript
</form>
Linguaggi conosciuti

html
css
JavaScript

 

RADIO BUTTON permettono all'utente una scelta dei dati esclusiva,possono essere assegnati dei valori selezionati di default con CHECKED o disabilitarli con DISABLED

<form action="prova">
Fai una scelta<
	
        1 <input type="radio" name="linguaggio" value="1" /><
	
        2  <input type="radio" name="linguaggio" value="2"/><
	
        3 <input type="radio" name="linguaggio" value="3" disabled="disabled"/><

	4 <input type="radio" name="linguaggio" value="4" checked="checked" />
</form>
Fai una scelta
1
2
3
4  

 

SELECT permette di fare delle scelte esclusive o delle scelte multiple da il classico  menù a tendina. Le varie opzioni vengono inserite all'interno del TAG <OPTION>, che possiede gli attributi:

  • SELECTED per indicare il campo visualizzabile come primo di default (opzionale);
     
  • VALUE che indica il dato che sarà inviato dal FORM e puo essere diverso dall' etichetta inserita tra il TAG OPTION
<form>
Scelte da fare:
  <select name="siti" >
    <option value="1">scelta 1 </option>
    <option value="2"  selected="selected">scelta 2</option>
    <option value="3">scelta 3</option>
   </select>
</form> 
Scelte da fare:

Con il TAG <OPTGROUP> è possibile raggruppare ed ordinare le opzioni in sottogruppi:

<form action="">
  <select name="siti">
    <optgroup label="Scelte da fare A">
       <option value="1">1</option>
       <option value="2>2</option>
       <option value="3">3</option>
    </optgroup>
    <optgroup label="Scelte da fare B">
       <option value="1">1</option>
       <option value="2">3</option>
    </optgroup>
  </select>
</form>

 

Campo FILE: questo campo consente di inviare una file ad una pagina web programmata per riceverlo e manipolarlo, per esempio scriverlo su un server o scriverne il nome su un database

	<form action=>prova>
	 <input name=”fileUtente” type=”file” size=”20″>
	</form>
 

 

Campo HIDDEN: se abbiamo bisogno di inviare dei valori non visibili direttamente all&#39; utente, possiamo usare questo campo:

<input type=”hidden” name=”urlDiProvenienza” value=”http://www.webgab.eu”>