HTML.it logo
Learn
  • Design
    • Grafica
    • User Interface Design
    • Adobe Creative Suite
    Guide
    Approfondimenti
    Faq
    Notizie
    Tutto in Design >
  • Development
    • .NET
    • ASP
    • CMS
    • Flash
    • Java
    • JavaScript
    • PHP
    • Essentials
    • Ruby
    • XML
    • Editor
    • CSS
    • HTML
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Development >
  • Mobile
    • Android Studio
    • Cordova
    • Eclipse
    • Objective C
    • Swift
    Guide
    Approfondimenti
    Script
    Faq
    Notizie
    Tutto in Mobile >
  • Server
    • Cloud
    • Database
    • OS
    • Sicurezza
    • Network
    Tutto in Server >
  • Digital Marketing
    • SEO
    • Affiliate Marketing
    • Social Media Marketing
    Tutto in Digital Marketing >
  • Makers
    • Arduino
    • RaspberryPi
    • Stampa 3D
    Guide
    Approfondimenti
    Notizie
    Tutto in Makers >
  • Game Design
    • Unity
    Guide
    Approfondimenti
    Notizie
    Tutto in Game Design >
Download
  • Audio e Video
    • Player Audio Video
    • Codec audio
    • Editor audio video
    • Masterizzazione
    • Ripper e Convertitori
    • Speech
    Tutto in Audio e Video >
  • Educazione
    • Bambini
    • Cucina
    • Salute e Benessere
    • Istruzione
    Tutto in Educazione >
  • Giochi
    • Arcade
    • Avventura
    • Azione
    • Board
    • Carte
    • Giochi di ruolo
    • Giochi Online
    • Puzzle e Enigmistica
    • Simulazione
    • Sparatutto
    • Sport
    • Strategia e Giochi di Guerra
    • Tempo Libero
    Tutto in Giochi >
  • Grafica
    • Accessori & Mappe
    • Animazione
    • CAD – 3D
    • Cattura schermo
    • Convertitori e ridimensionatori
    • Editor
    • Flash
    • Font
    • Fotoritocco
    • Gallerie e album
    • Icone e loghi
    • Visualizzatori
    Tutto in Grafica >
  • Internet
    • Browser
    • Chat e IM
    • eMail
    • Estensioni & Temi
    • FTP
    • Network
    • News e RSS
    • Peer to Peer
    • Webcam
    Tutto in Internet >
  • Programmazione
    • Accessori
    • CMS e E-Commerce
    • Editor e Compilatori
    • Editor e strumenti Web
    • Linguaggi
    Tutto in Programmazione >
  • Sicurezza
    • Antispam
    • Antispyware
    • Antivirus
    • Server
    Tutto in Sicurezza >
  • Produttività
    • Backup
    • Compressione
    • Connettività
    • Database
    • Fax e Telefonia
    • Gestione disco
    • Ottimizzazione
    • Ufficio
    • Utilità di Sistema
    Tutto in Produttività >
Notizie
Video
Forum
in  
Trend
JavaScriptPHPHTMLLinguaggio CPythonDigital MarketingProgrammazioneWordPressJavaGame Design
INDICE DELLA GUIDA
Primi passi
  1. 1 Introduzione all'HTML

  2. 2 Hello HTML! Creare la prima pagina

Strumenti
  1. 3 Strumenti di sviluppo, l'editor

  2. 4 Il Browser, che cos'è, come e perché tenerne conto

  3. 5 Software per immagini nelle pagine HTML

Elementi per il testo in HTML
  1. 6 Elementi e tag in HTML

  2. 7 Gli attributi

  3. 8 Titoli, paragrafi e testi

  4. 9 Grassetti e corsivi

  5. 10 Citazioni, acronimi, codice e altri elementi per il testo

  6. 11 Commenti in HTML

  7. 12 Elenchi puntati e numerati

  8. 13 Tabella: struttura di base

  9. 14 Raggruppare celle con rowspan e colspan

Ipertesti ed elementi multimediali
  1. 15 I link in HTML, l'ipertesto

  2. 16 I percorsi assoluti e relativi

  3. 17 I link interni o ancore

  4. 18 Gli attributi dei link

  5. 19 Inserire le immagini

  6. 20 Img src, inserire le immagini nel markup (base64, SVG)

  7. 21 Includere un file Audio

  8. 22 Includere un file Video

L’HTML e i fogli di stile (CSS)
  1. 23 Separare il layout dal contenuto

Lo sfondo di un documento HTML – edizione precedente
  1. 24 Impostare il colore di sfondo

  2. 25 Inserire un'immagine di sfondo

  3. 26 Eliminare i margini delle pagine

  4. 27 Approfondimenti: lo sfondo con i CSS

Il testo di un documento HTML – edizione precedente
  1. 28 Impostare il colore del testo e dei link per tutta la pagina

  2. 29 Scegliere il font del testo

  3. 30 Scegliere il colore del testo

Le immagini e le mappe di immagine – edizione precedente
  1. 31 Disporre le immagini in un contesto

  2. 32 Le mappe di immagine

  3. 33 Le mappe di immagine lato server

Le tabelle – edizione precedente
  1. 34 Attributi del tag table

  2. 35 Attributi di <table>, <tr>, <td>

  3. 36 Impaginare un layout con le tabelle

I Frame – edizione precedente
  1. 37 Comporre una pagina in frame

  2. 38 Attributi dei frames per la visualizzazione

  3. 39 I link in un frameset e il tag noframes

  4. 40 L'iframe

  5. 41 Vantaggi e svantaggi dei frames

  6. 42 Impaginare a livelli con i CSS

I Moduli (forms) – edizione precedente
  1. 43 Struttura del tag <form>

  2. 44 Un po' d'ordine: raggruppare i moduli

  3. 45 Il tag Input

  4. 46 I bottoni (sumbit, reset, button, image)

  5. 47 Inserire testo (campo testo, textarea, password)

  6. lezione
    48 di 58

    Consentire delle scelte (checkbox, radio, select)

  7. 49 Altri campi (file e hidden)

  8. 50 Approfondimenti sui form

Includere elementi multimediali e script – edizione precedente
  1. 51 Premessa: il tag object

  2. 52 Includere un file Flash

  3. 53 Includere un file Java

  4. 54 Includere script JavaScript o CSS esterni

Linguaggi e strumenti – edizione precedente
  1. 55 I meta tag

  2. 56 Il DOCTYPE (DTD)

  3. 57 Configurare un programma FTP

  4. 58 Conclusioni

  • Learn
  • Guida HTML
  • Consentire delle scelte (checkbox, radio, select)
lezione
48 di 58

Consentire delle scelte (checkbox, radio, select)

  • di Wolfgang Cecchin
  • 17 Marzo 2006

In questa lezione esaminiamo alcuni dei componenti di base per creare interfacce utente, in particolare vediamo quegli elementi che permettono agli utenti di effettuare delle scelte tra valori preimpostati.

Checkbox

Con le checkbox possiamo consentire all’utente di operare delle scelte multiple. Ad esempio:


<form action="">
<fieldset>
<legend>Linguaggi conosciuti</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>

che produce:

Linguaggi conosciuti

html

css

JavaScript

Si possono anche selezionare uno o più valori che vengono spuntati di default, grazie all’attributo checked:


<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Ecco il risultato:

Inoltre, grazie all’attibuto disabled possiamo rendere una casella non accessibile:


<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

cioè:

Radio button

I radio button (“bottoni circolari”) invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:


<form action="">
<fieldset>
<legend>Linguaggi conosciuti</legend>
HTML <input type="radio" name="linguaggio" value="html"/>
CSS <input type="radio" name="linguaggio" value="css"/>
JavaScript <input type="radio" name="linguaggio" value="javascript"/>
</fieldset>
</form>

che viene così visualizzato:

Linguaggi conosciuti

HTML CSS JavaScript

Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante.


<form action="">
<input type="radio" name="linguaggio" value="html" checked="checked" disabled="disabled"/>
</form>

cioè:

Menu di opzioni (select)

Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all’interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attravero l’attributo “value”. Con l’attributo “selected” si può indicare una scelta predefinita:


<form>
<fieldset>
<legend>Siti per webmaster</legend>
<select name="siti" >
<option value="http://www.html.it" selected="selected">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
</select>
</fieldset>
</form>

che da luogo a:

Siti per webmaseter

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell’HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette. Ecco l’esempio:


HTML.itJavaScript HTML.itCSS HTML.it
font.html.itcgipoint.html.it

che dà luogo al seguente menu:

font.html.itcgipoint.html.it

Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l’attributo “multiple” l’aspetto del tag select cambia notevolmente:


<form action="">
<label>Quale siti visiti?<br>
<select name="siti" multiple="multiple">
<option value="http://www.html.it">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
<option value="http://font.html.it">font.html.it </option>
<option value="http://cgipoint.html.it" >cgipoint.html.it </option>
</select>
</label>
</form>

cioè:

Utilizzando il tasto CTRL l’utente può così effettuare delle scelte multiple.

Tramite l’attributo “size” si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l’altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.


<form action="">
<label>Quale siti visiti?<br>
<select name="siti" size="5" multiple="multiple">
<option value="http://www.html.it">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
<option value="http://font.html.it">font.html.it </option>
<option value="http://cgipoint.html.it" >cgipoint.html.it </option>
</select>
</label>
</form>

che viene così visualizzato:

>> Scopri come personalizzare Chekbox e Radio Buttons con i CSS

Se vuoi aggiornamenti su Consentire delle scelte (checkbox, radio, select) inserisci la tua e-mail nel box qui sotto:

Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi:

49 / 58

Altri campi (file e hidden)

Ultime notizie

ThisPersonDoesNotExist: generatore automatico di volti realistici

Microsoft: disattivare Windows Defender non risolve i problemi di WSL

Python 3.8 su Fedora 31?

Copyright: cosa prevede (veramente) la Direttiva

Red Hat: basta con MongoDB, largo a PostgreSQL

I Video di HTML.it

Daniele Pagani: le novità di Nokia per sviluppatori

Percorsi formativi correlati
Android Mobile Developer

Android Mobile Developer

5
guide
250 ore

Tutti i linguaggi per diventare uno sviluppatore di app per Android.

DB Administrator

DB Administrator

4
guide
80 ore

Come creare applicazioni per il Web con PHP e MySQL per il DBMS.

iOS Mobile Developer

iOS Mobile Developer

4
guide
180 ore

Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.

Java Developer

Java Developer

7
guide
300 ore

I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.

Java Security Expert

Java Security Expert

5
guide
120 ore

Diventare degli esperti in tema di sicurezza delle applicazioni Java.

Maker

Maker

2
guide
50 ore

Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.

NoSQL DB Expert

NoSQL DB Expert

5
guide
200 ore

Le principali guide di HTML.it per diventare un esperto dei database NoSQL.

PHP Cloud Developer

PHP Cloud Developer

7
guide
80 ore

Ecco come i professionisti creano applicazioni per il Cloud con PHP.

PHP Developer

PHP Developer

5
guide
100 ore

Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.

PHP e JavaScript Developer

PHP e JavaScript Developer

6
guide
100 ore

Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.

PHP Framework Expert

PHP Framework Expert

6
guide
120 ore

Realizzare applicazioni per il Web utilizzando i framework PHP.

PHP SysAdmin

PHP SysAdmin

6
guide
80 ore

Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.

Sviluppare un eCommerce con PHP

Sviluppare un eCommerce con PHP

5
guide
120 ore

Fare gli eCommerce developer con Magento, Prestashop e WooCommerce.

Web &amp; Mobile Designer

Web & Mobile Designer

5
guide
300 ore

Percorso base per avvicinarsi al web design con un occhio al mobile.

WordPress Developer

WordPress Developer

5
guide
150 ore

Realizzare siti Web e Web application con WordPress a livello professionale.

Ti consigliamo anche

Autodesk Maya, creare modelli 3D per i videogiochi

  • 3 Lezioni
  • Facile

Una guida per iniziare i primi passi all’interno di Autodesk Maya, il software di riferimento per l’animazione e la modellazione 3D, impiegato come standard anche all’interno dell’industria dei videogiochi. La guida permetterà di conoscere i comandi base e iniziare a creare i primi asset spendibili all’interno di un gioco 3D.

  • Canva: guida alla grafica social
  • Gravit: biglietto di San Valentino con grafica vettoriale

HeidiSQL: amministrare un database in tutta comodità

HeidiSQL è un tool per gestire e amministrare i database. Può operare su database di vario, da MySQL a MariaDB, passando per PostgreSQL ed SQL Server.

  • SQL: sempre lo stesso, sempre utile
  • MySQL: gestione semplificata con Sequel Pro

ThisPersonDoesNotExist: generatore automatico di volti realistici

Microsoft: disattivare Windows Defender non risolve i problemi di WSL

Python 3.8 su Fedora 31?

  • Guide
  • Approfondimenti
  • Script
  • Q&A
  • Software
  • Tutorial
  • Videogiochi
  • Tag Software
  • News
  • Video
  • Forum
  • Chi siamo
  • Pubblicità
  • Contatti
  • Cookie policy
  • Privacy policy
  • Privacy Policy Newsletter
© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.9.5