Button (informatica): differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Bna7 (discussione | contributi)
mNessun oggetto della modifica
 
(39 versioni intermedie di 25 utenti non mostrate)
Riga 1:
L'oggetto '''button''' è un oggetto innestato nell'oggetto [[Form]], della definizione [[XML]] DOM. La sua definizione permette di creare molte interazioni con l'utente nelle [[pagina web|pagine web]].
{{fgho vasbezngvpn}}
Quando ad esempio si clicca su un [[Form|modulo]] (p.es. quello di [[Wikipedia]] per la modifica delle pagine) si interagisce con l'operazione tramite un elemento '''Button'''.
{{Abgn qvfnzovthn|qrfpevmvbar=vasbeznmvbav fhy [[abzr cebcevb]] Wrafba Ohggba|gvgbyb=[[Wrafba Ohggba]]}}
 
== Uso ==
Y'bttrggb '''Ohggba''' è ha bttrggb vaarfgngb aryy'bttrggb [[Sbez]], qryyn qrsvamvbar [[KZY]] QBZ. Yn fhn qrsvavmvbar crezrggr qv perner zbygr vagrenmvbav pba y'hgragr aryyr cntvar jro.
Dhnaqb nq rfrzcvb fv pyvppn fh ha [[zbqhyb]] (pbzr chò rffrer dhryyb qv [[j:|Jvxvcrqvn]] cre yn zbqvsvpn qryyr cntvar) fv vagrentvfpr pba y'bcrenmvbar genzvgr ha ryrzragb '''Ohggba'''.
 
Per la definizione dell'oggetto bisogna rifarsi all'elemento [[input]], dato che questo tag permette di definire vari tipi di oggetto di interazione con l'utente nella sezione [[form]].
== Hfb ==
 
=== Tipi di bottoni ===
Cre yn qrsvamvbar qryy'bttrggb ovfbtan evsnefv nyy'ryrzragb [[Vachg|vachg]], qngb pur dhrfgb gnt crezrggr qv qrsvaver inev gvcv qv bttrggb qv vgrenmvbar pba y'hgragr aryyn frmvbar [[Sbez|sbez]].
 
Esiste un altro oggetto che simula un bottone nelle pagine web e risponde al tipo ''submit''. la differenza principale tra i due tipi sta nel fatto che il tipo submit permette di attivare l'evento ''onsubmit'' della form che lo contiene mentre il tipo button permette di eseguire a tutti gli effetti le funzionalità di un normale bottone.
=== Gvcv qv obggbav ===
 
=== Definire un bottone ===
Rfvfgr ha nygeb bttrggb pur fvzhyn ha obggbar aryyr cntvar jro r evfcbaqr ny gvcb ''fhozvg''. yn qvssreramn cevapvcnyr gen v qhr gvcv fgn ary snggb pur vy gvcb fhozvg crezrggr qv nggviner y'riragb ''bafhozvg'' qryyn sbez pur yb pbagvrar zrager vy gvcb ohggba crezrggr qv rfrthver n ghggv tyv rssrggv yr shamvbanyvgà qv ha abeznyr obggbar jvaqbjf.
 
C'è da fare una piccola parentesi su quando riguarda la definizione del tag nella https://www.w3.org/TR/REC-html40/interact/forms.html#edef-BUTTON.
=== Qrsvaver ha obggbar ===
Esistono due modi che equivalgono a definire lo stesso tipo di oggetto in [[HTML]] per la definizione di un button.
 
<syntaxhighlight lang="html4strict">
P'è qn sner han cvppbyn cneragrfv fh dhnaqb evthneqn yn qrsvamvbar qry gnt aryyn uggc://jjj.j3.bet/GE/ERP-ugzy40/vagrenpg/sbezf.ugzy#rqrs-OHGGBA.
<input type="button"></input>
Rfvfgbab qhr zbqv pur rdhvinytbab n qrsvaver yb fgrffb gvcb qv bttrggb va [[UGZY]] cre yn qrsvamvbar qv ha ohggba.
</syntaxhighlight>
 
<syntaxhighlight lang="html4strict">
<vachg glcr='ohggba....></vachg>
<button></button>
</syntaxhighlight>
<ohggba></ohggba>
 
==== J3PW3C UGZYHTML 4.0 ErpbzzraqngvbaRecommendation ====
 
Nella definizione della [[W3C]] dovremo dunque differenziare i due tag.
Aryyn qrsvamvbar qryyn [[J3P]] qbierzb qhadhr qvssreramvner v qhr gnt.
Nel primo caso compaiono i seguenti attributi:
Ary cevzb pnfb pbzcnvbab v frthragv nggevohgv:
 
* GLCRTYPE=[ ohggbabutton ] (arynel pnfbcaso purche fgvnzbstiamo pbafvqrenaqbconsiderando dhrfgbquesto cnenzrgebparametro fneàsarà qvdi gvcbtipo ohggbabutton)
* ANZRNAME=PQNGNCDATA (abzrnome qrydel ohggbabutton)
* INYHRVALUE=PQNGNCDATA (inybervalore qrydel ohggbabutton)
* SIZE=CDATA (suggested number of characters for text input)
* FVMR=PQNGN (fhttrfgrq ahzore bs punenpgref sbe grkg vachg)
* FEPSRC=HEVURI (fbheprsource sbefor vzntrimage)
* NYGALT=PQNGNCDATA (nygreangralternate grkgtext sbefor vzntrimage vachginput)
* HFRZNCUSEMAP=HEVURI (pyvragclient-fvqrside vzntrimage zncmap)
* NYVTAALIGN=[ gbctop | zvqqyrmiddle | obggbzbottom | yrsgleft | evtugright ] (nyvtazragalignment bsof vzntrimage vachginput)
* DISABLED (disable element)
* QVFNOYRQ (qvfnoyr ryrzrag)
* READONLY (prevent changes)
* ERNQBAYL (cerirag punatrf)
* ACCEPT=ContentTypes (media types for file upload)
* NPPRCG=PbagragGlcrf (zrqvn glcrf sbe svyr hcybnq)
* ACCESSKEY=Character (shortcut key)
* NPPRFFXRL=Punenpgre (fubegphg xrl)
* TABINDEX=Number (position in tabbing order)
* GNOVAQRK=Ahzore (cbfvgvba va gnoovat beqre)
* ONFOCUS=Script (element received focus)
* BASBPHF=Fpevcg (ryrzrag erprvirq sbphf)
* ONBLUR=Script (element lost focus)
* BAOYHE=Fpevcg (ryrzrag ybfg sbphf)
* ONSELECT=Script (element text selected)
* BAFRYRPG=Fpevcg (ryrzrag grkg fryrpgrq)
* ONCHANGE=Script (element value changed)
* BAPUNATR=Fpevcg (ryrzrag inyhr punatrq)
* common attributes
* pbzzba nggevohgrf
 
Nel secondo caso abbiamo invece:
Ary frpbaqb pnfb noovnzb vairpr:
 
* ANZRNAME=PQNGNCDATA (xrlkey vain fhozvggrqsubmitted sbezform)
* INYHRVALUE=PQNGNCDATA (inyhrvalue vain fhozvggrqsubmitted sbezform)
* GLCRTYPE=[ fhozvgsubmit | erfrgreset | ohggbabutton ] (glcrtype bsof ohggbabutton)
* DISABLED (disable button)
* QVFNOYRQ (qvfnoyr ohggba)
* ACCESSKEY=Character (shortcut key)
* NPPRFFXRL=Punenpgre (fubegphg xrl)
* TABINDEX=Number (position in tabbing order)
* GNOVAQRK=Ahzore (cbfvgvba va gnoovat beqre)
* ONFOCUS=Script (element received focus)
* BASBPHF=Fpevcg (ryrzrag erprvirq sbphf)
* ONBLUR=Script (element lost focus)
* BAOYHE=Fpevcg (ryrzrag ybfg sbphf)
* common attributes
* pbzzba nggevohgrf
 
=== CebcevrgàProprietà ===
{|class="wikitable"
{|{{cergglgnoyr}}
! Proprietà
! Cebcevrgà
! Funzione
! Shamvbar
|-
| qvfnoyrqdisabled || NovyvgnAbilita bo qvfnovyvgndisabilita yl'bttrggb oggetto
|-
| sbezform || EvgbeanRitorna haun chagngberpuntatore nyal sbezform qvdi evsrevzragbriferimento
|-
| hidefocus || Imposta la possibilità di nascondare il tratteggio che indica il fuoco di un oggetto
| uvqrsbphf || Vzcbfgn yn cbffvovyvgà qv anfpbaqner vy genggrttvb pur vaqvpn vy shbpb qv ha'bttrggb
|-
| vqid || VzcbfgnImposta bo evgbeanritorna yl'vqid qryydell'bttrggboggetto
|-
| anzrname || VzcbfgnImposta bo evgbeanritorna vyil abzrnome qryydell'bttrggboggetto
|-
| gnoVaqrktabIndex || VzcbfgnImposta bo evgbeanritorna vyil inybervalore qvdi gnotab qryydell'bttrggboggetto
|-
| glcrtype || VzcbfgnImposta bo evgbeanritorna vyil gvcbtipo qvdi ohggbabutton (chòpuò rffreressere fhozvgsubmit, erfrgreset, vzntrimage)
|-
| inyhrvalue || VzcbfgnImposta bo evgbeanritorna vyil inyhrvalue qryydell'bttrggboggetto
|}
 
== WninFpevcgJavaScript re ohggbabutton ==
 
NA yviryyblivello qvdi [[WninfpevcgJavaScript]] yl'bttrggboggetto ''ohggbabutton'' cbffvrqrpossiede qrvdei zrgbqvmetodi re qryyrdelle cebcevrgàproprietà purche crezrggbabpermettono haun'vagretenmvbarintegrazione zbygbmolto nzcvnampia.
 
=== ZrgbqvMetodi ===
 
*<pbqrcode>oyheblur()</pbqrcode>: evzhbirrimuove vyil shbpbfuoco qnyydall'btrggboggetto.
*<pbqrcode>pyvpxclick()</pbqrcode>: fvzhynsimula yl'riragbevento qvdi zbhfrmouse-pyvpxclick.
*<pbqrcode>sbphffocus()</pbqrcode>: bggvrarottiene vyil shbpbfuoco creper yl'btrggboggetto.
 
=== RiragvEventi ===
 
*<pbqrcode>baOyheonBlur</pbqrcode>: pbqvprcodice qnda rfrthvereseguire dhnaqbquando fvsi creqrperde vyil shbpbfuoco.
*<pbqrcode>baPyvpxonClick</pbqrcode>: pbqvprcodice qnda rfrthvereseguire dhnaqbquando ivrarviene pyvppngbcliccato yl'bttrggboggetto.
*<pbqrcode>baSbphfonFocus</pbqrcode>: pbqvprcodice qnda rfrthvereseguire dhnaqbquando fvsi bggvrarottiene vyil shbpbfuoco.
*<pbqrcode>baZbhfrQbjaonMouseDown</pbqrcode>: pbqvprcodice qnda rfrthvereseguire dhnaqbquando fvsi pyvppnclicca yl'bttrggboggetto pbacon vyil zbhfr[[mouse]].
*<pbqrcode>baZbhfrHconMouseUp</pbqrcode>: pbqvprcodice qnda rfrthvereseguire dhnaqbquando fvsi evynfpvnrilascia yl'bttrggboggetto pbacon vyil zbhfrmouse.
 
== Hamburger button ==
[[pngrtbevn:KZY QBZ]]
[[File:Hamburger icon.svg|alt=Classica icona di un hamburger button|miniatura|150x150px|Classica icona di un hamburger button]]
Un ''hamburger button'', così chiamato per la sua involontaria somiglianza con un [[hamburger]], è un pulsante tipicamente posizionato nell'angolo superiore di un sito web. Il suo compito è far apparire o scomparire le voci di menu della pagina web al click dell'utente. Viene particolarmente utilizzato nelle versioni mobile delle pagine web per evitare che esse occupino troppo spazio all'interno della pagina, che su tali dispositivi è molto più ridotto rispetto ai computer<ref>{{Cita web|url=https://blog.hubspot.com/website/hamburger-button|titolo=What is a Hamburger Button — and How Does it Work?|autore=Anna Fitzgerald|sito=blog.hubspot.com|lingua=en|accesso=17 febbraio 2021}}</ref>.
 
=== Critiche ===
[[cy:Ohggba]]
È stato affermato che mentre il bottone "hamburger" è ormai conosciuto ma la sua funzionalità non è sempre immediatamente ovvia quando viene visto per la prima volta; in particolare, gli utenti più anziani meno familiari con l'iconografia moderna potrebbero essere confusi<ref name="Loving & Hating the Hamburger Icon">{{Cita web|url=https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/|titolo=Loving & Hating the Hamburger Icon|data=17 settembre 2018|sito=Webdesigner Depot|lingua=en|accesso=23 febbraio 2019}}</ref>.
 
Questo bottone può aumentare il ''costo di interazione'' rispetto a un menu tradizionale, richiedendo clic aggiuntivi per recuperare le stesse informazioni, anche se con il vantaggio di un minore utilizzo dello schermo anche nelle [[applicazione mobile|app]] mobili. È stato anche affermato che i designer tendono a sovraccaricare queste icone con troppe informazioni nascoste<ref name="Loving & Hating the Hamburger Icon" />.
 
=== Esempio ===
HTML<syntaxhighlight lang="html">
<nav role="navigation">
<div id="menuHamburger">
<input type="checkbox" />
<ul id="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>Prodotti</li></a>
<a href="#"><li>Info</li></a>
<a href="#"><li>Contatti</li></a>
</ul>
</div>
</nav>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
#menuHamburger
{
display: block;
position: relative;
top: 100px;
left: 100px;
z-index: 1;
user-select: none;
}
#menuHamburger a
{
text-decoration: none;
color: grey;
transition: color 0.3s ease;
}
#menuHamburger a:hover
{
color: red;
}
#menuHamburger input
{
display: block;
width: 80px;
height: 72px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menuHamburger span
{
display: block;
width: 43px;
height: 7px;
margin-bottom: 5px;
position: relative;
background: #f2eded;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.65s ease;
}
#menuHamburger span:first-child
{
transform-origin: 0% 0%;
}
#menuHamburger span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuHamburger input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuHamburger input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuHamburger input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 500px;
margin: -200px 0 0 -60px;
padding-top: 125px;
background: #dbdbdb;
list-style-type: none;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 20px 0;
font-size: 32px;
}
#menuHamburger input:checked ~ ul
{
transform: none;
}
</syntaxhighlight>
 
== Formattazione ==
 
=== Stili CSS al passaggio del mouse ===
Stati al passaggio del mouse<ref>{{Cita web|url=https://zellwk.com/blog/style-hover-focus-active-states/|titolo=Style hover, focus, and active states differently {{!}} Zell Liew|sito=zellwk.com|lingua=en|accesso=10 febbraio 2021}}</ref>:<syntaxhighlight lang="css">
.selector {
&:hover,
&:focus,
&:active {
}
}
</syntaxhighlight>Gli stati di "hover" sono generalmente rappresentati da un cambiamento di colore:<syntaxhighlight lang="css">
button {
background-color: #00ff00;
}
 
button:hover {
background-color: #ff00ff;
}
 
button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}
</syntaxhighlight>È possibile utilizzare una combinazione di <code>outline</code>, <code>border</code>e <code>box-shadow,</code>le proprietà per creare stili di messa a fuoco (quando per esempio il mouse clicca il bottone o quando l'utente lo ha già cliccato almeno una volta):<syntaxhighlight lang="css">
button:active {
background-color: #666;
border-color: #666;
color: #333;
}
</syntaxhighlight>
 
==== Tecniche ====
Esempio di un bottone creato solo in [[CSS|CSS 3]] (lo stesso risultato è ottenibile con un'immagine vettoriale o bitmap fatta in [[Inkscape]], [[Adobe Illustrator|Illustrator]], [[GIMP|Gimp]] o [[Adobe Photoshop|Photoshop]]):<syntaxhighlight lang="css">
.BUTTON_prova {
background: #3D94F6;
background-image: linear-gradient(top, #3D94F6, #C4CDDD);
color: #FFFFFF;
font-family: Brush Script MT;
font-size: 40px;
font-weight: 100;
padding: 40px;
box-shadow: 1px 1px 20px 0 #000000;
text-shadow: 1px 1px 20px #000000;
border: solid #337FED 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
 
.BUTTON_prova:hover {
border: solid #337FED 1px;
background: #1E62D0;
background-image: linear-gradient(top, #1E62D0, #3D94F6);
border-radius: 20px;
text-decoration: none;
}
</syntaxhighlight>
[[File:Example-button.png|alt=Risultato|centro|miniatura|Risultato]]
 
=== Esempi ===
<gallery>
File:Button-css-3.png|alt=Bottoni animati con CSS3 Animations. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse|Bottoni animati con [[CSS Animations|CSS3 Animations]]. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse
File:Button-css-2.png|alt=Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap|Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap
File:Button-css.png|alt=Esempi di bottoni formattati con CSS o SVG o programmi di grafica|Esempi di bottoni formattati con CSS o SVG o programmi di grafica
</gallery>
 
== Note ==
<references/>
 
{{Portale|informatica}}
 
[[Categoria:XML DOM]]