Difference between revisions of "Forms"

From TocaWiki
Jump to: navigation, search
(Created page with "==Funcions d'un formulari== Els formularis permeten fer arribar informació als llocs web. Trobem trobem formularis cada vegada que ens registrem a un lloc web, quan comprem...")
 
 
Line 66: Line 66:
 
|<input type="reset" />
 
|<input type="reset" />
 
|}
 
|}
[[Fitxer:Forms1.png]]
+
[[File:Forms1.png]]
 
==Aplicació d'estils als formularis==
 
==Aplicació d'estils als formularis==
 
Els formularis es poden complementar amb estils CSS:
 
Els formularis es poden complementar amb estils CSS:
 
*Podem utilitzar totes les propietats ja estudiades: fonts, colors, fons, vores, marges interns i externs, dimensions, etc.
 
*Podem utilitzar totes les propietats ja estudiades: fonts, colors, fons, vores, marges interns i externs, dimensions, etc.
 
*L'única diferència és el selector d’etiqueta: input és massa genèric, i a vegades volem discriminar aquells d’un tipus específic (type).
 
*L'única diferència és el selector d’etiqueta: input és massa genèric, i a vegades volem discriminar aquells d’un tipus específic (type).
[[Fitxer:Forms2.png]]
+
[[File:Forms2.png]]
 
*Aquest mecanisme combina amb la resta de selectors: id, class,...
 
*Aquest mecanisme combina amb la resta de selectors: id, class,...
 
*Per a fer diverses columnes i alinear-les correctament, haurem d’utilitzar taules (mètode no del tot correcte).
 
*Per a fer diverses columnes i alinear-les correctament, haurem d’utilitzar taules (mètode no del tot correcte).

Latest revision as of 13:38, 29 February 2024

Funcions d'un formulari

Els formularis permeten fer arribar informació als llocs web.

Trobem trobem formularis cada vegada que ens registrem a un lloc web, quan comprem en línia, quan enviem un correu electrònic,...

Els formularis necessiten, generalment, d’una llenguatge de programació que reculli la informació i faci el tractament:

  • Enviar un correu electrònic.
  • Emmagatzemar-la a la base de dades.
  • Utilitzar-la per a generar una altra pàgina.
  • etc.

Estructura d'un formulari

Els formularis a HTML es representen amb l’etiqueta <form>.

Tots els controls que tingui el formulari s’han de situar a l’interior d’un bloc d’aquest tipus.

Acostuma a tenir dos atributs:

  • action: la URL de la pàgina del servidor que rep el formulari.
  • method: un dels dos mètodes d’enviament de formularis.
<form action="subscripcio.php" method="post">
...
<!-- Informació i camps del formulari-->
...
</form>

La informació del formulari es pot enviar mitjançant dos mètodes:

  • POST: la informació s’envia com a part de la petició sense ésser visible a de forma directa l’usuari, mitjançant capçaleres HTTP.
  • GET: la informació s’envia mitjançant l’adreça, sent visible per a l’usuari.
# Etiqueta
1 <label>
2 <input type="text" />
3 <input type="password" />
4 <input type="radio" />
5 <fieldset> + <legend>
6 <select> + <option>
7 <textarea>
8 <input type="checkbox" />
9 <input type="submit" />
10 <input type="reset" />

Forms1.png

Aplicació d'estils als formularis

Els formularis es poden complementar amb estils CSS:

  • Podem utilitzar totes les propietats ja estudiades: fonts, colors, fons, vores, marges interns i externs, dimensions, etc.
  • L'única diferència és el selector d’etiqueta: input és massa genèric, i a vegades volem discriminar aquells d’un tipus específic (type).

Forms2.png

  • Aquest mecanisme combina amb la resta de selectors: id, class,...
  • Per a fer diverses columnes i alinear-les correctament, haurem d’utilitzar taules (mètode no del tot correcte).