Tehnici Web

Forms

Claudia Chiriță . 2023/2024

ce învățăm să facem azi?

Client-side Web Storage

un obiect Storage este un array asociativ în care cheile și valorile sunt stringuri
accesăm obiecte Storage prin proprietăți ale obiectului window:

localStorage // permanent 
sessionStorage // pâna la închiderea tabului

Storage

localStorage.length // nr. intrări în Storage
localStorage.key(i) // numele cheii cu indexul i
localStorage.setItem(numeCheie, numeValoare) 
/* adaugă o cheie și valoarea ei sau înlocuiește 
   valoarea unei chei existente */
localStorage.getItem(numeCheie) // valoarea cheii
localStorage.removeItem("x") // șterge cheia din Storage
localStorage.clear() // șterge toate cheile
localStorage.propNoua = valoare

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
     <style>
      .brb {
          height: 350px;
          width: 350px;
          border-radius: 50%;
          display: inline-block;
          margin: 10px 0 10px 0;
          background-color: red;
      }
       div { text-align:center; }
    </style>
    <script>
       window.onload = function() {
         var buton = document.getElementById("brb");
         buton.onclick= function() {
           let x = Number(localStorage.getItem("nrc"));
           if (x) {
             localStorage.setItem("nrc", x + 1); }
           else {
             localStorage.setItem("nrc", "1"); }
           document.getElementById("print").value = localStorage.getItem("nrc");
         }
         document.getElementById("print").value = localStorage.getItem("nrc");
       }
   </script>
  </head>
  <body>
    <div>
      <span class="brb" id="brb"></span>
      <p>clicks <input type="text" id="print" value="0"> </p>
    </div>
  </body>  
</html>

Cookies?

Incognito?

Forms

elementul HTML <form> reprezintă o secțiune a unei pagini care conține elemente interactive (controls) și e folosit pentru a trimite informații către un server web

Forms

după completare, datele sunt trimise serverului ca o listă de perechi cheie/valoare
într-un request HTTP de tip post

Forms: Controls

<form id="myform">


<input>
<textarea>
<fieldset>
<select>
<button type="submit"> Submit </button>

</form>

<input type="submit" form="myform" value="Submit">
<button type="submit" form="myform"> Submit </button>

Structurare: label

folosit pentru etichetarea widget-urilor

Name:


  Name:

Structurare: label

etichetare multiplă a unui widget


  Name: 
      *

Structurare: fieldset

folosit pentru gruparea elementelor într-un form

Input

poate lua multe forme, în funcţie de valoarea atributului type
pentru crearea majorității tipurilor de widget-uri: câmpuri de text pe o singură linie, controale pentru timp & dată, checkboxuri, butoane radio, selectoare de culoare, butoane

Text input

atribute specifice: readonly, placeholder, required, size (width pentru câmp), maxlength (numărul maxim de caractere)

Text input

text input cu pattern:

CNP

C.I

Text input

password type
hidden type: control invizibil pentru user; este trimis serverului odată cu restul formularului

Email

are validare client-side built-in
atributul multiple permite scrierea mai multor adrese separate prin virgulă

Search

principala diferență față de input text este stilul: buton X de ștergere a conținutului, colțuri rotunjite

Câmp numeric

acceptă doar numere floating-point
atribute: min, max, step (default 1, acceptă "any")

Slider

se recomandă setarea atributelor: min, max, step

File selector

dispozitive mobile: selectorul de fișiere poate accesa fotografii, video și audio înregistrate direct de cameră și microfon

Radio


Stafide


Choc chips

doar unul din butoanele radio poate fi selectat; atributul name trebuie să aibă aceeași valoare pentru toate opțiunile

Checkbox


Cookies


Biscuits

permit selectarea mai multor valori, spre deosebire de butoanele radio

HTML5 input

color: alegerea unei culori
date : introducerea datei în formatul yyyy-mm-dd
time : introducerea orei în formatul hh:mm
week : introducerea datei în formatul yyyy-Www

HTML5 input

image: buton grafic folosind o imagine
tel : introducerea unui număr de telefon; fără validare implicită
url : introducerea unui URL în formatul urlscheme://restofurl

Textarea

Text inițial

câmp de editare a textului pe mai multe linii
implicit: cols = 20

Select

control care oferă un meniu de opțiuni selectabile

Trimiterea formularelor: input

submit: trimiterea datelor din formular către server

reset: resetarea tuturor câmpurilor din formular
(rar folosit)
```
       
```

Trimiterea formularelor: button

submit: trimiterea datelor din formular către server
```
<button type="submit" value="Send Request" />
```

reset: resetarea tuturor câmpurilor din formular
```
<button type="reset" value="Reset the form" /> 
```
poate fi folosit în afara formularelor cu atributul
```
type="button" 
```

Trimiterea formularelor: atribute

<form target="_blank" method="post" action="URL">

target = "_self" /"_blank" / "numeiframe" 
 /* locul în care este afișat răspunsul după
    trimiterea formularului (implicit: _self) */

method = "post"/"get"
 /* metoda folosită pentru comunicarea cu serverul 
    (implicit: get) 
    get: query string în URL; 
    post: query string în corpul requestului */

action = URL-ul care procesează formularul
 /*  (implicit: URL paginii curente) */

Forms

Validare formular built-in

Validare formular: e rezonabil?

forms & JavaScript

un form este reprezentat în JavaScript de un obiect HTMLFormElement
proprietatea elements întoarce colecția câmpurilor formularului (array-like object)
proprietatea length întoarce numărul de câmpuri

forms & JavaScript

Proprietatea value

pentru <input type="text"> și <textarea>
reprezintă valoarea introdusă de utilizator la trimiterea formularului și este un String
pentru <option> reprezintă valoarea opțiunii alese
altfel, reprezintă valoarea atributului html value

Evenimente Form

submit: evenimentul lansat la trimiterea formularului
reset: evenimentul lansat când un formular este resetat

Evenimente Form

proprietăți specifice câmpurilor

proprietatea checked (boolean) pentru elemente
```
          
```
proprietatea elements a câmpului fieldset:
array-like care îi conține componentele

proprietăți specifice câmpurilor

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="demo.css">
     <script>
       /* window.onload = function() {
         document.getElementById("quiz").onsubmit = checkQuiz;
         alert("dd");
        } 
        function checkQuiz() {
          let fe = document.getElementById("quiz").elements;
          let q1 = fe[0].elements;
          let q2 = fe[4].elements;
          let x = 0;
          for (let i = 0; i < q1.length; i++) 
            if (q1[i].checked) 
               x = x + parseInt(q1[i].value);
          for (let i = 0; i < q2.length; i++) 
            if (q2[i].checked) 
               x = x + parseInt(q2[i].value);
          alert(x);
        } */
     </script>
  </head>
  <body>
    <div>
     <form name="quiz" id="quiz">
       <fieldset>
         <legend> 3+5=? </legend>
         <input type="radio" name="q1" value="0">10<br>
         <input type="radio" name="q1" value="1">8 <br>
         <input type="radio" name="q1" value="0">55<br>
       </fieldset>
       <fieldset>
         <legend> 3*5=? </legend>
         <input type="radio" name="q2" value="0">10<br>
         <input type="radio" name="q2" value="1">15 <br>
         <input type="radio" name="q2" value="0">55<br>
       </fieldset>
       <button type="submit" id="buton"> Answer </button>
     </form>
    </div>
  </body>  
</html>

Evenimente Controale: Input

pentru elemente cu conținut editabil
ex: <input>, <textarea>
se declanșează la fiecare modificare
ex: fiecare caracter scris într-un input

Evenimente Controale: Change

pentru <input>, <textarea>, <select>
se declanșează după alegerea unei noi valori
pentru <input type="text"> și <textarea> se declanșează când încetează focusul pe element

Evenimente Controale: Change

ai-ai, bad ui!

         
                           WW
                          /__\ 
                         | oo |   _WWWWW_
              (o)(o)    (|_()_|) /  o o  \    întrebări?
            w"      "w    \__/ (|  __O__  |)
           W  -====-  W  /|\/|\  \ \___/ /
            "w      w"  |||||||| /-------
            w"""""""""w |||||||||=========|
          W            W|||||||||=========|