Crear formularios en Html

Los formularios en Html sirven para recoger la información obtenida de los usuarios mediante texto o opciones, subida de archivos, etc. Una vez que se han cubierto los campos del formulario, el usuario los envía al servidor para que sean procesados.

Estructura básica de un formulario

<form>
  <!--Elementos para recopilar información-->
</form>

La etiqueta <form> además puede tener atributos como «action» (A dónde será enviado), «method» (Método de envío POST ó GET) y «target» (Dónde será mostrado el resultado). Además el formulario debe contener un botón de envío de tipo «submit». Veamos un ejemplo con lo que hemos visto hasta ahora

<form action="resultados.php" method="GET">
  <input type="submit" value="Enviar">
</form>

Campos

Son los recuadros donde el usuario ingresará la información. Estos campos pueden ser de tipo text, password, radio, checkbox, hidden, select, textarea, image, file y button.

text

• Captura cadenas simples de caracteres.
• Modificadores:
  • name: Nombre que tendrá la variable asociada a ese campo.
  • value: Valor por defecto.
  • size: Tamaño del cuadro de texto del campo.
  • maxlength: Máximo de caracteres del campo.

Ejemplo

Nombre: <input type="text" name="nombre" size="30" maxlength="50">
Apellidos: <input type="text" name="apellidos" size="40" maxlength="50">
Ciudad: <input type="text" name="ciudad" value="Madrid" size="10" maxlength="10">

password

• Igual que text pero los caracteres introducidos se sustituyen por asteriscos
• Modificadores:
  • name: Nombre de la variable asociada.
  • size: Tamaño del cuadro de texto.
  • maxlength: Máximo de caracteres.

Ejemplo

Contraseña: <input type="password" name="password" size="30" maxlength="50">

hidden

• Se utiliza para datos necesarios para el programa pero ocultos para el usuario. No se visualiza nada en la página.
• Modificadores:
  • name: Nombre de la variable asociada.
  • value: Valor de la variable.

Ejemplo

Nombre: <input type="text" name="nombre" size="30" maxlength="50">
Contraseña: <input type="password" name="password" size="30" maxlength="50">
<input type="hidden" name="tipoUsuario" value="alumno">

radio

• Varias opciones en las que el usuario debe escoger sólo una. Todas las opciones tienen el mismo atributo name.
• Modificadores:
  • name: Nombre de la variable asociada.
  • value: Valor de la variable.
  • checked: Opción por defecto.

Ejemplo

<p>Tipo de usuario</p>
<input type="radio" name="tipo" value="Usuario" checked> Usuario <br>
<input type="radio" name="tipo" value="Editor"> Editor <br>
<input type="radio" name="tipo" value="Admin"> Administrador

checkbox

• Varias opciones en las que el usuario puede marcar una o varias.
• Modificadores:
  • name: Nombre de la variable.
  • value: Valor de la variable.
  • checked: Valor escogido por defecto.

Ejemplo

<p>Aficciones</p>
<input type="checkbox" name="deportes" value="Deportes" checked> Deportes<br>
<input type="checkbox" name="musica" value="Música"> Música<br>
<input type="checkbox" name="cine" value="Cine"> Cine

select

• Menú desplegable con varias opciones de las que el usuario debe escoger sólo una. Cada una de las opciones utiliza una etiqueta <option>.
• Modificadores:
  • name: Nombre de la variable.
  • multiple: Permite seleccionar varias opciones.
  • size: Número de líneas de la seleccion.
  • selected: Opción seleccionada por defecto.

Ejemplo

<select name="edad">
  <option value="1">Menor de 18</option>
  <option selected="true" value="2">De 19 a 30</option>
  <option value="3">De 31 a 60</option>
  <option value="4">Mayor de 60</option>
</select>

textarea

• Campo para insertar textos largos.
• Modificadores:
  • name: Nombre de la variable.
  • rows: Número de filas del recuadro.
  • cols: Número de columnas del recuadro.
  • wrap: off (por defecto, el texto se ve y envía tal cual se escribe), soft (No se hace scroll horizontal), hard (Al llegar al extremo hace salto de línea automático).

Ejemplo

<textarea name="valoracion" rows="5" cols="50">
  Introduzca su valoración
</textarea>

image

• Botón personalizado para sustituir al botón de submit del formulario
• Modificadores:
  • src: Ubicación de la imágen.
  • name: Opcional. Si no se usa, utiliza las coordenadas X e Y. Si se usa usa las coordenadas nameX y nameY.
  • align: left, right, middle, baselina, bottom, absmiddle, absbottom. Colocación de la imágen en pantalla.
  • border: Indica el ancho del borde del recuadro.
  • width: Indica el ancho de la imágen en pixels.
  • height: Indica la altura de la imágen en pixels.
  • hspace: Indica el espacio horizontal desde el recuadro hasta la imágen.
  • vspace: Indica el espacio vertical desde el recuadro hasta la imágen.

Ejemplo

Nombre: <input type="text" name="nombre" size="30" maxlength="50"><br> Contraseña: <input type="password" name="password" size="30" maxlength="50"><br>
<input type="image" src="nuevaImagen.jpg" name="nuevaImagen" align="left" width="40" height="40" hspace="5" vspace="5">

file

• Permite que el usuario suba un archivo a la aplicación.
• Modificadores:
  • name: Nombre de la variable.
  • size: Tamaño el campo.
  • maxlength: Número de caracteres máximo del nombre del fichero.
  • accept: Tipo de archivo «tipo Mime».

Ejemplo

Subir archivo: <input type="file" name="archivo" size="22" accept="text/html">

submit

• Imprescindible en cualquier formulario. Genera el botón que el usuario pulsará para enviar los datos del formulario.
• Modificadores:
  • name: Nombre de la variable.
  • value: Opcional. texto del botón.

Ejemplo

Nombre: <input type="text" name="nombre" size="30" maxlength="50"><br>
Apellidos: <input type="text" name="apellidos" size="40" maxlength="50"><br>
Ciudad: <input type="text" name="ciudad" value="Madrid" size="10" maxlength="10"><br>
<input type="submit" name="enviar" value="Enviar">

reset

• Genera un botón que borra todos los datos introducidos
• Modificadores:
  • name: Nombre de la variable.
  • value: Opcional, texto del botón.

Ejemplo

Nombre: <input type="text" name="nombre" size="30" maxlength="50"><br>
Apellidos: <input type="text" name="apellidos" size="40" maxlength="50"><br>
Ciudad: <input type="text" name="ciudad" value="Madrid" size="10" maxlength="10"><br>
<input type="submit" name="enviar">
<input type="reset" name="borrar"

Más tutoriales de HTML y CSS

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo