Activitats

S’ha d’incloure l’URL de destí com a atribut action del formulari i el mètode, com a atribut method. Els camps per entrar el nom d’usuari i la contrasenya han de tenir un atribut name que s’utilitzaria al servidor com a clau per identificar els valors.

<form action="http://example.com" method="POST">
  <fieldset>
    <legend>Autenticació</legend>
    <label>Nom d'usuari:<input type="text" name="usuari"/></label><br>
    <label>Contrasenya:<input type="password" name="contrasenya"/></label><br>
    <input type="submit"/>
  </fieldset>
</form>

Podeu veure aquest exemple en l’enllaç següent: codepen.io/ioc-daw-m06/pen/YGYWqb?editors=1000.

Per modificar l’estil s’ha d’afegir el codi CSS en un fitxer extern o incrustat a la capçalera entre les etiquetes style:

<style>
  form {
    width:170px;
    background-color: blue;
    margin: 0 auto;
  }
 
  label {
    font-weight: bold;
    color: white;
  }
</style>
 
<form action="http://example.com" method="POST">
  <fieldset>
    <legend>Autenticació</legend>
    <label>Nom d'usuari:<input type="text" name="usuari"/></label><br>
    <label>Contrasenya:<input type="password" name="contrasenya"/></label><br>
    <input type="submit" />
  </fieldset>
</form>

Podeu veure aquest exemple en l’enllaç següent: codepen.io/ioc-daw-m06/pen/WGdxrO?editors=1100.

En tots tres casos s’ha de fer servir l’atribut required per evitar que s’enviï el formulari amb el camp buit.

En el cas del nom, s’ha d’indicar el nom del camp i la llargària màxima i mínima amb els atributs maxlength i minlength, respectivament.

Pel correu només cal especificar que el tipus és email per activar la validació.

Per acabar, el pin ha de ser de tipus number i s’ha d’indicar el valor mínin i màxim amb els atributs min i max, respectivament.

<form action="http://example.com" method="POST">
  <fieldset>
    <legend>Autenticació</legend>
    <label>Nom d'usuari:<input type="text" name="usuari" minlength="4" maxlength="8" required/></label><br>
    <label>Correu:<input type="email" name="correu" required/></label><br>
    <label>Pin:<input type="number" name="pin" min="0" max="9999" required/></label><br>
    <input type="submit" />
  </fieldset>
</form>

Podeu veure aquest exemple en l’enllaç següent: codepen.io/ioc-daw-m06/pen/zKpBRm?editors=1000.

La clau per resoldre aquesta activitat és recordar que la propietat pattern permet validar les dades utilitzant una expressió regular i, seguidament, codificar l’expressió corresponent al format demanat:

• Tres nombres consecutius: \d{3}
• Seguits d’un guió o un espai: [ -]
• Tres nombres consecutius: \d{3}
• Seguits d’un guió o un espai: [ -]
• I per acabar, tres nombres consecutius: \d{3}

Així doncs, l’expressió que valida aquest format és: \d{3}[ -]\d{3}[ -]\d{3}.

<form action="http://example.com" method="POST">
  <fieldset>
    <legend>Telèfon</legend>
    <label>Telèfon:<input type="text" name="telefon" pattern="\d{3}[ -]\d{3}[ -]\d{3}" required placeholder="xxx-xxx-xxx o xxx xxx xxx"/></label><br>
    <input type="submit" />
  </fieldset>
</form>

Podeu veure aquest exemple en l’enllaç següent: codepen.io/ioc-daw-m06/pen/ozpLQv?editors=1000.

Són necessaris com a mínim dues funcions: una per guardar la galeta i una altra per recuperar-la. La primera no representa cap problema, ja que només cal concatenar l’identificador del producte amb el símbol = i la quantitat.

Per altra banda, el mètode recuperarGaleta() ha d’utilitzar una expressió regular new RegExp(“(?:” + idProducte + “)=(.+?)(?=;|$)”, “g”);, a la qual s’ha incrustat l’identificador del producte. El retorn de la funció és l’execució del patró sobre el contingut global de les galetes.

function guardarGaleta(idProducte, quantitat) {
  document.cookie = idProducte + "=" + quantitat;
}
 
function recuperarGaleta(idProducte) {
  let patro = new RegExp("(?:" + idProducte + ")=(.+?)(?=;|$)", "g");
  return patro.exec(document.cookie)[1];
}
 
// Codi de proves
guardarGaleta('cadira', 8);
guardarGaleta('taula', 2);
 
console.log('Nombre de cadires: ' + recuperarGaleta('cadira'));
console.log('Nombre de taules: ' + recuperarGaleta('taula'));

Podeu veure aquest exemple en l’enllaç següent: codepen.io/ioc-daw-m06/pen/wzpWVq?editors=0011.