¿Qué es el formulario HTML? El formulario
HTML es un documento que almacena información de un usuario en un servidor web mediante controles interactivos. Un formulario HTML contiene diferentes tipos de información, como nombre de usuario, contraseña, número de contacto, identificación de correo electrónico, etc.
Los elementos utilizados en un formulario HTML son casillas de verificación, cuadros de entrada, botones de opción, botones de envío, etc. El uso de estos elementos es la información de un usuario. se envía en un servidor web.
La etiqueta de formulario se utiliza para crear un formulario HTML.
Ejemplo de un formulario HTML:
html
<!DOCTYPE html> <html> <body> <form> Username:<br> <input type="text" name="username"> <br> Email id:<br> <input type="text" name="email_id"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Producción :
Elemento de entrada en formularios HTML:
Los elementos de entrada son los elementos más comunes que se utilizan en los formularios HTML. Se pueden crear varios campos de entrada de usuario, como campo de texto, casilla de verificación, campo de contraseña, botón de radio, botón de envío, etc. Los elementos de entrada más comunes se enumeran a continuación:
- Campo de texto en formularios HTML:
el campo de texto es un campo de entrada de una línea que permite al usuario ingresar texto. Los controles de entrada de campo de texto se crean usando el elemento «entrada» con un atributo de tipo que tiene valor como «texto».
html
<!DOCTYPE html> <html> <body> <h3>Example Of Text Field</h3> <form> <label for="EMAIL ID">Email Id:</label><br> <input type="text" name="Email id" id="Email id"> </form> </body> </html>
Producción:
- Campo de contraseña en formularios HTML:
los campos de contraseña son un tipo de campo de texto en el que el texto ingresado se enmascara con asteriscos o puntos para evitar la identidad del usuario de otra persona que está mirando la pantalla. Los controles de entrada del campo de contraseña se crean utilizando el elemento «entrada» con un atributo de tipo que tiene el valor «contraseña».
html
<!DOCTYPE html> <html> <body> <h3>Example of Password Field</h3> <form> <label for="user-password">Password: </label><br> <input type="password" name="user-pwd" id="user-password"> </form> </body> </html>
- Producción :
- Botones de radio en formato HTML:
los botones de radio se utilizan para permitir que el usuario seleccione exactamente una opción de una lista de opciones predefinidas. Los controles de entrada de botón de opción se crean utilizando el elemento «entrada» con un atributo de tipo que tiene el valor «radio».
html
<!DOCTYPE html> <html> <body> <h3>Example of Radio Buttons</h3> <form> SELECT GENDER <br> <input type="radio" name="gender" id="male"> <label for="male">Male</label><br> <input type="radio" name="gender" id="female"> <label for="female">Female</label> </form> </body> </html>
- Producción :
- Casillas de verificación en formato HTML:
las casillas de verificación se utilizan para permitir que el usuario seleccione una o más opciones de un conjunto predefinido de opciones. Los controles de entrada de casilla de verificación se crean utilizando el elemento «entrada» con un atributo de tipo que tiene valor como «casilla de verificación».
html
<!DOCTYPE html> <html> <body> <h3>Example of HTML Checkboxes</h3> <form> <b>SELECT SUBJECTS</b> <br> <input type="checkbox" name="subject" id="maths"> <label for="maths">Maths</label> <input type="checkbox" name="subject" id="science"> <label for="science">Science</label> <input type="checkbox" name="subject" id="english"> <label for="english">English</label> </form> </body> </html>
- Producción :
Cuadros de selección de archivos en formularios HTML:
Los cuadros de selección de archivos se utilizan para permitir que el usuario seleccione un archivo local y lo envíe como archivo adjunto al servidor web. Es similar a un cuadro de texto con un botón que permite al usuario buscar un archivo. En lugar de buscar el archivo, también se puede escribir la ruta y el nombre del archivo. Los cuadros de selección de archivos se crean utilizando el elemento «entrada» con un atributo de tipo que tiene valor como «archivo».
html
<!DOCTYPE html> <html> <body> <h3>Example of a File Select Box</h3> <form> <label for="fileselect">Upload:</label> <input type="file" name="upload" id="fileselect"> </form> </body> </html>
Producción :
Área de texto en un formulario HTML:
El área de texto es un control de entrada de texto de varias líneas que permite al usuario proporcionar una descripción o texto en varias líneas. Se crea un control de entrada de área de texto utilizando el elemento «área de texto».
html
<!DOCTYPE html> <html> <body> <h3>Example of a Text Area Box</h3> <form> <label for="Description">Description:</label> <textarea rows="5" cols="50" name="Description" id="Description"></textarea> </form> </body> </html>
Producción :
Seleccionar cuadros en formularios HTML:
Los cuadros de selección se utilizan para permitir a los usuarios seleccionar una o más de una opción de una lista desplegable de opciones. Los cuadros de selección se crean utilizando dos elementos que son «seleccionar» y «opción». Los elementos de la lista se definen dentro del elemento de selección.
html
<!DOCTYPE html> <html> <body> <h3>Example of a Select Box</h3> <form> <label for="country">Country:</label> <select name="country" id="country"> <option value="India">India</option> <option value="Sri Lanka">Sri Lanka</option> <option value="Australia">Australia</option> </select> </form> </body> </html>
Producción :
Botones de reinicio y envío:
El botón Enviar permite al usuario enviar los datos del formulario al servidor web. El botón Restablecer se usa para restablecer los datos del formulario y usar los valores predeterminados.
html
<!DOCTYPE html> <html> <body> <h3>Example of a Submit And Reset Button</h3> <form action="test.php" method="post" id="users"> <label for="username">Username:</label> <input type="text" name="username" id="Username"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </body> </html>
Producción :
Atributos utilizados en formularios HTML
El atributo de acción:
el atributo de acción decide la acción que se realizará después de enviar el formulario. Generalmente, los datos del formulario se envían a una página web en el servidor web después de que el usuario hace clic en el botón Enviar.
Ejemplo :
html
<!DOCTYPE html> <html> <body> <h3>Example of a Submit And Reset Button</h3> <form action="test.php" method="post" id="users"> <label for="username">Username:</label> <input type="text" name="username" id="Username"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> </body> </html>
If you click the submit button, the form data would be sent to a page called test.php .
El atributo de destino en formularios HTML:
el atributo de destino se utiliza para especificar si el resultado enviado se abrirá en la ventana actual, en una nueva pestaña o en un nuevo marco. El valor predeterminado utilizado es «auto», lo que da como resultado el envío del formulario en la misma ventana. Para hacer que el resultado del formulario se abra en una nueva pestaña del navegador, el valor debe establecerse en «en blanco».
html
<!DOCTYPE html> <html> <body> <form action="/test.php" target="_blank"> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="password" name="password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
After clicking on the submit button, the result will open in a new browser tab.
Atributo de nombre en formularios HTML:
el atributo de nombre es obligatorio para cada campo de entrada. Si el atributo de nombre no se especifica en un campo de entrada, los datos de ese campo no se enviarán en absoluto.
html
<!DOCTYPE html> <html> <body> <form action="/test.php" target="_blank"> Username:<br> <input type="text"> <br> Password:<br> <input type="password" name="password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
In the above code, after clicking the submit button, the form data will be sent to a page called /test.php. The data sent would not include the username input field data since the name attribute is omitted.
El atributo del método:
Se utiliza para especificar el método HTTP utilizado para enviar datos al enviar el formulario. Hay dos tipos de métodos HTTP, que son GET y POST.
El método GET –
html
<!DOCTYPE html> <html> <body> <form action="/test.php" target="_blank" method="GET"> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="password" name="password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
In the GET method, after the submission of the form, the form values will be visible in the address bar of the new browser tab.
El método de publicación –
html
<!DOCTYPE html> <html> <body> <form action="/test.php" target="_blank" method="post"> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="password" name="password"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
In the post method, after the submission of the form, the form values will not be visible in the address bar of the new browser tab as it was visible in the GET method.
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA