Acest tag se folosește in genere pentru a completa un formular de contact, putând grupa informațiile completate în formular, și trimise undeva pe un email sau salvate pur și simplu într-un fisier txt, direct pe site!Unii mai folosesc legături cu baze de date, probabil dacă site-ul tău este gazbuit de o anumita firmă, în cazul în care ai nelămuriri despre cum și în ce condiții poti desfașura functia ”form” pentru a primi cumva formularul, ei te vor ajuta!

Acum vom prezenta structura simplistă și totodată cea mai eficientă pentru această treabă!

Tag-urile de baza folosite în construcția unui formular de contact și nu numai, sunt următoarele : <form>, <imput>, <textarea>, <select> și <option>.

Alături de tag-ul <form>, în interiorul lui vom adăuga si atributul action care va spune formularului, atunci când va fi trimis, ce cale va urma conținutul lui, și după ce reguli se va îndeplini trimiterea.

Atributul optional method, practic catalogheaza conținutul formularului, și la trimitere îl eticheteaza, valoarea sa putând fi post sau get (aceasta este o valoare default). Cel mai des folosit fiind post, pentru că acesta oarecum ascunde informațiile ce nu trebuiesc afișate (gen mentionari ”nu va fi afișat”, eventual casuța de email), în timp ce get oferă o larga deschidere catre un alt URL, formandu-se eventual un transfer!

Așadar un element de formular arată cam așa:

<form action=”procesarescript.php” method=”post”>

</form>

Tag-ul <input> este cel mai important în funcționalitatea formularului, el având zece forme :

• <input type=”text” /> este o căsuță standard pentru text.Acesta mai poate avea și un atribut value, descriind setul de inițiale încadrate în căsuța cu text!
• <input type=”password” /> este similară cu căsuța de text, doar că textul introdus în interior, va fi ascuns.
• <input type=”checkbox” /> este o căsuță pe care persoana ce accesează, o poate bifa sau debifa.Deasemenea poate avea și un atribut checked, care va auto bifa căsuța,debifarea fiind făcută de cel ce accesează.Linia de cod ar arăta cam așa :
  • <input type=”checkbox” checked=”checked” />
• <intput type=”radio” /> va arăta identic cu căsuța de bifare, doar ca userul care acceseaza poate alege doar una dintr-un grup de mai multe căsuțe.Și această linie poate avea un atribut checked, scris și folosit în același mod.
• <input type=”file” /> se creează o zonă care arată fișierele din computerul tău, ca la orice program când vrei să salvezi un fișier.Această obțiune se folosește atunci când ai necesitatea de upload (încarcare fisier din calculator, pe site)
• <input type=”submit” /> este un buton, care atunci când e accesat va trimite formularul.Deasemenea poți schimba denumirea butonului, folosind atributul value astfel :
  • <input type=”submit” value=”Click pentru a trimite” />
• <input type=”image” /> poate afișa o imagine, care va trimite formularul atunci când se da click pe ea.Poate avea in cadrul liniei atributul src, folosit exact ca la tagul <img>.
• <input type=”button” /> va afișa un buton care nu va face nimic fără o line de cod adăugată alaturi de aceasta.
• <input type=”reset” /> e un buton care atunci când se dă click pe el va șterge formularul completat și îl va afișa pe unul prestabilit (default).
• <input type=”hidden” /> spatiul va ascunde informația cât timp userul ce accesează e pe această pagina cu formular, sau nu va afișa e-mailul de exemplu, atunci când formularul rămâne pe pagina după trimitere.

Notă: tag-ul <input> se închide singur cu terminația />

O arie de text ”textarea” este o căsuța ce doar fișează un text, ea putând avea 2 atribute ”rows” și ”cols” iar o linie scrisă ar trebui să arate cam așa :

<textarea rows=”5” cols=”20”>Aici poti scrie mai mult text</textarea>

Tag-ul <select> lucrează în paralel cu tag-ul <option>, folosit pentru a crea o listă de căsuțe pentru optiuni de bifare.Construcția ar putea fi scrisă așa:

<select>
<option value=”first option“>Opțiunea 1</option>
<option value=”second option“>Opțiunea 2</option>
<option value=”third option“>Opțiunea 3</option>
</select>

Când formularul este trimis, opțiunea selectată va fi și ea trimisă.

Tag-ul <option> poate avea un atribut ”selected” care va funcționa ca atributul ”checked” de la tag-ul <checkbox>.Linia arătând cam așa :

<option value=”mouse” selected=”selected”>Floricică</option>

Toate aceste tag-uri cu liniile descrise, ar arăta bine pe o pagină de formular, dar ele vor fi ignorate de bizitator, dacă nu le denumești.Așa că la fiecare tag poți adauga atributul ”name” denumind asfel fiecare spatiu sau căsuța prezentat/ă.De exemplu:

<input type=”text” name=”Căsuța cu cuvinte” />

Un formular bine făcut, ar arăta ca cel de mai jos, dar de reținut ca în acest exemplu avem la tag-ul atributul <form>”action” descris de fisierul ”contactus.php”, în acest fișier sunt informațiile privind obținerea și trimiterea formularului.

<form action=”contactus.php” method=”post“>
<p>Nume:</p>
<p><input type=”text” name=”nume” value=”Numele tău” /></p>
<p>Comentarii: </p>
<p><textarea name=”comentarii” rows=”5” cols=”20“>Comentariul tău</textarea> </p>
<p>Tu ești:</p>
<p><input type=”radio” name=”tuesti” value=”barbat” /> Barbat</p>
<p><input type=”radio” name=”tuesti” value=”femeie” /> Femeie</p>
<p><input type=“radio” name=”tuesti” value=”hermafrodit” /> Un hermafrodit</p>
<p><input type=”radio” name=”tuesti” value=”asexual” checked=”checked” /> Asexual</p>
<p><input type=”submit” /></p>
<p><input type=”reset” /></p>
</form>

Aici vei găsi un alt nivel de complexitate, care e defapt Tutorialul HTML pentru avansaţi, asta în cazul în care te interesează complexitatea!

Pagini relatate:

• Pagina următoare: Asamblarea finală
• Pagina precedentă: Tabele
• Accesarea formularelor ( Tutorial HTML pentru avansaţi)
• Javascript ( Tutorial HTML pentru intermediari) - Cum să adagi Javascript în HTML