Estoy usando React JS con el cliente Apollo, cuando quiero crear un formulario de registro, por ejemplo, generalmente creo un div que contiene algunos campos de entrada y un botón, el botón no es del tipo "enviar", es solo un botón normal con un evento "onClick ()" que ejecuta la función de registro ... hace el trabajo y me gusta la forma en que se ejecuta la lógica de registro sin pasar ningún dato a través de la URL y no necesita actualizar la página después de cada enfoque de registro.
Entonces la pregunta es ¿cuál es mejor?
NOTA: Sé que hay algunos paquetes que pueden manejar estas situaciones como "Formik" por ejemplo... pero me gusta codificar todo yo mismo.
En mi opinión, siempre es mejor seguir usando la etiqueta HTML semántica, por ejemplo <form> para formulario.
Hay algunas ventajas usando <form > de lo que he sabido hasta ahora:
:invalid y :valid , lo que puede ser útilNota: El uso del elemento comunicará automáticamente una sección de contenido como un punto de referencia del formulario, si se proporciona un nombre accesible. Los desarrolladores siempre deben preferir usar el elemento HTML semántico correcto en lugar de usar ARIA.
Fuente: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role#description
Para la demostración de pseudoclase de CSS, puede consultar mi Stackblitz
Recomendaría usar <form> y hacer su <button> de type="submit" .
En lugar de agregar un EventHandler al botón onClick , lo vincularía al evento onSubmit del formulario.
Con event.preventDefault() , detiene el envío del formulario y puede manejar su lógica de registro allí.