La creación de un formulario HTML es un aspecto importante al crear un sitio web. Los formularios son un método de interacción con los usuarios del sitio web. Por lo tanto, se hace necesario que los formularios estén correctamente alineados y sean atractivos cuando se implementen en un sitio web. El proceso de simplemente agregar un formulario HTML a una página web es el siguiente.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <p>Default code has been loaded into the Editor.</p> <form> <label for="name">Name</label> <input type="text" id="name" /> <label for="email">Email</label> <input type="email" id="email" /> <label for="telnum">Tel No.</label> <input type="telnum" id="telnum" /> <label for="Roll No.">Roll No.</label> <input type="number" id="rollno" /> </form> </body> </html>
Salida: con este código, simplemente hemos creado un formulario dentro del cuerpo de la página. En el resultado, se puede ver que los campos y las etiquetas del formulario están todos en una línea, lo que no se ve bien. Incluso si usamos la etiqueta <br> para separarlos en diferentes líneas, aún no estaría correctamente alineado.
Estructuración del formulario usando tablas HTML: Podemos tomar la ayuda de tablas HTML para estructurar nuestros formularios. La etiqueta <table> no solo ayuda a crear las tablas deseadas, sino que también se puede usar para estructurar nuestro contenido, como formularios. Los pasos a continuación muestran cómo usar tablas HTML para estructurar formularios.
- Cree una tabla HTML utilizando el elemento <table>.
- Ahora agregue el elemento <form> dentro de esta tabla.
- A continuación, crearemos campos de formulario.
- Agregamos los campos de formulario requeridos al formulario usando el elemento <tr> que se usa para agregar filas a una tabla.
- Usamos el elemento <td> para agregar etiquetas y campos para columnas separadas.
- Podemos agregar tantos campos como se requieran a nuestro formulario.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GFG</h2> <p>Default code has been loaded into the Editor.</p> <table> <form> <tr> <td> <label for="name"> Name </label> </td> <td><input type="text" id="name" /> </td> </tr> <tr> <td><label for="email"> Email </label> </td> <td><input type="email" id="email" /> </td> </tr> <tr> <td><label for="telnum"> Tel No. </label> </td> <td><input type="telnum" id="telnum" /> </td> </tr> <tr> <td><label for="Roll No."> Roll No. </label> </td> <td><input type="number" id="rollno" /> </td> </tr> </form> </table> </body> </html>
Salida: como se ve en la salida, los campos del formulario se agregan correctamente a las nuevas filas y también se alinean correctamente con la ayuda de las tablas HTML. También se puede ver que todos los campos de entrada tienen el mismo ancho y largo. Por lo tanto, no sirve de nada usar CSS para alinear los campos del formulario.
