Data Entry

Il termine data entry significa letteralmente "inserimento di dati", è l'operazione di immissione di dati in un computer o in un generico sistema informatico. Il concetto di data entry si accosta a quello delle form, ossia un insieme di elementi (quali gli input textfield, checkboxes, radio buttons, etichette di testo) necessari per la compilazione di dati inseriti dall'utente.

---

Input textfields

Gli input textfields sono quegli elementi che permettono all'utente di inserire dei dati: ogni input avrà una reazione diversa in base a ciò che sarà inserito o in base all'informazione che richiede.

<span class="span"><input type="text" placeholder="Scrivi qui..."></span>

Questo è l'input di default, ossia l'input di base per l'inserimento dei dati. Il focus dell'input (ovvero quando entriamo nell'input per digitare i dati) ha un bordo di colore primary-blue. È importante che ci sia questo tipo di distinzioni in modo da far comprendere all'utente, anche visivamente, cosa sta succedendo.

Quindi, nel css richiameremo l'input text inserito nell'html e gli attribuiamo la seguente classe:

/* CSS */
.input[type=text] {
  font-family: var(--mainFont);
  font-weight: var(--fontMedium);
  font-size: 14px;
  min-width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 2px solid var(--greyLight);
  box-sizing: border-box;
  background-color: var(--greyOpacity);
  outline: none;
}

.input[type=text]:focus {
  border: 2px solid var(--primary);
  box-sizing: border-box;
  background-color: var(--white);
  text-decoration-style: none;
}

Creiamo ora una form caratterizzata da due input e un pulsante d'azione: in questo caso, si aggiunge un tag <form> attorno agli elementi. Quando, al click del pulsante, i dati inseriti non corrispondono a quelli richiesti, l'input avrà un colore danger. In caso di dati corretti, il colore è success. È importante che questo tipo di interazioni siano affiancate da delle icone rappresentative affinché, chi sia daltonico, possa riconoscere la risposta dell'input in base al significato dell'icona.

In questo caso specifico, sono stati aggiunti dei pattern all'interno del tag input type=text e all'interno del tag input type=password affinché possano essere inseriti solo determinati numeri e lettere in un certo ordine, proprio come la sequenza di un codice fiscale o di un PIN: se ad esempio, inserendo il codice fiscale, dovesse mancare una lettera o un numero o si inserisce una lettera al posto di un numero e viceversa, questo verrà rilevato subito come errore.

<!-- HTML -->
<form id="login">
  <span class="span">
      <input type="text" pattern="^[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[a-zA-Z][0-9]{3}[a-zA-Z]$" placeholder="Codice Fiscale" required="required">
      <span></span>
  </span>
  <span class="span">
      <input type="password" pattern="^[0-9]{5}$" placeholder="PIN" required="required">
      <span></span>
  </span>
  <button id="submitButton" class="btn btnPrimary">INVIA DATI</button>
</form>

// JAVASCRIPT
document.getElementById("submitButton").addEventListener("click", function() {
  document.getElementById("login").className="submitted";
});

È necessario inserire anche del codice Javascript affinché, al click del pulsante, possa avvenire l'interazione.

---

Checkboxes

I checkboxes sono utilizzati quando si ha la possibilità di poter scegliere più opzioni tra quelle messe a disposizione. Anch'essi sono realizzati seguendo la guida dei colori del Design System.

<div class="checkbox checkbox-primary">
  <label>SELEZIONATO
  <input type="checkbox" class="checkbox-input" checked>
  <span class="checkmark"></span>
  </label>
</div>

---

Radio buttons

I radio buttons, a differenza dei checkboxes, ti permettono di poter selezionare un'unica opzione tra quelle proposte. Generalmente, si presentano con una delle opzioni già selezionate in default: la scelta di un'altra opzione implica in automatico la rimozione della scelta precedente.

<form>
  <label class="radio">Basic 1
    <input type="radio" checked="checked" name="radio">
    <span class="checkradio checkradio-basic"></span>
  </label>
  <label class="radio">Basic 1
    <input type="radio" name="radio">
    <span class="checkradio checkradio-basic"></span>
  </label>
</form>

---

© 2021 Alessia Saviano per ABANA