Formulare

postat acum 4 ani de Stefanescu Mihai in categorie HTML

Formularele HTML sunt necesare la colectarea informatiilor de la vizitatori. De exemplu, in timpul inregistrarii pe un site doresti informatii precum nume, adresa de email, parola, etc.

Un formular poate prelua aceste informatii si le poate transmite mai departe catre un script ASP sau un script PHP.

Cand discutam de formulare HTML discutam despre mai multe tipuri de campuri, textarea, drop-down, butoane radio, checkbox, etc.Avem urmatoarea sintaxa pentru formulare:

<form action="URLul Scripturlui" method="GET/POST">
    Aici avem input, textarea, radio button, sau orice alt element necesar.
</form>

Atribute form:

In afara de atributele obisnuite avem si cateva atribute specifice formularelor:

Atribut Descriere
action URL-ul scriptului (PHP sau ASP) ce va procesa informatiile din formular.
method Metoda de transmitere a datelor. Poate fi GET sau POST.
target Specifica fereastra in care sunt procesate informatiile. Poate fi _blank, _self, _parent etc.
enctype Acest atribut ne ajuta sa specificam modul de encodare a datelor inainte de a fi trimise catre server. Valori posibile:application/x-www-form-urlencoded

 

    • – Aceasta este o metoda standard pentru scenarii simple.

mutlipart/form-data

  • – Aceasta este o metoda de upload binar al datelor pentru fisiere de tipul imagine, fisier text, etc.

Elemente Formular

Sunt mai multe tipuri de elemente ce pot fi folosite intr-un formular pentru a colecat informatii de la utilizatori.

  • Text Input
  • Checkbox-uri
  • Butoane Radio
  • Select Box-uri
  • File Select
  • Hidden
  • Submit si Reset

Text Input

Acest tip de element al unui formular poate fi folosit pentru:

  • Texte pe un singur rand – Acest tip de element este folosit pentru text pe un singur rand (ex: search box, nume, email, etc). Este creat folosind tag-ul <input type=’text’>.
<input type="text" name="nume_client" />
  • Parole – Tot acest tip de element se foloseste si pentru parole, dar in forma <input type=’password’> pentru a ascunde caracterele scrise.
<input type="password" name="parola_client" />
  • Texte pe mai multe randuri – Acest element este folosit atunci cand dorim sa scriem un text mai mare (pe mai multe de 1 rand). Pentru acest tip de informatie trebuie sa folosim elementul <textarea>.
<textarea rows="5" cols="70" name="descriere_produs">Introdu o descriere pentru produsul tau aici...</textarea>

Checkbox-uri

Checkbox-urile sunt folosite pentru a selecta mai multe optiuni/ Pot fi creeate folosind tag-ul <input type=’checkbox’>

Vreau sa invat:
<input type="checkbox" name="CSS" value="on"> CSS
<input type="checkbox" name="HTML" value="on"> HTML

Atribute

Atribut Descriere
type Indica tipul input-ului (in cazul checkbox-ului avem type=’checkbox‘).
name Acest atribut ne ajuta sa preluam informatiile pe partea de server side (ASP sau PHP)
value Valoarea checkbox-ului selectat.
checked Acest atribut nu il setam decta daca dorim ca checkbox-ul sa fie selectat in mod standard.

Butoane Radio

Butoanele radio sunt folosite pentru a selecta o singura optiune din mai multe. Si acestea sun creeate tot cu ajutorul tag-ului input cu forma: <input type=’radio’>

<input type="radio" name="de_invatat" value="php"> PHP
<input type="radio" name="de_invatat" value="asp"> ASP

Atentie: pentru a fi din acelasi grup (utilizatorul poate selecta decat una din mai multe optiuni) treuie sa aiba aceeasi valoare la name.

Drop Down

Un DropDown este un element din care utilizatorul poate selcta o optiune dintr-o lista.

<select name="dropdown">
<option value="CSS" selected>CSS</option>
<option value="html">HTML</option>
</select>

 Atribute

Putem folosi urmatoarele atribute in tag-ul <select>:

Atribut Descriere
name Folosit pentru a prelua informatiile pe partea de server-side.
size Folosit pentru a specifica numarul de elemente dupa care sa apara scrollbar
multiple Daca acest atribut este setat atunci utilizatorii pot selecta mai multe optiuni.

Putem folosi urmatoarele atribute in tag-ul <option>:

Atribut Descriere
value Aceasta valoare va fi trimisa catre script atunci cand o optiune este selctata
selected Specifica optiunea ce trebuie sa fie selectata in mod default.

 File Upload

Daca doresti sa le permiti utilizatorilor tai sa uploadeze fisiere pe site-ul tau atunci va trebuii sa folosesti acest element. Si acest element de formular este creeat tot cu ajutorul tag-ului <input>.

<form action="URL Script" method="POST" enctype="multipart/form-data">
    Selectare imagine:
    <input type="file" name="fisier_upload">
</form>

Tipuri de butoane

Avem mai multe optiuni de butoane in HTML. Aceste butoane pot fi creeate tot cu tag-ul <input> setand valoare button la type.

Type Descriere
submit Acesta este un buton ce va trimite informatiile din formular catre server.
reset Acesta este un buton ce va reseta toate campurile formularului la valorile default.
button Acest tip de buton actioneaza un anumit script server-side cand este apasat.
image Acesta este un buton de submit pe fundalul caruia putem folosi o imagine.
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="images/logo.png" />

 Elemente Ascunse

Acest tip de element este folosit pentru a ascunde informatii in pagina ca mai tarziu sa fie trimise catre server.

<form action='URL Script' method='POST'>
<p>Acum esti pe pagina 15</p>
<input type="hidden" name="nume_pagina" value="pagina_15" />
<input type="submit" name="submit" value="Submit" />
</form>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!

Comentariu postate de minecraft free download pc la data de 14.05.2019
I'm amazed, I must say. Seldom do I come across a blog that's both educative and amusing, and let me tell you, you have hit the nail on the head. The issue is something too few people are speaking intelligently about. I'm very happy I found this during my search for something concerning this.
Comentariu postate de nike shoes la data de 14.05.2019
I precisely desired to thank you so much yet again. I am not sure the things I would've sorted out without these recommendations discussed by you over that problem. It actually was the horrifying concern in my position, but seeing a new professional strategy you treated the issue took me to weep over fulfillment. I am just happy for this help and even believe you find out what an amazing job you have been putting in educating most people by way of a blog. I am sure you haven't got to know any of us.
Comentariu postate de minecraft download for free la data de 15.05.2019
It's difficult to find educated people for this topic, however, you seem like you know what you're talking about! Thanks
Comentariu postate de minecraft for free la data de 15.05.2019
If you are going for best contents like me, only pay a quick visit this site all the time as it provides quality contents, thanks
Comentariu postate de minecraft download mojang la data de 17.05.2019
Woah! I'm really loving the template/theme of this blog. It's simple, yet effective. A lot of times it's difficult to get that "perfect balance" between usability and visual appearance. I must say that you've done a awesome job with this. Additionally, the blog loads very fast for me on Firefox. Excellent Blog!