Aunque técnicamente los formularios son parte de HTML – es marcado / markup – los clasifiqué en PHP porque el uso más común es como parte de una aplicación web.
Tipos de campos
Como son bastantes tipos de campos preferí agruparlos – de manera arbitraria – según la función que cumplen.
Estas son las categorías que utilizo:
Marcadores
Campos Básicos
Campos Excluyentes
Campos Incluyentes
Acciones
Marcadores
Son etiquetas que de manera general definen el formulario – form -, agrupan campos – fieldset -, sirven para nombrar un grupo de campos – legend -, o un campo en particular dentro de un formulario – label -.
<form action="" method="">
<fieldset>
<legend>Sección 1</legend>
<label>Campo 1</label>
<input type="" name="" placeholder="">
</fieldset>
<fieldset>
<legend>Acción 1</legend>
<input type="submit" name="" value="Enviar">
</fieldset>
</form>Algunos atributos de los marcadores del ejemplo anterior son:
action: Archivo al cuál se le van a enviar los datos del formulario. Puede ser el mismo archivo.
method: Método que va a utilizar el formulario para enviar los datos. Sus valores pueden ser get o post.
Algunos atributos de otro tipo de campo:
type: El tipo de campo que se va a visualizar.
placeholder: Valor que se va a mostrar dentro del campo y que va a desaparecer en el momento en que se seleccione el campo.
name: Nombre del campo. Con este atributo se va a identificar el valor que el usuario asigne cuando el archivo se reciba en PHP.
value: Valor que tiene el campo. Generalmente se utiliza en los botones para asignar el nombre visible y, en los campos “básicos” para mostrar el valor almacenado – en los formularios de edición -.
Campos Básicos *
Con excepción del campo oculto – input[type=”hidden”] – son campos que permiten que el usuario elija el contenido a enviar.
Los campos ocultos pueden contener valores que no deberían ser modificados pero que nos interesa que existan.
<input type="hidden" name="oculto" value="oculto">
<input type="text" name="texto" placeholder="text">
<input type="password" name="password" placeholder="contraseña">
<input type="file" name="archivo">
<textarea name="area" cols="10" rows="5" placeholder="textarea "></textarea>input[type=”hidden”]: Texto que – en teoría – no puede ser manipulado por el usuario.
input[type=”text”]: Texto menor a 255 caracteres.
input[type=”password”]: Texto que se sustituye por caracteres para no ser visible. Utilizado para contraseña y confirmación de la contraseña.
input[type=”file”]: Adjuntar archivos. Necesita que el formulario tenga el atributo enctype=’multipart/form-data’ y que el método de envío sea POST.
textarea: Texto mayor a 255 caracteres.
* Faltaron algunos campos que se incluyeron con HTML5, los vamos a ver más adelante.
La mayoría de esos campos entrarían en esta clasificación – campos básicos -.
Campos Excluyentes
Se presentan distintas opciones pero sólo permiten elegir una.
<label><input type="radio" name="radio" value="opcion 1"> Opción 1</label>
<label><input type="radio" name="radio" value="opcion 2"> Opción 2</label>
<label><input type="radio" name="radio" value="opcion 3"> Opción 3</label>
<select name="select">
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>input[type=”radio”]: Selecciona una opción entre varias disponibles.
Utilicé la etiqueta label como envolvente del campo para que, al presionar sobre el texto se seleccione el campo.
Para que funcionen como grupo – que las opciones mostradas sean excluyentes – los campos del tipo radio deben
de tener el mismo nombre – mismo valor en el atributo name -.
select: Etiqueta que agrupa varias opciones – etiquetas option -.
Esta etiqueta tiene el atributo name porque con ese nombre se va a enviar el valor seleccionado.
option: Cada etiqueta – option – dentro de un select es una opción a elegir.
Debe de tener el atributo value con el valor que se quiere enviar.
De manera general utilizar botones de radio si las opciones a elegir son 2 o 3 como máximo y utilizar select si las opciones son 3 o más.
Campos Incluyentes
Se presentan distintas opciones y es posible elegir una o más.
<label><input type="checkbox" name="check[]" value="opcion 1"> Opción 1</label>
<label><input type="checkbox" name="check[]" value="opcion 2"> Opción 2</label>
<label><input type="checkbox" name="check[]" value="opcion 3"> Opción 3</label>
<select name="select" multiple>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>input[type=”checkbox”]: Permite seleccionar una o más opciones de las disponibles.
Utilicé la etiqueta label para que, al presionar sobre el texto se seleccione el campo.
Para que funcionen como grupo los campos del tipo checkbox deben tener el mismo nombre – mismo valor en el atributo name – y, el nombre debe terminar con corchetes – para enviar un arreglo de valores -.
select: Al utilizar el atributo multiple se pueden seleccionar distintas opciones con
CTRL + Clic – Windows / Linux
CMD + Clic – macOS
Acciones
Son los botones que el usuario va a utilizar para llevar a cabo una acción, aunque pueden ser utilizados indistintamente hay que hacer notar la diferencia.
<input type="submit" name="submit" value="Enviar">
<input type="button" name="button" value="Prueba">
<input type="image" name="image" src="img.jpg">input[type=’submit’]: Se utiliza en los formularios y la acción que va a realizar es la que se encuentra especificada como valor del atributo action del formulario (etiqueta de apertura form).
input[type=’button’]: Aunque se visualiza igual que submit, este botón no realiza acción alguna – se le tiene que asignar vía JavaScript -.
input[type=’image’]: Se utiliza cuando se quiere reemplazar la visualización del botón con una imagen. Similar a submit porque la acción que realiza es la que se encuentra especificada dentro de la etiqueta de apertura del formulario.
Al agrupar los elementos – campos / etiquetas – de los formularios puede facilitar la creación de formularios con base en los datos que quieras almacenar.