Index

Formulare

Elementul <form> defineste un formular folosit pentru a colecta date de la utilizatori.
Sa se creeze doua fisiere cu denumire identica cu titlurile de mai jos si continutul din chenare:

form_get.html

<form method="get" action="form_post.html">

<!--elemente de intrare -->

Utilizator: <input type="text" name="username" id="username"/>
<input type="button" onclick="alert(document.getElementById('username').value);" value="Afisare utilizator" /><br />

Parola:<input type="password" name="password" id="password"/>
<input type="button" onclick="alert(document.getElementById('password').value);" value="Afisare parola" /><br />

<input type="submit" value="Trimite" />
</form>

form_post.html

<form method="post" action="form_get.html">

<!--elemente de intrare -->

Utilizator: <input type="text" name="username" id="username"/>
<input type="button" onclick="alert(document.getElementById('username').value);" value="Afisare utilizator" /><br />

Parola:<input type="password" name="password" id="password"/>
<input type="button" onclick="alert(document.getElementById('password').value);" value="Afisare parola" /><br />

<input type="submit" value="Trimite" />
</form>

Dupa vizualizarea functionarii acestor 2 formulare, in primul formular "form_get.html" se vor integra elemente descrise mai jos:checkbox-uri, butoane radio, meniuri drop-down si buton de reset.

Accesare variabile cu javascript:
document.getElementById(''username'').value

Accesare variabile cu PHP:
$_GET['username']
<?php echo $_GET['username']; ?>

 

Tagul input nu are nevoie de un tag de inchidere si poate fi de mai multe tipuri, dupa cum urmeaza:
- text
- password
- radio
- checkbox
- reset
- submit


HTML - campuri de text si parole

Cu siguranta ai completat o sumedienie de-a lungul timpului pe internet.

<input type="text" name="username" id="username"/>

<input type="password" name="password" id="password"/>

Vizualizare

Scrie ceva in casutele de mai sus pentru a vedea diferenta.


HTML - checkboxuri

Ideale pentru a oferi utilizatorului optiunea de a selecta mai multe variante de raspuns.

<input type="checkbox" name="vehicle" value="Bike"/> checkbox Bike

<input type="checkbox" name="vehicle" value="Car"/> checkbox Car

<input type="checkbox" name="vehicle" value="Truck" /> checkbox Truck

Vizualizare

checkbox Bike

checkbox Car

checkbox Truck


HTML - Radio

Si aici nu ma refer la un radio FM, ci la un cerculet care ofera posibilitatea de a alege o SINGURA varianta de raspuns pentru intrebari cu un singur raspuns.

<input type="radio" name="cantitate" value="1" />1<br/>

<input type="radio" name="cantitate" value="2"/>2<br/>

<input type="radio" name="cantitate" value="3"/>3<br/>

Vizualizare

1

2

3

HTML - Drop Down

Si aici nu ma refer la un radio care canta si la un cerculet care ofera posibilitatea de a alege o SINGURA varianta de raspuns in cazul in care avem de-a face cu o intrebare.

<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Vizualizare

TODO: Sa se creeze un buton care afiseaza un mesaj de alerta cu elementul curent din meniul drop-down, la fel cu cel care afiseaza utilizatorul/parola din primul exemplu.


Elementul <button>

Elementul <button> defineste un buton:

Exemple

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Rezultatul codului de mai sus:

 

HTML - Butoane de submit

Aici va trebui sa dam si o valoare atributului submit, aceasta fiind textul care va fi afisat pe butonul generat.

<input type="submit" value="Submit" />

<input type="submit" value="Continuare>>" />

HTML - Butoane de reset

Aici ca si la atributul submit va trebui sa dam o valoare, aceasta fiind textul care va fi afisat pe butonul generat. Acest buton este foarte folositor in cazul in care userul completeaza marea majoritate a formularului cu informatii gresite sau eronate.

<input type="reset" value="Reset" />

<input type="reset" value="Sterge tot " />


Câmpuri de intrare HTML - Mentiune

Trebuie specificat ca aceste formulare si butoane nu vor functiona pe deplin fara ajutorul unor fisiere in php sau javascript care sa execute actiunea dorita atunci cand se acceseaza un anumit buton.