HTML: formularios
Los formularios HTML son necesarios cuando desee recopilar algunos datos del visitante del sitio. Por ejemplo, durante el registro de usuario, le gustaría recopilar información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.
Un formulario tomará la entrada del visitante del sitio y luego lo publicará en una aplicación de back-end como CGI, ASP Script o script PHP, etc. La aplicación de back-end realizará el procesamiento requerido en los datos pasados según la lógica comercial definida dentro la aplicación.
Hay varios elementos de formulario disponibles como campos de texto, campos de área de texto, menús desplegables, botones de radio, casillas de verificación, etc.
El HTML <form> La etiqueta se usa para crear un formulario HTML y tiene la siguiente sintaxis:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Atributos de formulario
Además de los atributos comunes, a continuación se muestra una lista de los atributos de formulario más utilizados:
| No Señor | Atributo y descripción |
|---|---|
| 1 | action Script de backend listo para procesar sus datos pasados. |
| 2 | method Método que se utilizará para cargar datos. Los más utilizados son los métodos GET y POST. |
| 3 | target Especifique la ventana o el marco de destino donde se mostrará el resultado del script. Toma valores como _blank, _self, _parent, etc. |
| 4 | enctype Puede utilizar el atributo enctype para especificar cómo el navegador codifica los datos antes de enviarlos al servidor. Los valores posibles son: application/x-www-form-urlencoded - Este es el método estándar que utilizan la mayoría de los formularios en escenarios simples. mutlipart/form-data - Esto se utiliza cuando desea cargar datos binarios en forma de archivos como imagen, archivo de palabra, etc. |
Note- Puede consultar Perl y CGI para obtener detalles sobre cómo funciona la carga de datos de formulario.
Controles de formulario HTML
Hay diferentes tipos de controles de formulario que puede utilizar para recopilar datos mediante formularios HTML:
- Controles de entrada de texto
- Controles de casillas de verificación
- Controles de la caja de radio
- Seleccionar controles de caja
- Cuadros de selección de archivos
- Controles ocultos
- Botones en los que se puede hacer clic
- Botón Enviar y reiniciar
Controles de entrada de texto
Hay tres tipos de entrada de texto que se utilizan en los formularios:
Single-line text input controls- Este control se usa para elementos que requieren solo una línea de entrada del usuario, como cuadros de búsqueda o nombres. Se crean usando HTML<input> etiqueta.
Password input controls- Esta también es una entrada de texto de una sola línea, pero enmascara el carácter tan pronto como un usuario lo ingresa. También se crean utilizando la etiqueta HTMl <input>.
Multi-line text input controls- Se utiliza cuando el usuario debe proporcionar detalles que pueden ser más largos que una sola oración. Los controles de entrada de varias líneas se crean utilizando HTML<textarea> etiqueta.
Controles de entrada de texto de una sola línea
Este control se utiliza para elementos que requieren solo una línea de entrada del usuario, como cuadros de búsqueda o nombres. Se crean utilizando la etiqueta HTML <input>.
Ejemplo
Aquí hay un ejemplo básico de una entrada de texto de una sola línea que se usa para tomar el nombre y el apellido:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos de la etiqueta <input> para crear un campo de texto.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de texto se establecerá en text. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value Esto se puede utilizar para proporcionar un valor inicial dentro del control. |
| 4 | size Permite especificar el ancho del control de entrada de texto en términos de caracteres. |
| 5 | maxlength Permite especificar el número máximo de caracteres que un usuario puede ingresar en el cuadro de texto. |
Controles de entrada de contraseña
Esta también es una entrada de texto de una sola línea, pero enmascara el carácter tan pronto como un usuario lo ingresa. También se crean utilizando la etiqueta HTML <input> pero el atributo de tipo se establece enpassword.
Ejemplo
Aquí hay un ejemplo básico de una entrada de contraseña de una sola línea utilizada para tomar la contraseña de usuario:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos de la etiqueta <input> para crear el campo de contraseña.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de contraseña se establecerá en password. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value Esto se puede utilizar para proporcionar un valor inicial dentro del control. |
| 4 | size Permite especificar el ancho del control de entrada de texto en términos de caracteres. |
| 5 | maxlength Permite especificar el número máximo de caracteres que un usuario puede ingresar en el cuadro de texto. |
Controles de entrada de texto de varias líneas
Se utiliza cuando el usuario debe proporcionar detalles que pueden ser más largos que una sola oración. Los controles de entrada de varias líneas se crean utilizando la etiqueta HTML <textarea>.
Ejemplo
A continuación, se muestra un ejemplo básico de una entrada de texto de varias líneas que se utiliza para tomar la descripción del artículo:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para la etiqueta <textarea>.
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | rows Indica el número de filas del cuadro de área de texto. |
| 3 | cols Indica el número de columnas del cuadro de área de texto |
Control de casilla de verificación
Las casillas de verificación se utilizan cuando se requiere seleccionar más de una opción. También se crean utilizando la etiqueta HTML <input> pero el atributo de tipo se establece encheckbox..
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con dos casillas de verificación:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para la etiqueta <checkbox>.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de la casilla de verificación se establecerá en checkbox.. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value El valor que se utilizará si se selecciona la casilla de verificación. |
| 4 | checked Configúrelo como marcado si desea seleccionarlo de forma predeterminada. |
Control de botón de radio
Los botones de opción se utilizan cuando hay muchas opciones, solo se requiere seleccionar una. También se crean utilizando la etiqueta HTML <input> pero el atributo de tipo se establece enradio.
Ejemplo
Aquí hay un ejemplo de código HTML para un formulario con dos botones de opción:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para el botón de opción.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de la casilla de verificación se establecerá en radio. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value El valor que se utilizará si se selecciona la casilla de radio. |
| 4 | checked Configúrelo como marcado si desea seleccionarlo de forma predeterminada. |
Seleccionar control de caja
Un cuadro de selección, también llamado cuadro desplegable que ofrece la opción de enumerar varias opciones en forma de lista desplegable, desde donde un usuario puede seleccionar una o más opciones.
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con un cuadro desplegable
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos importantes de la etiqueta <select>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | size Esto se puede utilizar para presentar un cuadro de lista de desplazamiento. |
| 3 | multiple Si se establece en "múltiple", permite al usuario seleccionar varios elementos del menú. |
A continuación se muestra la lista de atributos importantes de la etiqueta <option>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | value El valor que se utilizará si se selecciona una opción en el cuadro de selección. |
| 2 | selected Especifica que esta opción debe ser el valor seleccionado inicialmente cuando se carga la página. |
| 3 | label Una forma alternativa de etiquetar opciones |
Cuadro de carga de archivos
Si desea permitir que un usuario cargue un archivo en su sitio web, deberá usar un cuadro de carga de archivos, también conocido como cuadro de selección de archivos. Esto también se crea usando el elemento <input> pero el atributo type se establece enfile.
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con un cuadro de carga de archivo:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos importantes del cuadro de carga de archivos:
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | accept Especifica los tipos de archivos que acepta el servidor. |
Controles de botones
Hay varias formas en HTML para crear botones en los que se puede hacer clic. También puede crear un botón en el que se puede hacer clic utilizando la etiqueta <input> estableciendo su atributo de tipo enbutton. El atributo de tipo puede tomar los siguientes valores:
| No Señor | Tipo y descripción |
|---|---|
| 1 | submit Esto crea un botón que envía automáticamente un formulario. |
| 2 | reset Esto crea un botón que restablece automáticamente los controles de formulario a sus valores iniciales. |
| 3 | button Esto crea un botón que se utiliza para activar un script del lado del cliente cuando el usuario hace clic en ese botón. |
| 4 | image Esto crea un botón en el que se puede hacer clic, pero podemos usar una imagen como fondo del botón. |
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con tres tipos de botones:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Controles de forma oculta
Los controles de formulario ocultos se utilizan para ocultar datos dentro de la página que luego se pueden enviar al servidor. Este control se esconde dentro del código y no aparece en la página real. Por ejemplo, el siguiente formulario oculto se utiliza para mantener el número de página actual. Cuando un usuario haga clic en la página siguiente, el valor del control oculto se enviará al servidor web y allí decidirá qué página se mostrará a continuación en función de la página actual pasada.
Ejemplo
Aquí hay un ejemplo de código HTML para mostrar el uso del control oculto:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Esto producirá el siguiente resultado: