10 – Campuri si butoane in HTML

Câmpurile se introduc prin valoarea input, având atributele type, cu valorile „text”, „file” sau „password”, şi name, având ca valoare numele câmpului respectiv.

Câmpurile cu valoare text permit introducerea unei linii de text, cele password au un scop similar, dar nu afişează textul în clar (a se vedea formularul de login), iar câmpurile tip file permit ataşarea unor documente mesajului.

Butoanele, definite tot prin tag-ul input, au atributul type cu valorile „submit”.

Pentru început să facem un formular de login:
[html]
Email:
<input type="text" name="email">
Parola:
<input type="password" name="parola">
<input type="submit" name="submit" value="Trimite">
[/html]
Email:

Parola:

Simplu? Haideti să încercăm şi un formular de contact:

[html]
<h2>Contact:</h2>
Nume:
<input type="text" name="name">
Email:
<input type="text" name="email">
Mesaj:
<textarea cols="40" rows="7"></textarea>
Ataseaza un document:
<input type="file" name="attachement">
<br>
<input type="submit" name="submit" value="Trimite">
[/html]

Contact:

Nume:

Email:

Mesaj:

Ataseaza un document:

Hmm. Textarea?

Textarea este folosit în general pentru comentarii, mesaje sau oriunde este nevoie de mai mult spaţiu text decât în cazul unui câmp simplu.

Este marcat cu tag-urile <b><textarea></b> şi <b></textarea></b>, având atributele rows şi cols pentru definirea numărului de rânduri şi coloane.

Atributul wrap este folosit în cazul în care te aştepţi ca textul să depăşească dimensiunile casetei, având valorile soft, hard sau off.

wrap=”soft” va plasa un enter la finalul liniei in interfata, dar serverului ii va fi trimis textul exact asa cum e tastat
wrap=”hard” plaseaza enter la finalul liniei in interfata, enter care va fi tirmis si serverului, indiferent daca este sau nu tastat de utiliator
wrap=”off” textul apare exact asa cum este tastat atat in interfata cat si la server

Pentru exactitate, voi exemplifica şi două alte tipuri de text area, read-only şi disabled. Niciunul nu poate fi modificat, disabled fiind în plus marcat cu gri pentru a fi evident pentru utilizator.

Textarea readonly
Textarea disabled

A ieşit mai lung decât planificasem, dar nu am vrut să împart exemplul în foarte multe lecţii.

În episodul viitor, totul despre metode de selecţie.