Elemento form
El elemento <form> en HTML se utiliza para crear un formulario que permite la
recolección de información de los usuarios. Los formularios pueden contener diferentes elementos de
entrada, como campos de texto, botones, casillas de verificación, entre otros. Estos elementos son
agrupados dentro del formulario y permiten el envío de datos a un servidor para su procesamiento.
El formulario es fundamental en cualquier aplicación o página web que requiera interacción con el usuario, ya sea para registrarse, iniciar sesión, enviar un mensaje, o cualquier otro propósito.
A continuación, se muestra un ejemplo de un formulario simple de registro.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
<br><br>
<button type="submit">Enviar</button>
</form>
...
Elemento input
El elemento <input> en HTML es uno de los componentes clave para la entrada de
datos en un formulario. Permite a los usuarios ingresar información mediante una variedad de tipos
de entrada como texto, correo electrónico, número, fecha, entre otros.
El tipo de entrada se especifica con el atributo type, que puede tomar valores como
text, email, password, number,
date, entre otros.
A continuación, se muestra un ejemplo de uso de distintos tipos de <input> en un
formulario.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="age">Edad:</label>
<input type="number" id="age" name="age" min="1" max="120">
<br><br>
<label for="date">Fecha de Nacimiento:</label>
<input type="date" id="date" name="date">
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento textarea
El elemento <textarea> se utiliza en HTML para crear un área de texto en la que
los usuarios pueden ingresar texto de múltiples líneas. Este elemento es especialmente útil para
comentarios, descripciones y cualquier otro tipo de información que requiera más espacio que un
campo de texto de una sola línea.
El elemento <textarea> puede configurarse con atributos como rows
y cols para especificar el tamaño del área de texto, así como placeholder
para mostrar un texto de ejemplo antes de que el usuario ingrese su información.
A continuación, se muestra un ejemplo de un formulario que incluye un elemento
<textarea>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="comments">Comentarios:</label>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Escribe tus comentarios aquí..." required></textarea>
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento label
El elemento <label> se utiliza en HTML para asociar un texto descriptivo con un
elemento de formulario, como un campo de entrada o un área de texto. Al usar
<label>,
mejoramos la accesibilidad y la usabilidad del formulario, ya que permite que los usuarios hagan
clic
en el texto para enfocar el campo de entrada correspondiente.
El elemento <label> se puede asociar a un elemento de formulario mediante el
atributo for, que debe coincidir con el id del elemento relacionado.
A continuación, se muestra un ejemplo de un formulario que incluye un elemento
<label>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento fieldset
El elemento <fieldset> se utiliza en HTML para agrupar elementos de formulario
relacionados. Este elemento ayuda a organizar la estructura de un formulario y proporciona una
representación visual clara, ya que se dibuja como un cuadro alrededor de los elementos agrupados.
El elemento <legend> se puede usar dentro de un <fieldset> para
proporcionar una etiqueta descriptiva para el grupo de controles de formulario.
A continuación, se muestra un ejemplo de un formulario que utiliza el elemento
<fieldset>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<fieldset style="border: 2px solid #007bff; padding: 10px; border-radius: 5px;">
<legend style="font-weight: bold; color: #007bff;">Información Personal</legend>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<br>
<button type="submit">Enviar</button>
</form>
Elemento legend
El elemento <legend> se utiliza dentro de un elemento
<fieldset> para proporcionar un título o descripción para el grupo de controles
de formulario que contiene. Este elemento ayuda a identificar de manera clara y accesible el
propósito del grupo de elementos relacionados.
El <legend> es útil para mejorar la usabilidad y la accesibilidad de los
formularios, ya que proporciona contexto adicional a los usuarios.
A continuación, se muestra un ejemplo de un formulario que utiliza el elemento
<legend> dentro de un <fieldset>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<fieldset style="border: 2px solid #007bff; padding: 10px; border-radius: 5px;">
<legend style="font-weight: bold; color: #007bff;">Información de Contacto</legend>
<label for="phone">Teléfono:</label>
<input type="tel" id="phone" name="phone" required>
<br><br>
<label for="address">Dirección:</label>
<input type="text" id="address" name="address" required>
</fieldset>
<br>
<button type="submit">Enviar</button>
</form>
Elemento select
El elemento <select> se utiliza para crear un menú desplegable que permite al
usuario seleccionar una opción de un conjunto de opciones predefinidas. Es comúnmente utilizado en
formularios para capturar información del usuario.
El menú desplegable contiene una lista de opciones definidas por el elemento
<option>, y permite que el usuario seleccione una o más opciones, dependiendo de
los atributos utilizados.
A continuación, se muestra un ejemplo de un menú desplegable utilizando el elemento
<select>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="fruit">Selecciona una fruta:</label>
<select id="fruit" name="fruit">
<option value="apple">Manzana</option>
<option value="banana">Plátano</option>
<option value="orange">Naranja</option>
<option value="grape">Uva</option>
</select>
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento optgroup
El elemento <optgroup> se utiliza para agrupar opciones dentro de un menú
desplegable creado con el elemento <select>. Esta agrupación ayuda a organizar
las opciones relacionadas y mejora la usabilidad del formulario, especialmente cuando hay muchas
opciones disponibles.
El atributo label se utiliza para definir el nombre del grupo que se mostrará en la
interfaz del usuario.
A continuación, se muestra un ejemplo de un menú desplegable utilizando el elemento
<optgroup>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="fruits">Selecciona una fruta:</label>
<select id="fruits" name="fruits">
<optgroup label="Cítricos">
<option value="orange">Naranja</option>
<option value="lemon">Limón</option>
</optgroup>
<optgroup label="Frutas Tropicales">
<option value="banana">Plátano</option>
<option value="mango">Mango</option>
</optgroup>
<optgroup label="Frutas Berries">
<option value="strawberry">Fresa</option>
<option value="blueberry">Arándano</option>
</optgroup>
</select>
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento option
El elemento <option> se utiliza dentro de un menú desplegable creado con el
elemento <select> para definir una opción que el usuario puede seleccionar. Cada
<option> representa un valor dentro de la lista de selección.
El atributo value es importante, ya que especifica el valor que se enviará cuando se
seleccione esa opción en el formulario.
A continuación, se muestra un ejemplo de cómo se utiliza el elemento <option>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="colors">Selecciona un color:</label>
<select id="colors" name="colors">
<option value="red">Rojo</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
<option value="yellow">Amarillo</option>
<option value="orange">Naranja</option>
</select>
<br><br>
<button type="submit">Enviar</button>
</form>
Elemento button
El elemento <button> se utiliza para crear un botón en un formulario o en una
página web. Este elemento puede ser utilizado para enviar un formulario, ejecutar una acción
JavaScript o simplemente para interactuar con el usuario.
El elemento <button> tiene varios atributos, incluyendo type, que
puede tomar los valores submit, button o reset, dependiendo
de la acción que se desee realizar.
A continuación, se muestra un ejemplo de cómo se utiliza el elemento <button>.
Ejemplo Visual
Código del ejemplo
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<br><br>
<button type="submit" class="btn btn-success">Enviar</button>
<button type="reset" class="btn btn-danger">Restablecer</button>
</form>
Elemento datalist
El elemento <datalist> se utiliza para proporcionar una lista de opciones
predefinidas para un elemento <input>. Esto permite que los usuarios seleccionen
un valor de la lista sugerida o escriban su propio valor.
El elemento <datalist> se vincula a un campo de entrada mediante el atributo
list, que debe coincidir con el valor del atributo id del
<datalist>.
A continuación, se muestra un ejemplo de cómo se utiliza el elemento <datalist>.
Ejemplo Visual
Código del ejemplo
<label for="fruits">Selecciona una fruta:</label>
<input list="fruit-list" id="fruits" name="fruits" placeholder="Escribe o selecciona...">
<datalist id="fruit-list">
<option value="Manzana">
<option value="Banana">
<option value="Naranja">
<option value="Fresa">
<option value="Uva">
</datalist>
Elemento output
El elemento <output> se utiliza para representar el resultado de un cálculo o la
salida de un formulario. Es especialmente útil en formularios donde el valor mostrado puede cambiar
en función de las entradas del usuario.
El elemento <output> se puede asociar a un elemento de formulario, como un campo
de entrada o un botón, utilizando el atributo for.
A continuación, se muestra un ejemplo de cómo se utiliza el elemento <output>.
Recuerda que es necesario incluir un script de JavaScript para que el resultado se actualice automáticamente.
Ejemplo Visual
Código del ejemplo
<label for="num1">Número 1:</label>
<input type="number" id="num1" oninput="calculate()" value="0">
<br>
<label for="num2">Número 2:</label>
<input type="number" id="num2" oninput="calculate()" value="0">
<br>
<label>Resultado:</label>
<output id="result" for="num1 num2">0</output>
<script>
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value) || 0;
const num2 = parseFloat(document.getElementById('num2').value) || 0;
document.getElementById('result').value = num1 + num2;
}
</script>
Elementos de Formulario HTML
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias