Button (informatica)

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 pagine web. Quando ad esempio si clicca su un modulo (p.es. quello di Wikipedia per la modifica delle pagine) si interagisce con l'operazione tramite un elemento Button.

Uso

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.

Tipi di bottoni

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.

Definire un bottone

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. Esistono due modi che equivalgono a definire lo stesso tipo di oggetto in HTML per la definizione di un button.

  <input type="button"></input>

  <button></button>

W3C HTML 4.0 Recommendation

Nella definizione della W3C dovremo dunque differenziare i due tag. Nel primo caso compaiono i seguenti attributi:

TYPE=[ button ] (nel caso che stiamo considerando questo parametro sarà di tipo button)
NAME=CDATA (nome del button)
VALUE=CDATA (valore del button)
SIZE=CDATA (suggested number of characters for text input)
SRC=URI (source for image)
ALT=CDATA (alternate text for image input)
USEMAP=URI (client-side image map)
ALIGN=[ top | middle | bottom | left | right ] (alignment of image input)
DISABLED (disable element)
READONLY (prevent changes)
ACCEPT=ContentTypes (media types for file upload)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
ONSELECT=Script (element text selected)
ONCHANGE=Script (element value changed)
common attributes

Nel secondo caso abbiamo invece:

NAME=CDATA (key in submitted form)
VALUE=CDATA (value in submitted form)
TYPE=[ submit | reset | button ] (type of button)
DISABLED (disable button)
ACCESSKEY=Character (shortcut key)
TABINDEX=Number (position in tabbing order)
ONFOCUS=Script (element received focus)
ONBLUR=Script (element lost focus)
common attributes

Proprietà

Proprietà	Funzione
disabled	Abilita o disabilita l'oggetto
form	Ritorna un puntatore al form di riferimento
hidefocus	Imposta la possibilità di nascondare il tratteggio che indica il fuoco di un oggetto
id	Imposta o ritorna l'id dell'oggetto
name	Imposta o ritorna il nome dell'oggetto
tabIndex	Imposta o ritorna il valore di tab dell'oggetto
type	Imposta o ritorna il tipo di button (può essere submit, reset, image)
value	Imposta o ritorna il value dell'oggetto

JavaScript e button

A livello di JavaScript l'oggetto button possiede dei metodi e delle proprietà che permettono un'integrazione molto ampia.

Metodi

blur(): rimuove il fuoco dall'oggetto.
click(): simula l'evento di mouse-click.
focus(): ottiene il fuoco per l'oggetto.

Eventi

onBlur: codice da eseguire quando si perde il fuoco.
onClick: codice da eseguire quando viene cliccato l'oggetto.
onFocus: codice da eseguire quando si ottiene il fuoco.
onMouseDown: codice da eseguire quando si clicca l'oggetto con il mouse.
onMouseUp: codice da eseguire quando si rilascia l'oggetto con il mouse.

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^[1].

Critiche

È 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^[2].

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 app mobili. È stato anche affermato che i designer tendono a sovraccaricare queste icone con troppe informazioni nascoste^[2].

Esempio

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>

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;
}

Formattazione

Stili CSS al passaggio del mouse

Stati al passaggio del mouse^[3]:

.selector {
  &:hover, 
  &:focus,
  &:active {
  }
}

Gli stati di "hover" sono generalmente rappresentati da un cambiamento di colore:

button {
  background-color: #00ff00;
}

button:hover {
  background-color: #ff00ff;
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

È possibile utilizzare una combinazione di outline, bordere box-shadow,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):

button:active {
  background-color: #666;
  border-color: #666;
  color: #333;
}

Tecniche

Esempio di un bottone creato solo in CSS 3 (lo stesso risultato è ottenibile con un'immagine vettoriale o bitmap fatta in Inkscape, Illustrator, Gimp o Photoshop):

.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;
}

Esempi

Bottoni animati con CSS3 Animations. Nel primo caso il bottone si anima ad intermittenza, nel secondo si anima al passaggio del mouse
Tre tecniche per ottenere lo stesso bottone "pattern": CSS3, SVG e immagine bitmap
Esempi di bottoni formattati con CSS o SVG o programmi di grafica

Note

^ (EN) Anna Fitzgerald, What is a Hamburger Button — and How Does it Work?, su blog.hubspot.com. URL consultato il 17 febbraio 2021.
^ ^a ^b (EN) Loving & Hating the Hamburger Icon, su Webdesigner Depot, 17 settembre 2018. URL consultato il 23 febbraio 2019.
^ (EN) Style hover, focus, and active states differently | Zell Liew, su zellwk.com. URL consultato il 10 febbraio 2021.

Portale Informatica: accedi alle voci di Wikipedia che trattano di informatica

[1] (EN) Anna Fitzgerald, What is a Hamburger Button — and How Does it Work?, su blog.hubspot.com. URL consultato il 17 febbraio 2021.

[Loving_&_Hating_the_Hamburger_Icon-2] (EN) Loving & Hating the Hamburger Icon, su Webdesigner Depot, 17 settembre 2018. URL consultato il 23 febbraio 2019.

[3] (EN) Style hover, focus, and active states differently | Zell Liew, su zellwk.com. URL consultato il 10 febbraio 2021.

[1]

[2]

[3]