Formularios HTML

 

 

 

Formularios html 1

Descubra cómo utilizar formularios en HTML y todas las etiquetas de elementos de formulario

 

Los formularios son la forma en que puedes interactuar con una página o una aplicación creada con tecnologías web.

Tienes un conjunto de controles y cuando envías el formulario, ya sea con un clic en el botón “enviar” o mediante programación, el navegador enviará los datos al servidor.

De forma predeterminada, este envío de datos hace que la página se vuelva a cargar después de enviarlos, pero usando JavaScript puedes alterar este comportamiento (no voy a explicar cómo en este libro).

Se crea un formulario utilizando la formetiqueta:

form.../form

De forma predeterminada, los formularios se envían mediante el método HTTP GET, que tiene sus inconvenientes y, por lo general, conviene utilizar POST.

Puede configurar el formulario para que utilice POST cuando se envíe utilizando el methodatributo:

form method="POST".../form

El formulario se envía, ya sea mediante GET o POST, a la misma URL donde reside.

Entonces, si el formulario está en la https://flaviocopes.com/contactspágina, al presionar el botón “enviar” se realizará una solicitud a esa misma URL.

Lo cual podría provocar que no ocurra nada.

Necesita algo del lado del servidor para manejar la solicitud y, normalmente, “escucha” esos eventos de envío de formulario en una URL dedicada.

Puede especificar la URL a través del actionparámetro:

form action="/new-contact" method="POST".../form

Esto hará que el navegador envíe los datos del formulario mediante POST a la /new-contactURL en el mismo origen.

Si el origen (protocolo + dominio + puerto) es https://flaviocopes.com(el puerto 80 es el predeterminado), esto significa que los datos del formulario se enviarán a https://flaviocopes.com/new-contact .

Hablé de datos. ¿Qué datos?

Los datos son proporcionados por los usuarios a través del conjunto de controles que están disponibles en la plataforma Web:

  • cuadros de entrada (texto de una sola línea)
  • Áreas de texto (texto multilineal)
  • cuadros de selección (elija una opción de un menú desplegable)
  • Botones de opción (elige una opción de una lista siempre visible)
  • casillas de verificación (elija cero, una o más opciones)
  • carga de archivos
  • ¡y mucho más!

Presentaremos cada uno de ellos en la siguiente descripción general de los campos del formulario.

La inputetiqueta

El inputcampo es uno de los elementos de formulario más utilizados. También es un elemento muy versátil y puede cambiar completamente su comportamiento en función del typeatributo.

 

El comportamiento predeterminado es ser un control de entrada de texto de una sola línea:

input /

Equivalente a utilizar:

input type="text" /

Al igual que con todos los demás campos que siguen, es necesario darle un nombre al campo para que su contenido se envíe al servidor cuando se envíe el formulario:

input type="text" name="username" /

El placeholderatributo se utiliza para que aparezca un texto, en gris claro, cuando el campo está vacío. Resulta útil para agregar una pista al usuario sobre lo que debe escribir:

input type="text" name="username" placeholder="Your username" /

Correo electrónico

El uso type="email"validará en el lado del cliente (en el navegador) un correo electrónico para verificar su exactitud (corrección semántica, no para garantizar que la dirección de correo electrónico existe) antes de enviarlo.

input type="email" name="email" placeholder="Your email" /

Contraseña

El uso type="password"hará que cada tecla ingresada aparezca como un asterisco (*) o un punto, útil para los campos que albergan una contraseña.

input type="password" name="password" placeholder="Your password" /

Números

Puede hacer que un elemento de entrada acepte solo números:

input type="number" name="age" placeholder="Your age" /

Puede especificar un valor mínimo y máximo aceptado:

input type="number" name="age" placeholder="Your age" min="18" max="110" /

El stepatributo ayuda a identificar los pasos entre distintos valores. Por ejemplo, acepta un valor entre 10 y 50, en pasos de 5:

input type="number" name="a-number" min="10" max="50" step="5" /

Campo oculto

Los campos se pueden ocultar al usuario, pero se envían al servidor al enviar el formulario:

input type="hidden" name="some-hidden-field" value="some-value" /

Esto se usa comúnmente para almacenar valores como un token CSRF, utilizado para seguridad e identificación de usuarios, o incluso para detectar robots que envían spam, utilizando técnicas especiales.

También se puede utilizar simplemente para identificar una forma y su acción.

Establecer un valor predeterminado

Todos estos campos aceptan un valor predefinido. Si el usuario no lo modifica, este será el valor que se enviará al servidor:

input type="number" name="age" value="18" /

Si establece un marcador de posición, ese valor aparecerá si el usuario borra el valor del campo de entrada:

input type="number" name="age" placeholder="Your age" value="18" /

Enviar formulario

El type="submit"campo es un botón que, una vez presionado por el usuario, envía el formulario:

input type="submit"

El valueatributo establece el texto del botón, que si falta muestra el texto “Enviar”:

 

input type="submit" value="Click me"

Validación de formulario

Los navegadores proporcionan funcionalidad de validación del lado del cliente a los formularios.

Puede establecer campos como obligatorios, garantizar que se completen y aplicar un formato específico para la entrada de cada campo.

Veamos ambas opciones.

Establezca los campos como obligatorios

El requiredatributo le ayuda con la validación. Si el campo no está configurado, la validación del lado del cliente falla y el navegador no envía el formulario:

input type="text" name="username" required /

Imponer un formato específico

Describí el type="email"campo anteriormente. Valida automáticamente la dirección de correo electrónico según un formato establecido en la específica.

En el type="number"campo, mencioné el atributo miny maxpara limitar los valores ingresados ​​a un intervalo.

Puedes hacer más

Puede aplicar un formato específico en cualquier campo.

El patternatributo le brinda la posibilidad de establecer una expresión regular para validar el valor.

Te recomiendo leer mi Guía de expresiones regulares en flaviocopes.com/javascript-regular-expressions/.

patrón=“ https://.* “

input type="text" name="username" pattern="[a-zA-Z]{8}" /

Otros campos

Subidas de archivos

Puede cargar archivos desde su computadora local y enviarlos al servidor mediante un type="file"elemento de entrada: Todo sobre Apple, Mac e Iphone

input type="file" name="secret-documents"

Puedes adjuntar varios archivos:

input type="file" name="secret-documents" multiple

Puede especificar uno o más tipos de archivos permitidos mediante el acceptatributo. Esto acepta imágenes:

input type="file" name="secret-documents" accept="image/*"

Puedes usar un tipo MIME específico, como .mtl application/jsono configurar una extensión de archivo como .pdf.mtl o configurar múltiples extensiones de archivo, como esto:

input type="file" name="secret-documents" accept=".jpg, .jpeg, .png"

Botones

Los type="button"campos de entrada se pueden utilizar para agregar botones adicionales al formulario, que no sean botones de envío:

input type="button" value="Click me"

Se utilizan para hacer algo programáticamente, utilizando JavaScript.

Hay un campo especial representado como un botón, cuya acción especial es borrar todo el formulario y devolver el estado de los campos al inicial:

input type="reset"

Botones de radio

Los botones de opción se utilizan para crear un conjunto de opciones, de las cuales una se presiona y todas las demás se deshabilitan.

El nombre proviene de las antiguas radios de coche que tenían este tipo de interfaz.

 

Define un conjunto de type="radio"entradas, todas con el mismo nameatributo y valueatributos diferentes:

input type="radio" name="color" value="yellow"input type="radio" name="color" value="red"input type="radio" name="color" value="blue"

Una vez enviado el formulario, la colorpropiedad de datos tendrá un único valor.

Siempre hay un elemento seleccionado. El primer elemento es el seleccionado de forma predeterminada.

Puedes configurar el valor preseleccionado mediante el checkedatributo. Puedes usarlo solo una vez por grupo de entradas de radio.

Casillas de verificación

Similares a los cuadros de radio, pero permiten elegir múltiples valores o ninguno.

Define un conjunto de type="checkbox"entradas, todas con el mismo nameatributo y valueatributos diferentes:

input type="checkbox" name="color" value="yellow"input type="checkbox" name="color" value="red"input type="checkbox" name="color" value="blue"

Todas esas casillas de verificación estarán desmarcadas de forma predeterminada. Utilice el checkedatributo para habilitarlas al cargar la página.

Dado que este campo de entrada permite múltiples valores, al enviar el formulario, los valores se enviarán al servidor como una matriz.

Fecha y hora

Tenemos algunos tipos de entrada para aceptar valores de fecha.

El type="date"campo de entrada permite al usuario ingresar una fecha y muestra un selector de fecha si es necesario:

input type="date" name="birthday"

El type="time"campo de entrada permite al usuario ingresar una hora y muestra un selector de hora si es necesario:

input type="time" name="time-to-pickup"

El type="month"campo de entrada permite al usuario ingresar un mes y un año:

input type="month" name="choose-release-month"

El type="week"campo de entrada permite al usuario ingresar una semana y un año:

input type="week" name="choose-week"

Todos estos campos permiten limitar el rango y el paso entre cada valor. Recomiendo consultar MDN para conocer los detalles de su uso.

El type="datetime-local"campo le permite elegir una fecha y una hora.

input type="datetime-local" name="date-and-time"

Aquí hay una página para probarlos todos: https://codepen.io/flaviocopes/pen/ZdWQPm

Selector de color

Puede permitir que los usuarios elijan un color utilizando el type="color"elemento:

input type="color" name="car-color"

Establezca un valor predeterminado utilizando el valueatributo:

input type="color" name="car-color" value="#000000"

El navegador se encargará de mostrar un selector de color al usuario.

Rango

Este elemento de entrada muestra un elemento deslizante. Las personas pueden usarlo para pasar de un valor inicial a un valor final:

input type="range" name="age" min="0" max="100" value="30"

Puede proporcionar un paso opcional:

input type="range" name="age" min="0" max="100" value="30" step="10"

Teléfono

El type="tel"campo de entrada se utiliza para introducir un número de teléfono:

input type="tel" name="telephone-number"

El principal atractivo para usar telOver textes que en el dispositivo se puede elegir mostrar un teclado numérico.

Especifique un patternatributo para validación adicional:

input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number"

URL

El type="url"campo se utiliza para ingresar una URL.

input type="url" name="website"

Puedes validarlo usando el patternatributo:

input type="url" name="website" pattern="https://.*"

La textareaetiqueta

El textareaelemento permite a los usuarios introducir texto de varias líneas. A diferencia de input, requiere una etiqueta de cierre:

textarea/textarea

Puedes configurar las dimensiones usando CSS, pero también usando los atributos rowsy cols:

textarea rows="20" cols="10"/textarea

Al igual que con las demás etiquetas de formulario, el nameatributo determina el nombre en los datos enviados al servidor:

textarea name="article"/textarea

La selectetiqueta

Esta etiqueta se utiliza para crear un menú desplegable.

El usuario puede elegir una de las opciones disponibles.

Cada opción se crea mediante la optionetiqueta. Se le agrega un nombre a la selección y un valor a cada opción:

select name="color"option value="red"Red/optionoption value="yellow"Yellow/option/select

Puedes configurar una opción como deshabilitada:

select name="color"option value="red" disabledRed/optionoption value="yellow"Yellow/option/select

Puedes tener una opción vacía:

select name="color"option value=""None/optionoption value="red"Red/optionoption value="yellow"Yellow/option/select

Las opciones se pueden agrupar mediante la optgroupetiqueta. Cada grupo de opciones tiene un labelatributo:

select name="color"optgroup label="Primary"option value="red"Red/optionoption value="yellow"Yellow/optionoption value="blue"Blue/option/optgroupoptgroup label="Others"option value="green"Green/optionoption value="pink"Pink/option/optgroup/select

Tips de HTML




Tal vez te puede interesar:

  1. La etiqueta HTML `iframe`
  2. Cómo cargar una imagen en un lienzo HTML
  3. Cómo utilizar insertAdjacentHTML
  4. Cómo cambiar la URL de una imagen HTML en modo oscuro

Formularios HTML

La inputetiquetaEnviar formularioValidación de formularioOtros camposLa textareaetiquetaLa selectetiqueta

programar

es

https://aprendeprogramando.es/static/images/programar-formularios-html-2100-0.jpg

2024-11-02

 

Formularios html 1
Formularios html 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences