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>
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>
<title>Elementos de Formulario HTML</title>
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