La funció dels formularis és que l'usuari pugui ingressar i enviar dades al servidor.
Però HTML només s'encarrega de l'estructura del formulari. Després per processar aquesta informació caldrà un altre llenguatge com PHP
Les etiquetes <form> i </form> ens permeten definir un formulari. L'estructura bàsica seria la següent
<form>
elements de tipus input
</form>
Per exemple:
L’etiqueta <form> i </form> ens pernet definir un formulari en una pàgina.
Quan treballem amb PHP, per poder enviar les dades al servidor, l’etiqueta FORM té dues propietats que cal inicialitzar obligatòriament: action i method.
La propietat action indica el nom de l’arxiu o pàgina que rebrà les dades ingressades per l’operador del formulari i que seran enviades al servidor quan es presioni el botó de submit
Per exemple:
<html>
<head>
<title>Formulari d' entrada del dades</title>
</head>
<body>
<form method="post" action="pagina2.php">
El teu nom es:
<input type="text" name="nombre">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Com es pot veure aquesta pàgina conté marques HTML. L’etiqueta <form> i </form> ens pernet definir un formulari en una pàgina.
Quan treballem amb PHP, per poder enviar les dades al servidor, l’etiqueta FORM té dues propietats que cal inicialitzar obligatòriament: action i method.
La propietat action indica el nom de l’arxiu o pàgina que rebrà les dades ingressades per l’operador del formulari i que seran enviades al servidor quan es presioni el botó de submit
La propietat method indica com s’organitzen aquestes dades per enviar-les al servidor, i pot ser amb el mètode post o get. Normalment les dades s’envien amb el mètode post.
Per crear un camp de tipus text per l’ingrés del nom cal definir un objecte de tipus “text” i donar-li un nom a aquest objecte:
La propietat type ens permet definir el tipus de control i la propietat name ens permet indicar el nom del control o camp.
<input type="submit" value="confirmar">
També en aquest cas tenim l’etiqueta input però la propietat type ens indica que es tracta d’un botó d’enviament de dades. En la propietat value estem indicant el texte que volem que apareixi en el botó.
Un altre exemple:
<input type="text" name="nombre">
De tipus submit
<input type="submit" value="confirmar">
De tipus radio-button
En un radio només es pot seleccionar una opció a diferència del checkbox que es pot seleccionar més d’un.
De tipus check-box
<input type="checkbox" name="check1">nom_opcio1 <br>
Per crear un camp de tipus text per l’ingrés del nom cal definir un objecte de tipus “text” i donar-li un nom a aquest objecte:
<input type="text"
name="nombre">
La propietat type ens permet definir el tipus de control i la propietat name ens permet indicar el nom del control o camp.
Finalment el formulari té un botó de tipus submit.
<input type="submit" value="confirmar">
També en aquest cas tenim l’etiqueta input però la propietat type ens indica que es tracta d’un botó d’enviament de dades. En la propietat value estem indicant el texte que volem que apareixi en el botó.
Un altre exemple:
<html><head><title>Exemple</title></head>
<body>
<FORM action="pagina2.php" method="post">
<P>
Nom: <INPUT type="text" name="nombre"><BR>
Cogmon: <INPUT type="text" name="apellido"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="submit" value="Enviar">
email: <INPUT type="text" name="email"><BR>
<INPUT type="submit" value="Enviar">
<INPUT type="reset"> </P>
</FORM>
</body>
</html>
En aquest cas tenim 3 camps de tipus text i tenim un nou input de tipus reset:
<INPUT type="reset">
"reset" ens permet esborrar els camps del formulari.
Els elements que pode inserir en un formulari són els següents :
De tipus text</html>
En aquest cas tenim 3 camps de tipus text i tenim un nou input de tipus reset:
<INPUT type="reset">
"reset" ens permet esborrar els camps del formulari.
Els elements que pode inserir en un formulari són els següents :
- Caixes de text: text, password, multi-linia, hidden
- Botons: De tipus submit, reset i genèrics
- Botons de ràdio (radio-buttons)
- Casilles de verificació (check-box)Botons de radio
- Finestres de selecció simple
- Finestres de selecció múltiple
<input type="text" name="nombre">
De tipus submit
<input type="submit" value="confirmar">
De tipus radio-button
<input type="radio" name="radio1" value="suma">sumar<br>
<input type="radio" name="radio1" value="resta">restar
Com es pot veure l'atribut name és el mateix pels dos inputs.
Això és important perquè el navegador sàpiga que es tracta del mateix camp.
<input type="radio" name="radio1" value="resta">restar
Com es pot veure l'atribut name és el mateix pels dos inputs.
Això és important perquè el navegador sàpiga que es tracta del mateix camp.
En un radio només es pot seleccionar una opció a diferència del checkbox que es pot seleccionar més d’un.
De tipus check-box
<input type="checkbox" name="check1">nom_opcio1 <br>
<input type="checkbox" name="check2">nom_opcio2 <br>
De tipus password
<input type="password" name="pwd">
De tipus password
<input type="password" name="pwd">
Cap comentari:
Publica un comentari a l'entrada