M5 | L2 – Continuare HTML

Astăzi vom afla despre:

  • Liste Ordonate
  • Liste Neordonate
  • Formulare Web
  • Butoane
  • Butoane radio
  • Checkbox-uri
  • Eticheta: label, div, html, body, main

Aplicațiile pe care le vom folosi sunt:

Notepad++; CodePen

PROIECTE:

Continuarea primului site

HTML are un element special pentru crearea de liste neordonate sau liste cu stil bullet point.

Listele neordonate încep cu un element de deschidere <ul>, urmate de orice număr de elemente. În final, listele neordonate se închid cu un </ul>

Challenge 1:

  • Creati o lista neordonata cu 3 lucruri ce le plac pisicilor

Listele ordonate încep cu un element de deschidere <ol>, urmate de orice număr de elemente. În final, listele ordonate se închid cu un </ol>

 

Challenge 2:

  • Creati o lista ordonata cu 3 lucruri pe care pisicile le urasc

Acum, să creăm un formular web. Elementele input sunt o modalitate convenabilă de a obține inputuri de la utilizator.

Puteți crea o introducere de text astfel: <input type = „text”>

Rețineți că elementele de intrare se auto-închid.

Text placeholder este ceea ce este afișat în elementul input înainte ca utilizatorul să introducă ceva.

Puteți construi formulare web care trimit efectiv date unui server folosind doar HTML pur. Puteți face acest lucru specificând o acțiune asupra elementului form.

Challenge 3:

  • Creati un element form care sa aiba in interior in element input pentru text.
  • Textul placeholder trebuie sa fie: cat photo URL

Să adăugăm un buton de submit la formular. Dacă faceți clic pe acest buton, veți trimite datele din formular la adresa URL specificată cu atributul de acțiune al formularului.

Challenge 4:

  • Creati un buton submit cu textul “Submit” in elemetul form.

Puteți solicita câmpuri de formular specifice, astfel încât utilizatorul să nu poată trimite formularul până când nu le-a completat. De exemplu, dacă doriți să faceți un câmp de introducere text necesar, puteți adăuga doar atributul required în elementul de introducere, astfel: <input type = „text” required >

Puteți utiliza butoanele radio pentru întrebări în care doriți ca utilizatorul să vă dea doar un răspuns din mai multe opțiuni. Butoanele radio sunt de tip input.

Fiecare dintre butoanele radio pot fi intoduse în propriul element label. Prin intruducerea unui element input în interiorul unui element label, acesta va asocia automat input-ul butonului radio cu elementul label care îl înconjoară.

Toate butoanele radio conexe ar trebui să aibă același atribut name pentru a crea un grup de butoane radio. Prin crearea unui grup radio, selectarea oricărui buton radio va deselecta automat celelalte butoane din cadrul aceluiași grup, asigurându-se că un singur răspuns este furnizat de utilizator.

Se consideră o buna practică setarea unui atribut for elementului label, cu o valoare care se potrivește cu valoarea atributului id al elementului input. Acest lucru permite tehnologiilor de asistență să creeze o relație legată între label și elementul input di interior.

Challenge 5:

  • Adăugați o pereche de butoane radio la formularul, fiecare în propriul element label. Unul ar trebui să aibă opțiunea de indoor și celălalt ar trebui să aibă opțiunea de outdoor. Ambele ar trebui aiba atributul nume al indoor-outdoor pentru a crea un grup radio.

Formularele folosesc în mod obișnuit checkbox-uri pentru întrebări care pot avea mai mult de un răspuns.

Challenge 6:

  • Adaugă în formularul tău un set de trei checkbox-uri. Fiecare checkbox ar trebui să fie încorporată în propriul element de label. Toate trei ar trebui să împartă atributul name:

 

Când un formular este completat, datele sunt trimise serverului și includ intrări pentru opțiunile selectate. Intrările de tip radio și checkbox raportează valorile lor din atributul value.

Aici, aveți două intrări radio. Când utilizatorul trimite formularul cu opțiunea de indoor selectată, datele formularului vor include linia: indoor-outdoor = indoor. Aceasta provine din numele și atributele valorice ale intrării „indoor”.

Dacă omiteți atributul value, datele formularului trimis utilizează valoarea implicită, care este activată. În acest scenariu, dacă utilizatorul ar face clic pe opțiunea „indoor” și ar trimite formularul, datele formularului rezultat ar fi indoor-outdoor = on, ceea ce nu este util. Deci atributul value trebuie setat pe ceva pentru a identifica opțiunea.

 

Challenge 8:

  • Dati fiecăreia dintre intrările radio și checkbox atributul value. Utilizați textul elementului label, cu litere mici, ca valoare pentru atribut.

Puteți seta un checkbox sau un buton radio care trebuie verificat în mod implicit folosind atributul checked.Pentru a face acest lucru, trebuie doar să adăugați cuvântul „checked” în interiorul unui element de input.

Elementul div, cunoscut și ca element de divizare, este un recipient cu scop general pentru alte elemente. Elementul div este probabil elementul HTML cel mai des utilizat.

La fel ca orice alt element care nu se autoînchide, puteți deschide un element div cu <div> și îl puteți închide pe o altă linie cu </div>.

Challenge 8:

  • Incadrati listele intr-un singur element div.

 

Puteți adăuga un alt nivel de organizare în documentul HTML în cadrul etichetelor html cu elementele de head și body. Orice marcaj cu informații despre pagina ar intra în eticheta head. Apoi, orice marcaj cu conținutul paginii (ceea ce se afișează pentru un utilizator) ar intra în eticheta body.

Challenge 9:

  • Incadrati pagina cu elementele head si body.