Web Design Constanta Blog » html http://www.webdesign-constanta.com/blog web design constanta blog Sat, 17 Jul 2010 18:02:27 +0000 en hourly 1 http://wordpress.org/?v=3.0 Crearea unui formular HTML Partea 3 http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-3/ http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-3/#comments Tue, 09 Feb 2010 15:45:46 +0000 admin http://www.webdesign-constanta.com/blog/?p=194 In interiorul corpului unei pagini HTML se pot include mai multe formulare. Dacă procedaţi astfel, nu uitaţi să inseraţi o etichetă </FORM> anterior etichetei <FORM> a următorului formular. Browserul utilizatorului va cauza  probleme dacă se suprapun formulare într-o pagină.

Iată un exemplu simplu de pagină care conţine mai multe formulare:

<HTML>

<HEAD>

<TITLE>Numele şi adresa de e-mail ale utilizatorului</TITLE>

</HEAD>

<BODY>

<FORM METHOD=”POST” ACTION=”phpinfo.php”>

<H3> Numele şi adresa de e-mail ale utilizatorului</H3>

<BR>Nume:

<BR><INPUT TYPE=”TEXT” NAME=”numele_utilizatorului”>

<BR>Adresa de e-mail:

<BR><INPUT TYPE=”TEXT” NAME=”adresa_email”>

<BR>

<BR><INPUT TYPE=”SUBMIT” VALUE=”Trimite datele”>

</FORM>

<FORM METHOD=”POST” ACTION=”phpinfo.php”>

<H3> Numerele de telefon şi fax ale utilizatorului</H3>

<BR>Număr de telefon:

<BR><INPUT TYPE=”TEXT” NAME=”telefon”>

<BR>Fax

<BR><INPUT TYPE=”TEXT” NAME=”fax”>

<BR>

<BR><INPUT TYPE=”SUBMIT” VALUE=”Trimite datele”>

</FORM>

</BODY>

</HTML>

Când utilizatorul execută clic pe butonul de expediere, datele incluse în câm­purile formularului care conţine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeşte fie un nume şi o adresă de e-mail, fie numerele de telefon şi de fax, nu conţinutul tuturor celor patru câmpuri.

[photosmash id=1]

Share/Save

]]> http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-3/feed/ 0 Crearea unui formular HTML Partea 2 http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-2/ http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-2/#comments Tue, 09 Feb 2010 15:35:06 +0000 admin http://www.webdesign-constanta.com/blog/?p=188 Această parte descrie două controale elementare pe care le veţi folosi frecvent: caseta cu text şi butonul de expediere. In cele ce urmeaza veţi afla mai multe despre controalele pe care le puteţi folosi în construcţia formularelor HTML.

O casetă cu text permite utilizatorului să tasteze informaţii care pot fi apoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obţine date precum numele utilizatorului, adresa sa poştală sau adresa de e-mail. Pentru a crea o casetă cu text, scrieţi o etichetă HTML care are următoarea formă elementară:

<INPUT TYPE=”TEXT”  NAME=”text”>

Atributul NAME atribuie casetei cu text un nume, astfel încât conţinutul său să fie accesibil unui script PHP. Numele pe care îl atribuiţi unui control trebuie să fie unic în cadrul formularului şi trebuie să respecte regulile pentru denumirea variabile!or PHP, cu excepţia faptului că numele nu trebuie să înceapă cu simbolul dola­rului. Cu alte cuvinte, numele trebuie să înceapă cu o literă si nu trebuie să conţină alte caractere în afara literelor, a cifrelor şi a caracterelor de subliniere; în particular, numele nu trebuie să conţină spaţii. HTML nu are o etichetă /INPUT, deci nu încer­caţi să combinaţi o etichetă INPUT cu o asemenea etichetă.

Un buton de expediere permite utilizatorului să trimită serverului conţinutul unui formular. Fiecare formular HTML trebuie să aibă un buton de expediere. Pentru a crea un buton de expediere, scrieţi o etichetă HTML care are următoarea formă elementară:

<INPUT TYPE=”SUBMIT”  VALUE=”text”>

Atributul VALUE specifică textul care trebuie să apară pe suprafaţa butonului de expediere.

Iată un formular HTML complet, care include casete cu text ce preiau numele şi adresa de e-mail a utilizatorului:

<HTML>

<HEAD>

<TITLE>Numele şi adresa de e-mail ale utilizatorului</TITLE>

</HEAD>

<BODY>

<FORM METHOD=”POST” ACTION=”phpinfo.php”>

<H3> Numele şi adresa de e-mail ale utilizatorului</H3>

<BR>Nume:

<BR><INPUT TYPE=”TEXT” NAME=”numele_utilizatorului”>

<BR>Adresa de e-mail:

<BR><INPUT TYPE=”TEXT” NAME=”adresa_email”>

<BR>

<BR><INPUT TYPE=”SUBMIT” VALUE=”Trimite datele”>

</FORM>

</BODY>

</HTML>

Observaţi utilizarea etichetelor BR pentru alinierea etichetelor şi a con­troalelor, precum şi numele atribuite controalelor de tip casetă cu text. Când utilizatorul execută clic pe butonul de expediere, datele introduse de utilizator sunt trimise scriptului phpinfo.php

Voi continua in partea urmatoare.

Share/Save

]]> http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-2/feed/ 0 Crearea unui formular HTML Partea 1 http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-1/ http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-1/#comments Tue, 09 Feb 2010 15:23:50 +0000 admin http://www.webdesign-constanta.com/blog/?p=180 In urmatoarele cateva posturi va voi arata cum sa creati un formular HTML pentru site-ul dumneavoastra, pornind de la structura HTML pana la codul PHP. Sunt necesari mai multi pasi pentru a face acest lucru, si de aceea voi imparti aceasta tema in mai multe parti.

Mai întâi, creaţi schiţa HTML elementară, care va conţine controalele din formularul vostru. Apoi, încorporaţi controalele în structură; în particular, un formular HTML trebuie să includă un buton de expediere pe care utilizatorul execută clic pentru a trimite serverului datele din formular. Deoarece o singură pagină HTML poate conţine mai multe formulare, puteţi repeta de mai multe ori etapele intermediare ale acestui proces.

Crearea structurii HTML

Structura HTML pe care o folosiţi pentru a include un formular nu este deloc diferită, de fapt, de cea folosită pentru includerea unei pagini HTML obişnuite. De exemplu, iată o structură caracteristică:

<HTML>

<HEAD>

<TITLE>Titlul paginii este inserat aici</TITLE>

</HEAD>

<BODY>

Conţinutul paginii sau al formularului este inserat aici

</BODY>

</HTML>

In interiorul corpului unei pagini HTML care conţine un formular puteţi folosi orice etichetă HTML obişnuită. Pentru a descrie formularul în sine, folosiţi eticheta FORM, care are următoarea formă elementară:

<FORM METHOD=”metoda” ACTION=”url”>

Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificaţi întotdeauna valoarea POST. Atributul ACTION specifică adresa URL a scriptului PHP care prelucrează datele adunate prin intermediul formula­rului. Adresa URL poate fi o adresă completă, care include protocolul, numele gazdei şi calea de acces, respectiv o adresă parţială, care specifică o locaţie relativă la locaţia paginii curente, între eticheta FORM si eticheta sa /FORM corespunzătoare, plasaţi controalele formularului.

Ca începător, este mai bine să folosiţi în mod consecvent metoda POST, deoarece alegerea între metodele GET si POST este destul de complicată.

Ca regulă empirică, mulţi programatori folosesc GET pentru formulare care execută o căutare sau o interogare, respectiv POST pentru formulare care actualizează o bază de date sau un fişier. Două dezavantaje ale metodei GET sunt acelea că impune o limită asupra cantităţii de date care pot fi trimise scriptului de prelucrare şi că transferă date prin ataşarea şirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de către utilizator. Un avantaj al metodei GET este acela că utilizatorii pot insera semne de carte în rezultatele unei interogări sau ale unei căutări care foloseşte metoda GET, dar nu pot executa aceeaşi operaţie în cazul unei interogări sau al unei căutări care foloseşte metoda POST. Desigur, utilizatorii pot insera un semn de carte la pagina care conţine un formular ce foloseşte metoda POST; rezultaele sunt cele unde nu se poate insera semnul de carte.

Voi continua in urmatoarele posturi.

Share/Save

]]> http://www.webdesign-constanta.com/blog/web-design/crearea-unui-formular-html-partea-1/feed/ 0 Elemente de baza ale unei pagini web: Elementul HTML http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-elementul-html/ http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-elementul-html/#comments Tue, 17 Nov 2009 17:15:06 +0000 admin http://www.webdesign-constanta.com/blog/?p=100 5RXK8E5NHHVWJ Imediat dupa documentul doctype urmeaza elementul html, care este elementul de baza al structurii documentului, si tot ceea ce urmeaza este un descendent al elementului de baza. 6HBFJVXR5XQJ

Daca elementul de baza exista in contextul unui document care este identificat de catre elementul doctype ca fiind XHTML, atunci elementul html are nevoie si de atributul xmlns (XML Namespace), element care nu este necesar pentru documente HTML.

Iata codul care trebuie adaugat pentru documentele de tip XHTML:

<html xmlns=”http://www.w3.org/1999/xhtml”>

Iata un exemplu de cod pentru un document simplu XHTML de tip transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>

De observat ca elementul html contine elemente care impart documentul in doua sectiuni principale: elementul head si elementul body.

Share/Save

]]> http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-elementul-html/feed/ 0 Elemente de baza ale unei pagini web: Document tree http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-document-tree/ http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-document-tree/#comments Tue, 17 Nov 2009 16:59:12 +0000 admin http://www.webdesign-constanta.com/blog/?p=86 O pagina web poate fi considerata ca un copac care poate contine orice numar de ramuri. Exista reguli in ceea ce priveste cate elemente poate contine fiecare ramura. Pentru a intelege conceptul de “document tree“, sa luam drept exemplu o pagina HTML simpla ce contine elemente generale:

<html>
<head>

<meta content=”text/html;
charset=UTF-8″ http-equiv=”Content-Type”/>

<title>Pagina mea</title>

</head>

<body>

<h1>Aceasta este pagina mea</h1>

<p>Pagina mea contine multe lucruri folositoare. Contine <em>text evidentiat</em> si
un citat:
</p>

<blockquote>
<p>Acesta este un citat.</p>
</blockquote>

<h2>Iata un sub-titlu</h2>

<p>Si cam asta este totul.</p>

<hr/>

</body>

</html>

Putem observa ca elementul html contine de fapt doua elemente:  head si body.  head contine doua sub-ramuri: un element meta si un element title. Elementul body contine cateva titluri, paragrafe, si un citat.

Observati faptul ca exista un fel de simetrie in felul in care tag-urile sunt deschise si inchise. De exemplu, paragraful care contine:

“Pagina mea contine multe lucruri folositoare…”

are mai multe elemente de text, al doilea fiind inclus intr-un element em (element evidentiat).

Paragraful este inchis dupa ce continutul s-a incheiat, dar inainte de a incepe urmatorul element din document tree (in acest caz este un element blockquote).

Pozitionand tag-ul de inchidere al elementului paragraf </p> dupa elementul blockquote am strica structura documentului.

Share/Save

]]> http://www.webdesign-constanta.com/blog/web-design/elemente-de-baza-ale-unei-pagini-web-document-tree/feed/ 0