Vampire Andy Posted May 26, 2015 Share Posted May 26, 2015 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: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>Vizualizare Nu folosi acest cod. Datele din formular nu vor fi criptate şi nu vor fi sigure din punct de vedere al securităţii. 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: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>Vizualizare Trebuie doar să schimbi adresa de e-mail cu una valabilă pentru ca formularul să funcţioneze corect. 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:youremail@email.com"> 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>Vizualizare În cazul în care vei înlocui 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, 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:youremail@email.com"> <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>Vizualizare 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: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>Vizualizare Un alt model de formular este meniul "dropdown". Acesta va fi afişat ca şi un câmp, care va afişa o listă atunci când este executat un click asupra lui. <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> Vizualizare Formular de upload Mai întâi de toate trebuie menţionat că acest formular este doar interfaţa, partea vizibilă cu care un user va putea interacţiona . Pentru a face un formular complet de upload sunt necesare cunoştinţe de PHP , PERL şi javascript . Un formular de upload este compus din mai multe părţi. Vom începe prin a stabili mărimea fişierului pe care îl vom uploada. Acest lucru se face cu ajutorul unui câmp ascuns. În continuare vom creea câmpul propriu-zis în care userul va putea scrie adresa fişierului sau pur şi simplu să dea browse pentru a deschide o fereastră windows explore. <input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />Vizualizare HTML - Zone de text, Comentarii În general zonele de text sunt folosite pentru a trimite comentarii. Blogurile şi forumurile sunt principalele tipuri de pagini web care folosesc aceste opţinui. Totuşi există multe alte tipuri de site-uri care folosesc zonele de text pentru a afla părerea userilor despre un anumit aspect. Pentru a crea o zona de text vom specifica mai întâi atributele rows şi cols în interiorul tag-ului <textarea>. "Rows" va stabili înălţimea câmpului în linii de caractere iar "cols" lungimea unei linii în caractere. În exemplul următor există 5 linii a câte 20 de caractere. De asemenea trebuie specificat unul dintre atributele tagului wrap, acestea sunt: wrap= - "off" - "virtual" - "physical" <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>Vizualizare 1 Link to comment Share on other sites More sharing options...
Recommended Posts