Control de entrada de HTML

Introducción

En HTML, la etiqueta <input> se utiliza para crear varios tipos de campos de entrada. Esta práctica demostrará cómo crear diferentes tipos de campos de entrada en un formulario HTML utilizando la etiqueta <input> con el atributo type adecuado.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

Crea un campo de entrada de texto

Crea un nuevo archivo HTML llamado index.html. Este archivo contendrá el código HTML para el formulario de entrada.

Para crear un campo de entrada de texto, utiliza el siguiente código HTML:

<label for="username">Nombre de usuario:</label><br />
<input type="text" id="username" name="username" /><br />

En el código, hemos creado una etiqueta para el campo de entrada, establecido el atributo type en "text" y asignado un atributo id y name. Este código creará un campo de entrada de texto para que el usuario ingrese su nombre de usuario.

Crea un campo de entrada de contraseña

Para crear un campo de entrada de contraseña, utiliza el siguiente código:

<label for="password">Contraseña:</label><br />
<input type="password" id="password" name="password" /><br />

En el código, hemos establecido el atributo type en "password", lo que ocultará los caracteres de la contraseña que el usuario ingrese.

Crea un campo de entrada de casilla de verificación

Para crear un campo de entrada de casilla de verificación, utiliza el siguiente código:

<label for="vehicle1">Tengo un automóvil</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">Tengo una bicicleta</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">Tengo un bote</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

En el código, hemos creado tres casillas de verificación para que el usuario elija. Tenga en cuenta que cada casilla de verificación tiene un atributo id, name y value diferente.

Crea un campo de entrada de botón de radio

Para crear un campo de entrada de botón de radio, utiliza el siguiente código:

<label for="male">Hombre</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Mujer</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Otro</label>
<input type="radio" id="other" name="gender" value="other" />

En el código, hemos creado tres botones de radio para que el usuario elija su género. Tenga en cuenta que cada botón de radio tiene un atributo id, name y value diferente.

Crea un botón de envío

Para crear un botón de envío, utiliza el siguiente código:

<input type="submit" value="Enviar" />

En el código, hemos creado un botón que el usuario clicará para enviar el formulario.

Resumen

En esta práctica, hemos aprendido cómo crear diferentes tipos de campos de entrada en un formulario HTML utilizando la etiqueta <input> con el atributo type adecuado. Creamos campos de entrada de texto, de contraseña, de casilla de verificación, de botón de radio y un botón de envío. Puedes utilizar estos ejemplos como punto de partida para crear formularios HTML más complejos que recopilen la entrada del usuario.