Tutorial HTML - Formulare

Formularul este unul dintre cele mai importante unete folosite de un webmaster pentru a obtine informatii importante despre un internaut, informatii precum email, nume, adressa, telefon sau orice alte informaii.

In functie de necesitati infoarmatia poate fi procesata si stocata intr-un fisier, se pot realiza statistici, formulare de inscriere sau abonamente la informatia prezentata in pagina ta si multe altele.

HTML - Campuri de text

Inainte sa intram in detalii trebuie ar trebuii sa expunem putin bazele unui formular. Campurile de text au cateva atribute care trebuiesc mentionate inca de la inceput:

• type - Determina tipul campului de text. De exemplu: text, trimite, sau parola.
• name - Atribuie un nume campului pentru a pute face referire la el mai tarziu
• size - Seteaza marimea campului.
• maxlength - valoarea maxima de caractere ce pot fi introduse

html<form method="post" action="mailto:youremail@email.com">
	Name: <input type="text" size="10" maxlength="40" name="name" /> <br />
	Password: <input type="password" size="10" maxlength="10" name="password" />
</form>

Demo

NU folosi acest cod. Datele din formular nu vor fi criptate si nu vor fi sigure din punct de vedere al securitatii.

HTML - Formular de email

Sa adaugam acum si butonul de trimitere. In general, butonul de "trimitere" ar trebuii sa fie ultimul si sa aibe atributul name definit ca "Trimite". "Send", "Submit" sau ceva asemanator. Acest nume va fi numele butonului.

Va trebui deasemenea sa specificam o destinatie a datelor introduse in formular la fel ca si modul de transfer. Aceasta se poate face agaugand urmatoarele atribute formularului.

• method - Vom folosi metoda "post". Aceasta trimite formularul cu informatia introdusa fara sa afiseze detalli userului.
• action- Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisa informatia.

html<form method="post" action="mailto:youremail@email.com">
	Name: <input type="text" size="10" maxlength="40" name="name" /> <br />
	Password: <input type="password" size="10" maxlength="10" name="password" /><br />
	<input type="submit" value="Send" />
</form>

Demo

Trebuie doar sa schimbi adresa de e-mail cu una valabila pentru ca formularul sa functioneze corect.

HTML - Butoane Radio

Butoanele Radio sunt foarte populare, utile si usor de folosit. Cel mai intalnit exemplu a fi o intrebare cu multiple variante de raspuns. Atributele care ar trebuii cunoscute sunt urmatoarele.

• value - specifica ceea ce va fi trimis in cazul in care un user selecteaza un anume buton. Doar o singura valoare va fi trimissa.
• name - decide carui set de butoane apartine butonul selectat.

html<form method="post" action="mailto:youremail@email.com">
	Ce tip de pantofi porti ? <br />
	
	Culoare: 
	<input type="radio" name="culoare" value="inchis" /> Inchis 	
	<input type="radio" name="culoare" value="deschis" /> Deschis <br />
	
	Marime:
	<input type="radio" name="marime" value="mica" /> Mica
	<input type="radio" name="marime" value="medie" />Medie
	<input type="radio" name="marime" value="mare" /> Mare <br />
	<input type="submit" value="Email Myself" />
</form>

Demo

In cazul in care vei inlocuii adresa de email cu a ta vei primi un email cu: "marime=(alege) culoare=(alege)".

HTML - Checkbox

Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, doua sau mai multe variante de raspuns. Atributele name si value se folosesc la fel ca si pentru butoanele radio.

html<form method="post" action="mailto:youremail@email.com">
	Ce culoare de pantofi preferi ?<br/>

	<input type="checkbox" name="pantofi" value="negru" /> Negru simplu <br/>
	<input type="checkbox" name="pantofi" value="alb" /> Alb simplu <br/>
	<input type="checkbox" name="pantofi" value="gri" /> Nuante de gri <br/>
	<input type="checkbox" name="pantofi" value="alb negru " /> Alb cu negru <br/>

	<input type="submit" value="Email Myself" /> 
</form>

Demo

HTML - Alte tipuri de formulare de liste

Un alt model de formular tip lista este urmatorul, in care userul selecteaza o anumita linie care va fi trimisa ca si optiunea aleasa.

html<form method="post" action="mailto:youremail@email.com">
	Preferinte muzicale 
	<select multiple name="music" size="4">
		<option value="emo" selected>Emo</option> 
		<option value="metal/rock" >Metal/Rock</option> 
		<option value="hiphop" >Hip Hop</option> 
		<option value="ska" >Ska</option> 
		<option value="jazz" >Jazz</option> 
		<option value="country" >Country</option> 
		<option value="classical" >Classical</option> 
		<option value="alternative" >Alternative</option> 
		<option value="oldies" >Oldies</option> 
		<option value="techno" >Techno</option> 
	</select> 
	<input type="submit" value="Email Yourself" />
</form>

Demo

Un alt model de formular este meniul "dropdown". Acesta va fi afisat ca si un camp, care va afisa o lista atunci cand este executat un clik asupra lui.

html<form method="post" action="mailto:youremail@email.com">
	
	Nivel de studii?
	<select name="studii"> 
		<option>Alege</option> 
		<option>Scoala Generala </option> 
		<option>Liceu</option> 
		<option>Postliceala</option> 
		<option>Facultate</option> 
		<option>Doctorat</option>
	</select>
	
	<input type="submit" value="Email Yourself" /> 
</form>

Demo

HTML - formular de upload

Mai intai de toate trebuie mentionat ca acest formular este doar interfata, partea vizibila cu care un user va putea interactiona.. Pentru a face un formular complet de upload sunt necesare cunostinte de PHP si PERL iar javascriptul este si el binevenit.

Un formular de upload este compus din mai multe parti. Vom incepe prin a stabili marimea fisierului pe care il vom uploada. Acest lucru se face cu ajutorul unui cam ascuns. In continuare vom crea campul propriu-zis in care userul va putea scrie adresa fisierului sau pur si simplu sa sa dea browse pentru a deschide o fereastra windows explore.

html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />

Demo

HTML - Zone de text, Comentarii

In general zonele de text sunt foosite pentru a trimite comentarii. Blogurile si forumurile sunt principalele tipuri de pagini web care folosesc aceste optinui. Totusi exista multe alte tipuri de situri care folosesc zonele de text pentru a afla parerea userilor despre un anumit aspect.

Pentru a crea o zona de text vom specifica mai intaii atributele rowssi colsin interiorul tag-ului <textarea>. "Rows" va stabilii innaltime campului in linii de caractere iar "cols" lungimea unei linii in caractere. In exemplul urmator exista 5 linii a cate 20 de caractere. De asemenea strebuie specificat unul dintre atributele tagului wrap, acestea sunt:

• wrap=
• "off"
• "virtual"
• "physical"

Vom insista mai mult pe explicarea acestor valori in tutorialul destinat campurilor de text

html<form method="post" action="mailto:youremail@email.com">
	<textarea rows="5" cols="20" wrap="physical" name="comments">Scrie un comentariu</textarea>
	<input type="submit" value="Email Yourself" />
</form>

Deasemenea trebuie specificat ca ceea ce vei scrie intre tagul de deschidere si cel de inchidere va apare in interiorul zonei de text. In acest caz a fost folosita o invitatie predefinita: "Scrie un comentariu". In cazul in care vrei sa creezi un formular de contact, posti folosi acest simplu generator de formulare de contact