HTML - Formulare

[kenzake powah!]

Formularul este unul dintre cele mai importante unelte folosite de un webmaster pentru a obţine informaţii importante despre o persoană, informaţii precum email, nume, adresă , telefon sau orice alte informaţii.

 

În funcţie de necesităţi infoarmaţia poate fi procesată şi stocată într-un fişier, se pot realiza statistici, formulare de înscriere sau abonamente la informaţia prezentată în pagina ta şi multe altele.

 

HTML - Câmpuri de text

 

 

Câmpurile de text au câteva atribute care trebuie menţionate încă de la început:

 

- type - Determina tipul câmpului de text. De exemplu: text, trimite, sau parolă.

- name - Atribuie un nume câmpului pentru a putea face referire la el mai târziu .

- size - Setează mărimea câmpului.

- maxlength - valoarea maximă de caractere ce pot fi introduse.

 

<form method="post" action="mailto:*****@*****.tld">

Name: <input type="text" size="10" maxlength="40" name="name"> <br />

Password: <input type="password" size="10" maxlength="10" name="password">
</form>

 

HTML - Formular de email

 

 

Să adăugăm acum şi butonul de trimitere. În general, butonul de "trimitere" ar trebui să fie ultimul şi să aibe atributul name definit ca "Trimite" ,"Send", "Submit" sau ceva asemănător. Acest nume va fi numele butonului.

 

Va trebui deasemenea să specificăm o destinaţie a datelor introduse în formular la fel ca şi modul de transfer. Aceasta se poate face agăugând următoarele atribute formularului./p>

 

- method - Vom folosi metoda "post". Aceasta trimite formularul cu informaţia introdusă fără să afişeze detalii userului.

- action - Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisă informaţia.

 

<form method="post" action="mailto:*****@*****.tld">

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>

 

HTML - Butoane Radio

 

 

Butoanele Radio sunt foarte populare, utile şi uşor de folosit. Cel mai întâlnit exemplu : o întrebare cu multiple variante de răspuns. Atributele care ar trebui cunoscute sunt următoarele.

 

- value - specifică ceea ce va fi trimis în cazul în care un user selectează un anume buton. Doar o singură valoare va fi trimisă .

- name - decide cărui set de butoane aparţine butonul selectat

 

<form method="post" action="mailto:*****@*****.tld">

Ce tip de pantofi porţi ? <br />

Culoare: 
<input type="radio" name="culoare" value="inchis">Închis

<input type="radio" name="culoare" value="deschis">Deschis <br />

Mărime:
<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>

 

HTML - Checkbox

 

 

Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, două sau mai multe variante de răspuns. Atributele name şi value se folosesc la fel ca şi pentru butoanele radio.

 

<form method="post" action="mailto:*****@*****.tld">

<p>Ce culoare de pantofi preferi ? </p> <p>

<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"></p> </form>

 

HTML - Alte tipuri de formulare de liste

 

 

Un alt model de formular tip listă este următorul, în care userul selectează o anumită linie care va fi trimisă ca şi opţiunea aleasă.

 

<form method="post" action="mailto:*****@*****.tld">

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>