El propósito de este artículo es básicamente entender cómo podemos definir uno o más formularios en HTML y especificar los elementos de salida que pertenecen a un formulario en particular.
En palabras más simples, vamos a definir un formulario con id como referencia para señalar los elementos de salida .
Enfoque: Para definir uno o más formularios, simplemente usamos la etiqueta <form> seguida del contenido del formulario. Como está en una etiqueta de contenedor, termina con la etiqueta </form> .
Ahora, para definir los elementos de salida, usamos el atributo de formulario <output> para especificar el formulario al que pertenece con la ayuda de la identificación del formulario.
Los atributos utilizados al especificar los elementos de salida son:
- Para
- Forma
- Nombre
Sintaxis:
<output name="variable" for= "other variable" form="form id"></output>
Nota: El atributo «nombre» se usa para especificar la variable de salida, el atributo «para» se usa para operar en la variable utilizada dentro del bloque de formulario y el atributo «formulario» se usa para definir el formulario a través de su id.
Ejemplo 1: el siguiente código usa el atributo oninput para realizar la salida durante el tiempo de ejecución. La identificación del formulario es » MyForm » y concatena dos textos diferentes usando la identificación del formulario como referencia. El elemento de salida se especifica dentro del bloque de formulario.
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green">GeeksforGeeks</h2> <p><b>String concatenation using output element</b></p> <br /> <!--Creating a form and specifying the operation--> <form id="MyForm" oninput="second_output.value=val1.value+val2.value"> <!--inputs taken--> <input type="text" name="val1" id="val1" /> + <input type="text" name="val2" id="val2" /> = <!--output element used with attributes--> <output form="MyForm" name="second_output" for="val1 val2"> </output> </form> </body> </html>
Producción:
elemento de salida dentro del formulario
Ejemplo 2: En este ejemplo, vamos a definir los elementos de salida fuera del formulario.
HTML
<!DOCTYPE html> <html> <body> <h2 style="color: green">GeeksForGeeks</h2> <br /> <!--Defined form id and output--> <form id="MyForm" oninput="first_output.value=a.value*b.value"> <!--Specified variables--> <input type="number" name="a" id="val1" /> * <input type="number" name="b" id="val2" /> = </form> <br /> <!--closed form--> <!-- defined output element outside the form--> <output form="MyForm" name="first_output" for="val1 val2"> </output> </body> </html>
Salida: Como podemos ver, uno puede definir los elementos de salida dentro del bloque de formulario o fuera de él. La salida sigue siendo la misma.
Publicación traducida automáticamente
Artículo escrito por ritikapandey y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA