Desarrollo

Cómo solicitar datos al usuario en PHP

Desarrollo HTML

Una vez habiendo realizado una pequeña introducción a HTML y habiendo hecho una instalación local para poder trabajar mejor, vamos a empezar a ver cómo solicitar datos al usuario. Para ello, vamos a utilizar los formularios en HTML.

Formularios en HTML

Un formulario va a permitir al usuario introducir datos y enviarlos para su procesamiento. En pocas palabras, pediremos uno o más datos al usuario y los utilizaremos en nuestros programas en PHP.

Como vimos en la introducción a HTML, construiremos nuestro formulario con la etiqueta <form> en la cual, dentro del bloque del formulario, para solicitar datos al usuario usaremos las etiquetas <input> principalmente, aunque también otras como <select> o <textarea>.

Por ahora, no vamos a detenernos mucho en todas las opciones que dan los formularios para su diseño y tratamiento de datos, lo cual dejaremos para un futuro artículo, pero sí veremos los suficientes como para empezar a interactuar.

La etiqueta <form>

La estructura de nuestro formulario viene dada con esta etiqueta. En ella divisaremos dos atributos muy importantes, el atributo action y el atributo method.

Con el atributo action le vamos a indicar qué archivo recibe los datos que se envían con el formulario para poder tratarlos. Por ejemplo, si tenemos un archivo PHP de nombre tratamiento.php, será este nombre, junto a la ruta donde se encuentra, lo que colocaríamos en este atributo. Si ese archivo se encuentra en la misma ruta que la actual, podemos evitar tener que colocarla toda.

Con el atributo method tenemos dos posibles opciones: get y post. Este atributo define la forma en que se envían los datos del formulario. Así pues, podemos solicitar datos al usuario añadiendo los valores a la ruta indicada en action utilizando get. O podemos enviarlos de forma “invisible” con el método post. ¿No habéis visto nunca direcciones URL con un interrogante y una serie de datos después unidos por el símbolo &? Por ejemplo, tratamiento.php?nombre=Pepe&apellido=Rodriguez. Pues esa es una forma de enviar los datos con el método get.

Nota
Veremos unas pocas más de diferencias entre GET y POST en el próximo artículo.

La etiqueta <input>

Ésta será la principal etiqueta para solicitar datos al usuario. Contendrá diversos atributos que nos ayudarán a indicarle al usuario qué tipo de datos queremos, entre otras cosas.

El atributo type

Para ello, uno de los atributos principales es type, para solicitar el tipo de datos requerido al usuario.

Tenemos bastantes tipos de datos para solicitar con este atributo, pero vamos a listar aquí algunos de los que más utilizaremos:

  • submit: generará un botón para enviar el formulario
  • text: es el más común, creando un campo de texto
  • password: actúa igual que text pero ocultando con asteriscos los datos introducidos
  • file: nos permitirá adjuntar un fichero al formulario
  • email: está preparado para validar de por sí si lo que se ha introducido es un email
  • date: nos mostrará un calendario para escoger una fecha
  • radio: generará unos botones redondos excluyentes para seleccionar un valor
  • checkbox: por su parte, generará un botón cuadrado (no excluyentes si hay más de uno) para seleccionarlo o dejarlo sin seleccionar

Estos serán, básicamente, los atributos que más vamos a usar. Hay unos cuantos más que iremos viendo en cuanto los necesitamos porque no tienen secreto y servirán para introducir una URL, una hora o un campo exclusivamente numérico, por ejemplo.

El atributo name

Este atributo es vital, pues lo necesitamos en la mayoría de <input> y hará de identificador del dato que enviamos. Sin él, sería imposible obtener el dato, pues sin saber cómo llamarlo se antoja difícil. En general, este atributo no debe repetirse en diferentes <input>, pues se sobreescribiría la información enviada.

El atributo value

Con este atributo podremos establecer valores iniciales, aunque no todos los <input> lo admiten, como por ejemplo los de tipo file. Sin embargo, algunos otros lo van a tener como atributo requerido, como es el caso de los botones de radio o en opciones de menú. Para los atributos como, por ejemplo, los de texto, es opcional aunque, con él, podremos colocar un valor predefinido.

El atributo required

Este sencillo atributo, que no necesita ningún valor, nos indica que un <input> es obligatorio. Sirve para obligar al usuario a completar los campos en los que aparezca. Por ejemplo si estamos pidiendo el nombre y es necesario obtenerlo, colocaríamos este atributo.

El atributo placeholder

En los <input> que contengan un campo de tipo texto o numérico o donde debamos escribir algo, este atributo nos permite colocar un texto en su interior en un color más apagado que desaparecerá al empezar a escribir los datos. Suele usarse como texto explicativo.

Otros atributos

Tenemos atributos para longitud máxima, para deshabilitar o para colocarlo como sólo lectura junto a unos pocos atributos menos utilizados en general. Pero, por ahora, tenemos suficiente con lo que hemos visto.

Las etiquetas <select> y <option>

Para crear menús desplegables se utiliza la etiqueta <select> acompañada, irremediablemente, de la etiqueta <option> en la que definiremos cada una de las opciones y que tiene etiqueta de cierre.

De estas etiquetas debemos conocer, principalmente, que el atributo name debe ir en la etiqueta <select> y que la etiqueta <option> contedrá el atributo value con el valor que se enviará al formulario, aunque mostremos al usuario otro valor distinto. Dentro de <option>, también, podemos colocar el atributo selected, que no necesita valor, para indicarle una opción por defecto.

Si queremos realizar un selector múltiple, debemos realizar dos cambios. Por una parte, a la etiqueta <select> debemos añadirle el atributo sin valor multiple. Por otra parte, el atributo name de esta misma etiqueta debe terminar siempre con corchetes [] para enviar así varios valores a la vez.

La etiqueta <textarea>

Esta etiqueta digamos que extiende a la etiqueta de texto, pues mostrará un área de texto para que podamos introducir textos más largos. Se suele utilizar con los atributos rows y cols para indicar, respectivamente, el número de filas y columnas que tendrá la caja en donde se introduce el texto. En este caso, la etiqueta sí necesita etiqueta de cierre.

Ejemplo de formulario

<form action="tratamiento.php" method="post">
  <p>Nombre: <input type="text" name="nombre" placeholder="Introduce tu nombre"></p>
  <p>Usuario: <input type="text" name="usuario" placeholder="Introduce tu nombre de usuario" required></p>
  <p>Email: <input type="email" name="correo" placeholder="Introduce tu email" required></p>
  <p>Contraseña: <input type="password" name="password" placeholder="Introduce tu contraseña" required></p>
  <p><input type="checkbox" name="suscripcion">¿Quieres suscribirte?</p>
  <p><input type="radio" name="genero" value="Hombre">Hombre</p>
  <p><input type="radio" name="genero" value="Mujer">Mujer</p>
  <p>Edad: <select name="edad">
    <option value="menor">Menos de 18 años</option>
    <option value="adulto">Entre 18 y 67 años</option>
    <option value="jubilado">Más de 67 años</option>
  </select></p>
  <p>Descripción: <textarea name="descripcion" rows="4" cols="20"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Un ejemplo sencillito de formulario para empezar. Los demás type y algunas otras etiquetas iremos viéndolas conforme vayan apareciendo en éste y próximos artículos donde vamos a repasar bien cómo solicitar datos al usuario.

Como veis en este formulario, hemos integrado cada opción dentro de un párrafo para mejorar su visualización. No os preocupéis, iremos viendo más adelante cómo mejorar el diseño.

Resumen

Hemos visto cómo crear nuestro primer formulario para solicitar datos al usuario. Será la base para todos aquellos programas donde necesitemos algún dato que nos tenga que proporcionar el usuario.

A lo largo de los próximos artículos conoceremos cómo recoger estos datos en PHP y poder operar con ellos. Podéis ver el índice de contenidos para repasar todos los artículos sobre formularios.

Deja una respuesta