Home-theater-designers
Colectarea datelor de la un utilizator al site-ului web se poate face în mai multe moduri diferite. Formularele de pe site-urile web pot avea o funcție simplă, cum ar fi abonarea unui utilizator la un buletin informativ sau un scop mai complex, cum ar fi acționarea ca formular de cerere de locuri de muncă.
Cu toate acestea, un lucru pe care toate aceste forme simple până la complexe îl au în comun este HTML și mai specific HTML etichetă.
Folosind eticheta formular
The eticheta este un element HTML care este folosit ca un container pentru a include alte elemente care pot fi considerate ca elemente de bază pentru formulare. Unele dintre aceste elemente fundamentale includ eticheta, etichetă și etichetă.
The eticheta are un atribut important care contribuie la funcționalitatea sa. Acest atribut se numește acțiune și este utilizat pentru a identifica fișierul către care vor fi transmise datele introduse în formular.
Utilizarea exemplului de etichetă
Exemplul de mai sus arată cum să utilizați eticheta formular în proiectele dvs. Una dintre principalele oportunități este că, dacă deschideți o etichetă formular, ar trebui să vă amintiți să o închideți. Aceasta va crea o structură de formular și, de asemenea, va asigura că datele introduse în formular sunt procesate corect.
Utilizarea etichetei
The eticheta este utilizată pentru a descrie datele din fiecare câmp de intrare într-un formular. Această etichetă are un pentru atribut, care este utilizat pentru a îmbunătăți funcționalitatea unui formular.
Legate de: Cei mai buni editori HTML gratuiti online pentru a vă testa codul
Dacă ID-ul care este atribuit câmpului de intrare corespunzător se potrivește cu pentru valoare în , atunci acel câmp de introducere va fi evidențiat automat atunci când faceți clic pe etichetă.
Utilizarea exemplului de etichetă
First Name:
În exemplul de mai sus puteți vedea că pentru atributului i se atribuie valoarea fname . Prin urmare, dacă creați un câmp de intrare cu fname id, acest câmp va fi evidențiat de fiecare dată când faceți clic pe Primul Nume eticheta.
Utilizarea etichetei
În forma sa de bază, eticheta poate fi văzută ca o casetă de text. The eticheta captează date de la utilizator și una dintre caracteristicile sale cele mai importante este tip atribut. The tip atributul indică tipul de date pe care această casetă de text le poate colecta.
Legate de: Cum se creează un formular stivuit în CSS
Există mai multe valori diferite pe care le puteți atribui tip atribut, dar unele dintre cele mai populare sunt după cum urmează.
- Text
- Număr
- Imagine
- Data
- Caseta de bifat
- Radio
- Parola
Folosind eticheta Exemplu
First Name:
The eticheta din codul de mai sus are trei atribute diferite, fiecare având o funcție unică. The tip atributului i se atribuie o valoare text, ceea ce înseamnă că caseta text acceptă numai caractere.
The id atributul este un identificator unic pentru caseta de text și este important, deoarece oferă acces la acest element dintr-un fișier CSS. The Nume atributul este, de asemenea, un identificator unic; cu toate acestea, atributul name este utilizat pentru a interacționa cu un element din partea de dezvoltare a serverului.
The id și Nume atributelor li se atribuie de obicei aceeași valoare întrucât unul oferă acces la un element din partea client și celălalt din partea serverului.
Utilizarea elementului Casetă de selectare
Elementul casetă de selectare este foarte unic în comparație cu celelalte elemente pe care le puteți utiliza cu etichetă. Permite utilizatorului să selecteze una sau mai multe opțiuni dintr-o listă de opțiuni conexe. Casetele de selectare sunt ușor de identificat deoarece sunt reprezentate de casete pătrate minuscule care conțin o verificare atunci când sunt selectate.
Folosind Exemplul de element de casetă de selectare
Programming Languages:
Java
JavaScript
Python
În exemplul de mai sus, fiecare dintre elementele casetei de selectare are un atribut de valoare, iar acest lucru este important deoarece ajută la diferențierea fiecărei opțiuni de casetă de selectare de colecție. Prin urmare, dacă un utilizator selectează „Java” din opțiunile de mai sus, datele vor reflecta acest lucru.
Folosind eticheta și elementele radio
The eticheta și elementele radio sunt similare în sensul că permit unui utilizator să selecteze o singură valoare la un moment dat; prin urmare, se poate spune că au aceeași funcție. Cu toate acestea, ele sunt foarte diferite ca aspect.
Elementul radio este mai aproape de elementul casetei de selectare în aparență, totuși, cu elementul radio aveți cercuri în loc de pătrate.
The eticheta produce ceea ce este în esență o casetă derulantă, care permite unui utilizator să selecteze o singură valoare.
Folosind exemplul de etichetă și element radio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Utilizarea elementului de dată
Elementul de dată produce o mică casetă de text care generează un calendar la clic. Folosind Data ca tip de intrare în formularele dvs., protejează împotriva unui utilizator care poate introduce o dată incorectă, ceea ce poate duce la colectarea de date eronate.
Folosind exemplul de element de dată
Utilizarea elementului de e-mail și parolă
Când un dezvoltator atribuie fie e-mailul, fie valorile parolei atributului type al unui etichetă, fiecare produce o casetă de text identică. Cu toate acestea, când începeți să utilizați aceste casete, diferențele devin evidente.
Elementul de e-mail monitorizează datele introduse în caseta de text și se asigură că fiecare trimitere îndeplinește cerința standard a unei adrese de e-mail; ceea ce înseamnă să ai o parte locală, urmată de simbolul @ și care se termină cu un domeniu.
Folosind exemplul de element de e-mail
În exemplul de mai sus vi se prezintă un nou atribut numit substituent , iar acest atribut ia o valoare de text care este afișată în caseta de text în gri estompat. Acest text este utilizat pentru a indica datele care urmează să fie plasate în caseta de text așa cum se vede în exemplul de mai sus.
Elementul parolă transformă caracterele în asteriscuri pe măsură ce sunt introduse în caseta de text. Prin urmare, dacă ecranul computerului dvs. este vizibil pentru alte persoane, nu vor vedea parola pe care ați introdus-o.
Folosind Exemplul Element Parolă
Utilizarea etichetei buton
Într-o formă, există de obicei două tipuri diferite de butoane. Primul este butonul de trimitere, care trimite datele introduse în formular la valoarea atribuită atributului de acțiune (care se află în < forma> etichetă).
Trimiteți un exemplu de buton
Submit
Al doilea tip de buton utilizat de obicei într-un formular este un buton de resetare, care șterge datele dintr-un formular, astfel încât utilizatorul să poată introduce date noi. The eticheta are o tip atribut, care este folosit pentru a indica funcția butonului. În exemplul de mai sus tip atributul este atribuie valoarea Trimite , prin urmare, un buton care are un tip valoarea resetați este folosit pentru a reseta formularul.
Exemplu buton Reset
Reset
Crearea unui formular
Pentru a crea un formular simplu în HTML, va trebui să includeți toate elementele menționate mai sus într-un etichetă.
Crearea unui exemplu de formular
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Codul de mai sus va produce următorul formular:
cum să opriți apelurile telefonice nedorite pe un telefon fix
Acum puteți crea un formular simplu în HTML
Acest articol vă oferă toate instrumentele pentru a crea un formular HTML funcțional. Identifică diferitele etichete HTML care sunt utilizate la crearea formularelor și explorează diferitele atribute care pot fi utilizate cu aceste etichete.
Cu toate acestea, majoritatea formularelor pe care le vedeți pe site-uri web au o componentă suplimentară; CSS, care este folosit pentru a aduce forma la viață și a o face mai plăcută din punct de vedere estetic.
Acțiune Acțiune Tweet E-mail Foaia de trucuri Proprietăți esențiale CSS3Stăpâniți sintaxa CSS esențială cu foaia de trucuri a proprietăților CSS3.
Citiți în continuare Subiecte asemănătoare- Programare
- HTML
- Dezvoltare web
- Tutoriale de codare
Kadeisha Kean este un dezvoltator de software complet și scriitor tehnic / tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând materiale care pot fi ușor de înțeles de către orice novice în tehnologie. Este pasionată de scriere, dezvoltarea de software-uri interesante și călătoria prin lume (prin documentare).
Mai multe de la Kadeisha KeanAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona