Justi 10 de marzo de 2008 a las 12.25
   Imprimir artículo
elWebmaster.com

Taller de PHP: Procesar un formulario (Parte I)


Taller de PHP, Inputs de un formulario¡Hola, bienvenidos a la octava clase del Taller de PHP! Esta clase estará dividida en dos partes, por una cuestión de prolijidad. En esta primera parte vamos a ver algunos tipos de campos que podemos tener en el formulario.

Los diferentes campos que podemos tener en un formulario son inputs, selectbox y textarea. A su vez los inputs se dividen en de tipo texto, radio, checkbox, password, hidden, button, submit, reset. Son un montón, así que veamos uno por uno.

Inputs

El m√°s com√ļn de todos es el de tipo text. Este sirve para completar una sola linea de texto y tiene que tener las siguientes propiedades.

<label for="input_campo">Nombre Campo</label>
<input id="input_campo" type="text" name="nombreCampo" value="" />

Bueno, ustedes seguramente ven lo de arriba y se estarán diciendo: ¡Un momento, cerebrito! Por lo que intentare explicar qué es cada cosa.

Primero van a ver una etiqueta label que no la nombr√© antes. Esta etiqueta no es obligatoria incluirla, pero es lo correcto, con la misma le van a poder indicar un nombre al campo para que todo el mundo sepa lo que est√° completando. En el for tienen que incluir la id del campo y esto me da pie para explicar esta √ļltima.

La id del input es un identificador √ļnico, no puede haber ning√ļn otro elemento con este nombre en toda la p√°gina. El nombre es a gusto de ustedes, pero por convenci√≥n se utilizan nombres relacionados con el elemento que est√°n identificando.

Consejo: a la hora de crear una id es muy √ļtil, por experiencia propia, ponerle primero el tipo de elemento html que es y luego que representa, si se fijan yo eleg√≠ input_campo, ya que es un input y como us√© un nombre gen√©rico le puse campo, pero ah√≠ podr√≠a ser input_direccion, input_telefono, input_email. Esto les va a resultar √ļtil a la hora de armar un CSS o realizar acciones con Javascript. Van a poder identificar el elemento muy f√°cilmente.

Con type le indicamos el tipo de input que es, en este caso es un texto, name es obligatorio y lo utilizaremos para levantar la variable POST y value es el contenido del campo, si lo dejamos con las dos comillas y sin contenido por defecto no nos va a aparecer nada en el campo, sino podemos completarlo con alguna frase del estilo para que nos aparezca adentro del campo.


<label for="input_contacto">Nombre Campo</label>
<input id="input_contacto" type="text" name="nombreContacto" value="Complete con sus nombres y apellidos" />

Estos dos campos se ven de la siguiente manera:

Bueno, los inputs de tipo text los utilizamos para casos en que el usuario debe completar un solo reglón. Como completar con sus nombres y apellidos, dirección, teléfono, email, etc.

También tenemos los inputs de tipo Radio, cuya sintaxis es la siguiente:


<label for="input_si">Si</label><input id="input_si" type="radio" name="suscribirse" value="si" />
<label for="input_no">No</label><input id="input_no" type="radio" name="suscribirse" value="no" />

¬ŅQu√© tenemos ac√°? F√≠jense que name es el mismo para ambos inputs, lo que cambia es el value (y la id obvio, no se puede repetir id en toda la pagina). Este tipo de campos es autoexcluyente, s√≥lo se puede marcar una opci√≥n, y por php se recibir√° √ļnicamente el valor que fue marcado. El mismo se ve de la siguiente manera:

Otro caso similar es el tipo Checkbox, los cl√°sicos cuadraditos que se utilizan para tildar y destildar, es muy com√ļn ver este tipo de inputs antes de registrarnos en alg√ļn lugar y que nos pregunten si estamos de acuerdo con los t√©rminos y condiciones.

La sintaxis es la siguiente:

<input id=input_acuerdo" type="checkbox" name="acuerdoLegal" value="1" />

En caso de que NO este marcado por el usuario al momento de hacer un submit del formulario, este campo no se envía y al procesarlo por Php, veremos que no existe la variable POST correspondiente a este campo.

Otro tipo de input es Password, esta propiedad hace que el campo en lugar de ver el texto que se escribe en él, aparezcan los clásicos redondelitos negros ocultando la información.


<input id="input_password" type="password" name="password" value="" />

Luego tenemos el tipo Hidden, que es un campo oculto, en el podemos poner información pre-definida que el usuario no tiene que completar, entonces no se muestra pero si se envía.


<input type="hidden" name="idUsuario" value="25" />

Por √ļltimo vamos a ver el tipo Submit que es el campo que va a enviar nuestro formulario


<input type="submit" name="submit" value="Enviar consulta" />

que se va a ver de la siguiente forma

Bueno, eso es todo por esta clase, la semana que viene seguimos con el resto de los campos del formulario que nos faltan.

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. freeman dice:

    q tal … saludos…JUSTI

    no habia podido dejar comentarios en los anteriores clases pero ya estoy a qui jejeje…

    siento que avanzamos poco a poco….

    nada mas tengo unas dudas sobre el tipo HIDDEN, dice que se envia algo que el usuario no va completar o ver… y que es una informacion pre-definida.. pero que tipo de informacion se envia. a ver si entendi, digamos que manda un globo de informacion de algo… sobre este usuario en este caso es el id de usuario estoy en lo corecto…???

    y en el siguiente tipo submit, este tipo lo unico que hace es mostrar el boton de envio de formulario…..estoy ne lo corecto..

    saludos de ixtepec, oaxaca…..

  2. Thor dice:

    Holas freeman!

    Ac√° vengo a ver si te puedo ayudar con la pregunta.

    Supongamos que tenemos una base de datos con muchos usuarios, cada uno con un n√ļmero (ID) de usuario.

    Cuando nosotros necesitamos que esta información se mande desde la página para saber quién mandó el formulario (por ejemplo) pero no queremos que el usuario la ingrese (bien porque podría hacerlo mal o porque podría no conocer su ID), lo que hacemos es, nosotros como webmasters, poner esta id en un campo oculto y cuando él apriete el botón de submit, envíe todo el formulario, y la ID del usuario que le corresponde esa información.

    Con respecto al ultimo input, si, lo √ļnico que hace mostrar un bot√≥n que al cliquearlo, enviar√° todo el formulario.

  3. Nelson Obando dice:

    bueno, tengo una consulta: sufri mucho para lograr, que llegue abrir el archivo de contacto_exitoso.php, hice desde modificar el php.ini hasta instalar varios servidores smtp, y funciono SUPUESTAMENTE, el QK SMTP Server 3, el cual logra hacer que se abra el archivo contacto_exitoso.php, pero en realidad si me fijo en los detalles del QK SMTP Server 3 dice que no envia nada! por lo tanto no llegua nada al correo xq no permiten conecciones de IP’s dinamicas o cosas asi, bueno espero una pronta respuesta, QUE PUEDO HACER??? Gracias…!

  4. César Cancino dice:

    Hola Nelson Obando, am√≠ me huele que no est√°s utilizando el Apache como corresponde, te recomiendo que instales el APPSERVER, es un programa que trae incorporado PHP 5, MySQL, PHPMyAdmin, Apache, lo que te permitir√° trabajar de manera eficiente…Una vez que lo instales (no pondr√© alg√ļn link porque el webmaster de esta p√°gina se puede molestar conmigo, de hecho, seg√ļn he le√≠do sus sugerencias, √©l recomienda en vez de APPSERVER el WampServer, que en s√≠ hace lo mismo), debes ir al propmt C: y ah√≠ buscar la carpeta que te crea el programa pro defecto, la abres, y dentro encontrar√°s una carpeta llamada www, ah√≠ debes colocar los archivos que crees con PHP, luego, para visualizarlos en el navegador, colocar√°s la direcci√≥n http://localhost y listo, todo OK, bueno espero haberte podido ayudar amigo, cualquier cosa no dudes en preguntar..
    Por cierto Justi, muy bueno tu curso de PHP, te felicito compadre, en lo que se te pueda ayudar pega un grito, saludos desde Chile…

  5. admin dice:

    :)

  6. Xavi Serrano dice:

    Buenas, hoy he empezado a probar el curso, y he empezado por aqui porque necesitaba el checkbox.

    He dado la opcion de que si esta activo muestre el debug de las variables que estan en el POST (de un formulario en el que se pide nombre, idioma y si quiere el debug o no). El problema viene cuando quiero “recuperar” ese checkbox.

    Si esta marcado no hay problema, ya que detecta que lo est√° y me muestra la informacion. Pero sino esta marcado, “no existe” y por lo tanto no aparece en el post y me sale el error “Notice: Undefined index: debug”.

    Cual es la solucion para poder enviar el formulario de esta forma?

    Gracias!

  7. Justi dice:

    @xavi serrano: hola, si un checkbox no esta tildado no se env√≠a atrav√©s del formulario, es por eso que no lo detect√°s v√≠a post. Lo que tenes que hacer para evitar el “notice” es preguntar antes a ver si esta.

    if ( isset($_POST[‘debug’]) ) {
    $debug = true;
    } else {
    $debug = false;
    }

    o algo similar

  8. Maximiliano dice:

    Super bueno este taller… sigo mas tarde me voy a trabajar…

  9. Chubidubi dice:

    En el ejemplo de abajo donde dice:
    Nombres y Apellidos
    debe decir:
    Nombre Campo o viceversa

  10. Anahi dice:

    ¬°¬°¬°Muy bueno el taller!!!, me va a servir mucho, ya que me estoy iniciando en php.
    Gracias por hacer un sitio como este.

  11. Xiib dice:

    Saludos. en el c√≥digo que dan como ejemplo y que hablan sobre la etiqueta input existe un error ya que ustedes indican que debe aparecer la frace “Nombres y apellidos” cuando en la linea de c√≥digo correspondiente a dicha frase se ha colocado la frase “Nombre campo”

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder