Crear formularios en Html

Crear formularios en Html

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">
Ejemplo de input tipo text en formularios Html
Ejemplo input text

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">
Ejemplo input tipo password en formularios Html
Ejemplo input password

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">
Ejemplo tipo hidden en formularios Html
Ejemplo input tipo hidden

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
Ejemplo input tipo radio en formularios Html
Ejemplo input radio

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
Ejemplo input tipo checkbox en formularios Html
Ejemplo input checkbox

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>
Ejemplo select en formularios Html
Ejemplo 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>
Ejemplo textarea en formularios Html
Ejemplo 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">
Ejemplo input tipo image en formularios Html
Ejemplo input image

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">
Ejemplo input tipo file en formularios Html
Ejemplo input file

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">
Ejemplo input tipo submit en formularios Html
Ejemplo input submit

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"
Ejemplo input tipo reset en formularios Html
Ejemplo input reset

Si te ha gustado no olvides compartir en redes sociales.

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas