M5 | L7 – Proiect Formular – HTML I

Astăzi vom afla despre:

  • Pregatirea temei, pregatirea primul camp de input
  • Campul de email, de numar, de drop down si de radio button

Aplicațiile pe care le vom folosi sunt:

Notepad++, codepen.io

PROIECTE:

Proiect Fomular

Proiect Final

  1. Pregatirea temei de Formular. In formularu nostru avem de respectat urmatoarele reguli de introducere a campurilor. Exemplu :
  • Titlu : comanda cadouri pentru cei dragi
  • Motto: cele mai frumoase cadouri le gasesti aici!
  • Camp de tip text: nume
  • Camp de tip email: email
  • Camp de tip numere: varsta
  • Camp de tip dropdown cu minim 3 alegeri: gen
  • Camp de tip radiobutton cu minim 3: metoda de plata: transfer bancar, card la livrare, numerar la livrare
  • Camp de tip check box: tip de cadou, ambalat, neambalat,digital
  • Camp de tip text (comentarii):
  • Buton

  1. Creem Titlul, mottoul si primul camp. Este important sa introducem atributele id pentru fiecare eticheta so clasele container, form-group si form-control pentru ale folosi mai tarziu in CSS. Pentru fiecare input este novoie sa introducem atributul required.

3. Campul de email

4. Campul de numar

5. Campul de dropdown. Campul de drop down seamana foarte mult cu tag ul de liste. In interiorul tag ului select introducem tagurile de option pentru a descrie fiecare optiune din lista de dropdown. Prima otiune o lasam disabled ca sa descrie mai bine ce avem de facut

  1. Campurile Radio Button

Rezultat final :