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