Programare HTML 1-Formulare pe site -Lectia Numarul 11
Formularele sunt utilizate pentru colectarea datelor introduse de un utilizator. Ele pot fi folosite ca interfață pentru o aplicație web, sau pentru a trimite date pe web. Un formular contine elemente interactive(casete ,butoane ,meniuri) ce permit utilizatorului sa introduca date. Dupa parerea mea, formularele nu sunt de obicei utile. Acestea tind să fie utilizate împreună cu un limbaj de programare pentru a procesa informațiile introduse de utilizator iar daca nu stii un astfel de limbaj (javascript/php) nu prea ai ce sa faci cu un formular . Aceste scripturi iau toate felurile de subiecte care sunt în mare parte în afara domeniului de competență al acestui site, deoarece acestea necesită alte limbi decât HTML și CSS. Etichetele de bază utilizate în HTML efectivă a formelor sunt form, input, textarea, select și option.<form>...</form>
Acest element permite introducerea datelor in cadrul unui formular . Tipul datelor introduse este specificat cu ajutorul atributului type .Valorile atributului type pot fi: text, radio, checkbox, submit, password , etc;
Ex:
Atentie : Formularul in sine nu este vizibil . De asemenea , in cele mai multe browsere lungimea campului de text este de 20 de caractere.<html> <!--Acesta este inceputul documentului-->
<head> <!--Inceput antet-->
<title>GhidSoft Formulare</title><!--Titlu Pagini-->
</head> <!-- Sfarsit antet-->
<body> <!-- Inceputul corp documentului. Zona vizibila de pe site-->
<form>
Nume : <input type="text" name="nume">
Prenume : <input type="text" name="prenume">
</form>
</body><!--Sfarsit corp documentului-->
</html><!-- Sfarsit documentului-->
Form - definește formularul și în cadrul acestei etichete, dacă folosiți un formular pentru ca un utilizator să trimită informații (pe care le asumăm la acest nivel), actioneaza necesar un atribut pentru a indica formatul în care conținutul său va fi trimis.
Atributul -method spune forma modul în care datele din acesta va fi trimis și poate avea :
- get, care este implicit, și încuietorile informațiile din formular pe o adresă web
- post, care ( în principal) transmite informațiile sub forma chip nevăzut lui.
get - se utilizează pentru fragmente mai scurte de informații nesensibile - puteți vedea, de exemplu, informațiile pe care le-ați trimis în căutarea unui site web să apară în adresa web a paginii cu rezultatele căutării.
post - este utilizat pentru depuneri mai lungi și mai sigure, cum ar fi formularele de contact.
Deci un element de formă va arăta astfel:
<form action="processingscript.php" method="post"></form>
Textarea - este, în principiu, o cutie de text mare, cu mai multe linii. Numărul anticipat de rânduri și coloane pot fi definite cu atributele : rows și cols, cu toate că puteți manipula dimensiunea conținutului folosind CSS.
<textarea rows="5" cols="20">Coding Web</textarea>
Defineste o zona de text (caseta ) in cadrul unei linii, in care se pot introduce oricate caractere dorim.
Ex:
<html>
<head>
<title>Textarea</title>
</head>
<body>
<textarea rows="10" cols="30">Aici puteti scrie un roman intreg .</textarea>
</body>
</html>
Select
Tag - ul select funcționează cun tag - ul option pentru a face drop-down selectați casetele.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
Când se trimite formularul, se va trimite valoarea opțiunii selectate. Această valoare va fi textul dintre eticheta opțiunii de deschidere și închidere selectată, cu excepția cazului în care se specifică o valoare explicită cu atributul value, caz în care acesta va fi trimis în schimb. Deci, în exemplul de mai sus, dacă primul element este selectat, va fi trimis "Opțiunea 1", dacă este selectat cel de-al treilea element, va fi trimisă "a treia opțiune".
Nume
Toate etichetele menționate mai sus vor arăta foarte bine prezentate pe pagină, dar dacă ați conectat formularul la un script de manipulare a formularelor, toate acestea vor fi ignorate. Acest lucru se datorează faptului că câmpurile formularului au nevoie de nume . Deci, pentru toate câmpurile, atributul name trebuie adăugat, de exemplu :
<input type="text" name="codingweb">.
Un formular de contact pentru Coding Web , de exemplu, ar putea arata cam ca cel de mai jos. (Notă: acest formular nu va funcționa decât dacă există un fișier "contactus.php", care este menționat în atributul de acțiune al etichetei formularului, pentru a gestiona datele trimise).
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="submit"></p>
</form>
Input
Tag - ul input este baza formularelor . Poate avea o multitudine de infatisari , dintre care cele mai frecvente sunt prezentate mai jos :
<input type="text"> sau pur și simplu <input> este o casetă de text standard. Acest lucru poate avea și un value atribut, care stabilește textul inițial în caseta de text.
<input type="password"> este similar cu caseta de text, dar caracterele introduse de utilizator vor fi ascunse.
<input type="checkbox"> este o casetă de selectare, care poate fi activată și dezactivată de către utilizator. Aceasta poate avea, de asemenea, un checked atribut ( - atributul nu necesită o valoare) și face ca starea inițială a casetei de control să fie activată.
<input type="checkbox" checked>
<input type="radio"> este similar cu o casetă de selectare, dar utilizatorul poate selecta doar un buton radio într-un grup. Acest lucru poate avea și un checked atribut.
<input type="submit"> este un buton care, atunci când este selectat, va trimite formularul.
Puteți controla, de exemplu, textul care apare pe butonul de trimitere cu value atributul
<input type="submit" value="Ooo. Look. Text on a button. Wow">.
Butonul de tip submit
La apasarea butonului Submit ,continutul formularului se transmite catre un alt fisier. In cadrul tag-ului <form> are loc atribuire method="get". Atributul method spune formularului cum vor fi trimise datele si poate avea valorile : get si post. Atributul action al formularului defineste numele fisierului in care va fi copiat continutul . Definirea butonului submit se face cu elementul <input> cu atributul : type="submit " ,value="Submit"
EX:
<html>
<head>
<title>Buton de trimitere</title>
</head>
<body>
<form name="input" action="input.asp" method="get" >
User : <input type="text" name="utilizator">
<br>
Password: <input type="password" name="parola">
<input type="submit" name="Trimite">
</form>
</body>
</html>
Atentie ! : Extensia fisierului "input.asp" provine din engleza : Active Server Page iar datele trimise prin acest document vor fi prelucrate de un server.
<fieldset>...</fieldset>
Defineste un set de campuri de text . Aceste campuri vor fi incadrate de o bordura si intreg setul va capata un titlu.
<legend>....</legend> - Defineste titlul setului de campuri.
<html>
<head>
<title>Tutorial</title>
</head>
<body>
<fieldset>
<legend>Informatii generale</legend>
<form >
Html :<input type="text" size="5">
CSS: <input type="text" size="5">
</form>
</fieldset>
</body>
</html>
Butoanele radio se folosesc atunci cand dorim ca utilizatorul sa selecteze o singura varianta dintr-un numar limitat de optiuni .
Ex:
<html>
<head>
<title>Tutorial Radio Button</title>
</head>
<body>
<form >
<input type="radio" name="albastru" value="albastru">Albastru
<br>
<input type="radio" name="rosu" value="rosu">Rosu
</form>
</body>
</html>
Butoanele de tip checkbox se folosesc atunci cand dorim ca utilizatorul sa poata alege mai multe variante dintre optiunile prezentate.
<html>
<head>
<title>Tutorial CHECKBOX Button</title>
</head>
<body>
<h2>Ce cunostinte ai in domeniul programarii web ?</h2>
<form >
HTML : <input type="checkbox" name="limbaj" value="HTML">
<br>
CSS : <input type="checkbox" name="limbaj" value="CSS">
<br>
PHP : <input type="checkbox" name="limbaj" value="PHP">
<br>
</form>
</body>
</html>
Atentie ! - Rețineți că, ca etichetele img și br ,si eticheta input , care nu înconjoară nici un conținut, nu necesită o etichetă de închidere.
Multumesc pentru atentie iar daca ti-a placut acest articol sau ti-am fost de ajutor distribuie acest continut mai departe pe facebook si pe google.
