Etiquetas relacionadas con formularios

Este artículo explica las etiquetas relacionadas con formularios.

Esto explica varios campos de formulario como entradas de texto y menús desplegables.

YouTube Video

Etiquetas relacionadas con formularios

Etiqueta <form>

1<form action="/submit" method="post">...</form>

• La etiqueta <form> se utiliza para definir todo el formulario.
• El atributo action especifica el destino, y el atributo method especifica el método (GET o POST).
• También puedes especificar el atributo target, similar a la etiqueta <a>.

Etiqueta <input> (campo de entrada de texto)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> crea un campo de entrada de texto de una sola línea. Los usuarios pueden ingresar cualquier texto.

• El atributo placeholder especifica un texto descriptivo que aparece cuando el campo de entrada está vacío. Esto ayuda a los usuarios a entender fácilmente la entrada esperada. Este texto desaparece automáticamente cuando comienza la entrada.

  • placeholder es adecuado para proporcionar información suplementaria y no es adecuado para instrucciones importantes, como entradas obligatorias. En tales casos, deberías usar una etiqueta.

Etiqueta <input> (campo de entrada de contraseña)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> crea un campo para la entrada de contraseñas. Los caracteres ingresados están ocultos y enmascarados para garantizar la seguridad.

Etiqueta <input> (campo de entrada para dirección de correo electrónico)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> crea un campo para ingresar una dirección de correo electrónico e incluye validación para asegurar el formato correcto del correo electrónico.

Etiqueta <input> (casilla de verificación)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> crea una casilla de verificación. Cuando hay múltiples opciones disponibles, los usuarios pueden seleccionar varios elementos.

Etiqueta <input> (botón de opción)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> crea un botón de opción que permite a los usuarios seleccionar solo una opción de un conjunto.

Etiqueta <input> (botón de envío)

1<input type="submit" value="Submit">

• <input type="submit"> crea un botón para enviar los datos en el formulario.
• El valor del atributo value se incluye en los datos del formulario cuando se envía.

Etiqueta <input> (Botón de reinicio)

1<input type="reset" value="Reset">

• <input type="reset"> crea un botón que restablece todos los valores de entrada en el formulario.

Etiqueta <input> (campo oculto)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> crea un campo oculto que no se muestra en la pantalla y se utiliza para enviar datos al servidor cuando se envía el formulario.

Etiqueta <input> (selector de color)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> muestra un selector de color y crea un campo de entrada para que los usuarios seleccionen un color.

Etiqueta <input> (campo de entrada de fecha)

1<input type="date" name="birthday">

• <input type="date"> crea un campo de entrada de fecha que muestra un calendario para seleccionar una fecha.

Etiqueta <input> (campo de entrada de hora)

1<input type="time" name="appointment_time">

• <input type="time"> crea un campo para ingresar la hora y se muestra un selector de hora.

Etiqueta <input> (campo de entrada de archivo)

1<input type="file" name="resume">

• <input type="file"> crea un campo de entrada para que los usuarios seleccionen y suban archivos.
• El atributo enctype de la etiqueta form debe establecerse en multipart/form-data.

Etiqueta <input> (número)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> crea un campo de entrada de número que permite establecer el valor mínimo, el valor máximo y el paso (cantidad de incremento/decremento).

Etiqueta <input> (campo de selección de rango para números)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> crea un campo de entrada donde los usuarios pueden seleccionar un valor dentro de un rango usando un deslizador.

Etiqueta <textarea>

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• La etiqueta <textarea> crea un campo de entrada de texto multilínea. Es adecuado para ingresar texto largo o comentarios.

Etiqueta <select>

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• La etiqueta <select> crea un menú desplegable y las opciones se definen con la etiqueta <option>. Los usuarios pueden seleccionar uno o varios elementos.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Para habilitar selecciones múltiples, agregue el atributo multiple. Especificar este atributo muestra las opciones como una lista desplegable.

Etiqueta <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• La etiqueta <optgroup> se utiliza para agrupar elementos relacionados juntos. El atributo label permite asignar un nombre de grupo, proporcionando opciones claras a los usuarios incluso si la lista es larga.

Etiqueta <label>

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• La etiqueta <label> define etiquetas para campos de entrada, casillas de verificación y botones de radio, mejorando la usabilidad y accesibilidad.
• Por ejemplo, al hacer clic en una etiqueta se puede enfocar un campo de entrada o activar/desactivar una casilla de verificación.

Etiqueta <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• La etiqueta <fieldset> agrupa controles de formulario relacionados, y la etiqueta <legend> proporciona un título para el grupo.

Etiqueta <button>

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• La etiqueta <button> define un botón clickable que desencadena el envío del formulario u otras acciones.

  Cuando se especifica type="button", funciona como un botón normal. Al hacer clic en él no se envía el formulario ni se activan otras acciones predeterminadas. Se utiliza cuando deseas establecer acciones personalizadas con JavaScript.

  Cuando se especifica type="submit", funciona como un botón de envío para el formulario. Cuando se hace clic en este botón, se enviará el formulario que lo contiene.

  Cuando se especifica type="reset", funciona como un botón de reinicio para el formulario. Al hacer clic en él, se restablecerán todos los campos del formulario a su estado inicial.

  Si no se especifica el atributo type, algunos navegadores podrían tratarlo como type="submit", por lo que se recomienda especificar el tipo explícitamente para asegurar el comportamiento deseado.

• La etiqueta <button> puede incluir otro contenido HTML entre las etiquetas de apertura y cierre, lo que permite crear botones con íconos o texto complejo.

• Para un botón de envío que utiliza la etiqueta <input>, el valor del atributo value se incluye en los datos del formulario, pero con una etiqueta <button>, no se envía por defecto.

  Al especificar los atributos name y value para una etiqueta <button>, su valor puede enviarse como parte de los datos del formulario.

Etiqueta <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• La etiqueta <datalist> proporciona una lista de opciones seleccionables para el elemento <input>. Los usuarios pueden seleccionar de la lista o ingresar su propio valor.

Etiqueta <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• La etiqueta <output> muestra el resultado de cálculos o interacciones del usuario. Se utiliza para mostrar dinámicamente los resultados de cálculos en formularios o scripts.
• Para el atributo for, especifica los IDs de los elementos del formulario que deseas asociar, separados por espacios.

Etiqueta <progress>

1<progress value="70" max="100">70%</progress>

• La etiqueta <progress> muestra a los usuarios el progreso de una tarea. Por ejemplo, puede indicar visualmente el progreso de una descarga de archivo o instalación.

Etiqueta <meter>

1<meter value="0.6">60%</meter>

• La etiqueta <meter> representa una medida numérica dentro de un rango conocido. Se utiliza para mostrar medidas como el uso de disco o un medidor de combustible dentro de un rango específico.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video