Com afegir un formulari amb KompoZer

01 de 06

Afegiu un formulari amb KompoZer

Hi ha moltes vegades quan es creen pàgines web on cal processar les entrades enviades per l'usuari, com ara una pàgina d'inici de sessió, creació de nou compte o per enviar preguntes o comentaris. L'entrada de l'usuari es recopila i s'envia al servidor web mitjançant un formulari HTML. Els formularis són fàcils d'afegir amb les eines incorporades de KompoZer. Tots els tipus de camp de formulari que suporta HTML 4.0 es poden afegir i editar amb KompoZer, però per a aquest tutorial treballarem amb els botons de text, àrea de text, enviament i restabliment.

02 de 06

Crea un nou formulari amb KompoZer

KompoZer té eines de forma rica que podeu utilitzar per afegir formularis a les vostres pàgines web. Accediu a les eines de formulari fent clic al botó Formulari o al menú desplegable que s'adjunta a la barra d'eines. Tingueu en compte que si no escriu les vostres pròpies seqüències d'ordres de manipulació de formularis , haureu d'obtenir informació d'aquest pas de la documentació o del programador que va escriure el script. També podeu utilitzar els formularis mailto, però no sempre funcionen .

1. Col·loqueu el cursor a la ubicació on voleu que aparegui el formulari a la pàgina.
2. Feu clic al botó Formulari de la barra d'eines. S'obrirà el quadre de diàleg Propietats del formulari.
3. Afegiu un nom al formulari. El nom s'utilitza en el codi HTML generat automàticament per identificar el formulari i és obligatori. També heu de desar la vostra pàgina abans de poder afegir un formulari. Si esteu treballant amb una pàgina nova i no desada, KompoZer us demanarà que deseu.
4. Afegiu l'URL al script que processarà les dades del formulari al camp URL d'acció. Els controladors de formularis solen ser scripts escrits en PHP o en un llenguatge similar al servidor. Sense aquesta informació, la vostra pàgina web no podrà fer res amb les dades introduïdes per l'usuari. KompoZer us demanarà que introduïu l'URL del controlador de formularis si no l'introduïu.
5. Seleccioneu el mètode utilitzat per enviar les dades del formulari al servidor. Les dues opcions són GET i POST. Haureu de saber quin mètode requereix el script.
6. Feu clic a D'acord i el formulari s'afegeix a la vostra pàgina.

03 de 06

Afegiu un camp de text a un formulari amb KompoZer

Una vegada que hàgiu afegit un formulari a una pàgina amb KompoZer, el formulari es resumirà a la pàgina amb una línia de color blau clar. Afegiu els camps del formulari dins d'aquesta àrea. També podeu escriure text o afegir imatges, tal com ho faria en qualsevol altra part de la pàgina. El text és útil per afegir indicacions o etiquetes per formar camps per guiar l'usuari.

1. Trieu on vulgueu que el camp de text es mostri a l'àrea del formulari esbossat. Si voleu afegir una etiqueta, podeu escriure el text primer.
2. Feu clic a la fletxa avall que hi ha al costat del botó Formulari de la barra d'eines i seleccioneu Camp del formulari al menú desplegable.
3. S'obrirà la finestra Propietats del camp del formulari. Per afegir un camp de text, seleccioneu Text al menú desplegable anomenat Tipus de camp.
4. Doneu un nom al camp de text. El nom s'utilitza per identificar el camp en el codi HTML i el script de control del formulari necessita el nom per processar les dades. Es poden modificar altres atributs opcionals en aquest diàleg alternant el botó Més propietats / menys propietats o prement el botó Edició avançada, però de moment només introduirem el nom del camp.
5. Feu clic a D'acord i el camp de text apareix a la pàgina.

04 de 06

Afegiu una àrea de text a un formulari amb KompoZer

De vegades, cal introduir una gran quantitat de text en un formulari, com ara un missatge o un camp de preguntes / comentaris. En aquest cas, un camp de text no és apropiat. Podeu afegir un camp de formulari d'àrea de text mitjançant les eines de formulari.

1. Col·loqueu el cursor a l'esbós del formulari on voleu que la vostra àrea de text sigui. Si voleu escriure una etiqueta, sovint és una bona idea escriure el text de l'etiqueta, premeu Intro per passar a una nova línia i, a continuació, afegiu el camp del formulari, ja que la mida de l'àrea de text a la pàgina fa que sigui incòmode Etiqueta per estar a l'esquerra o dreta.
2. Feu clic a la fletxa avall que hi ha al costat del botó Formulari de la barra d'eines i seleccioneu Text Area al menú desplegable. S'obrirà la finestra Propietats de l'àrea de text.
3. Introduïu un nom per al camp de l'àrea de text. El nom identifica el camp del codi HTML i el guió de tractament del formulari utilitza per processar la informació enviada per l'usuari.
4. Introduïu el nombre de files i columnes que voleu que es mostri l'àrea de text. Aquestes dimensions determinen la mida del camp a la pàgina i la quantitat de text que es pot introduir en el camp abans de passar el desplaçament.
5. Es poden especificar opcions més avançades amb els altres controls d'aquesta finestra, però per ara el nom i les dimensions del camp són suficients.
6. Feu clic a D'acord i l'àrea de text apareix al formulari.

05 de 06

Afegiu un botó d'enviament i restabliment a un formulari amb KompoZer

Després que l'usuari hagi omplert el formulari de la vostra pàgina, cal que hi hagi alguna manera d'enviar la informació al servidor. A més, si l'usuari vol reiniciar o comet un error, és útil incloure un control que restableixi tots els valors del formulari al valor predeterminat. Els controls especials del formulari controlen aquestes funcions, anomenades botons d'enviament i reinici, respectivament.

1. Col·loqueu el cursor a l'àrea del formulari esbossat on voleu que es mostri el botó d'enviament o restabliment. Molt sovint, aquests es situaran per sota de la resta dels camps d'un formulari.
2. Feu clic a la fletxa avall que hi ha al costat del botó Formulari de la barra d'eines i seleccioneu Definir botó al menú desplegable. Apareixerà la finestra Propietats del botó.
3. Trieu el tipus de botó al menú desplegable anomenat Tipus. Les vostres opcions són Submit, Reset i Button. En aquest cas, triarem el tipus d'enviament.
4. Doneu un nom al botó, que s'utilitzarà en el codi HTML i de control de formularis per processar la sol·licitud del formulari. Els desenvolupadors web solen anomenar aquest camp "enviar".
5. Al quadre anomenat Valor, introduïu el text que hauria d'aparèixer al botó. El text hauria de ser curt però descriptiu del que passarà quan es pressioni el botó. Alguna cosa com "Enviar", "Enviar formulari" o "Enviar" són bons exemples.
6. Feu clic a Acceptar i el botó apareixerà al formulari.

El botó Restabliment es pot afegir al formulari utilitzant el mateix procés, però seleccioneu Reiniciar del camp Tipus en lloc de Enviar.

06 de 06

Edició d'un formulari amb KompoZer

Editar un camp de formulari o formulari a KompoZer és molt senzill. Simplement feu doble clic al camp que voleu editar i apareix el quadre de diàleg apropiat on podeu canviar les propietats del camp per satisfer les vostres necessitats. El diagrama anterior mostra un formulari senzill utilitzant els components que es detallen en aquest tutorial.