HTML input

La etiqueta <input> es una de las etiquetas más importantes y versátiles en HTML. Se utiliza para crear diferentes tipos de campos de entrada, como cajas de texto, botones, casillas de verificación, botones de radio, etc. Cada tipo de campo de entrada tiene diferentes atributos y comportamientos.

Atributos

Algunos de los atributos más comunes de la etiqueta <input> son:

  • type: especifica el tipo de campo de entrada. Puede ser “text”, “password”, “radio”, “checkbox”, “submit”, “reset”, entre otros.
  • name: especifica el nombre del campo de entrada. Es necesario para el procesamiento y envío de los datos del formulario.
  • value: especifica el valor predeterminado del campo de entrada.
  • id: especifica un identificador único para el campo de entrada. Es necesario para la etiqueta “label” y para identificar el campo de entrada con JavaScript.
  • required: especifica que el campo de entrada es obligatorio.
  • disabled: deshabilita el campo de entrada.
  • readonly: especifica que el campo de entrada es de solo lectura.
  • placeholder: especifica una sugerencia de texto en el campo de entrada antes de que el usuario ingrese algo.

Ejemplo de uso

Aquí te dejo un ejemplo de un campo de texto con algunos de los atributos mencionados anteriormente:


<form>
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" placeholder="Ingresa tu nombre" required>
</form>

Lenguaje del código: HTML, XML (xml)

En este ejemplo se crea un campo de texto con el atributo “type” establecido en “text”, el atributo “id” establecido en “name”, el atributo “name” establecido en “name”, el atributo “placeholder” establecido en “Ingresa tu nombre” y el atributo “required” establecido en verdadero.

El atributo “for” de la etiqueta <label> establecido en “name” vincula la etiqueta <label> con el campo de entrada.

Más ejemplos

Aquí hay algunos ejemplos de campos de entrada utilizando diferentes atributos de la etiqueta <input> en HTML:

  1. Campo de texto con atributo “placeholder”:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Ingresa tu correo electrónico" required>
</form>

Lenguaje del código: HTML, XML (xml)
  1. Botón de enviar con atributo “value”:

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

Lenguaje del código: HTML, XML (xml)
  1. Casilla de verificación con atributo “checked”:

<form>
  <input type="checkbox" id="newsletter" name="newsletter" checked>
  <label for="newsletter">Suscribirme a la newsletter</label>
</form>

Lenguaje del código: HTML, XML (xml)
  1. Botón de radio con atributo “disabled”:

<form>
  <input type="radio" id="male" name="gender" value="male" disabled>
  <label for="male">Masculino</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Femenino</label>
</form>

Lenguaje del código: HTML, XML (xml)
  1. Campo de contraseña con atributo “readonly”:

<form>
  <label for="password">Contraseña:</label>
  <input type="password" id="password" name="password" readonly>
  <p>La contraseña no se puede cambiar.</p>
</form>

Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos te ayuden a entender mejor cómo utilizar los diferentes atributos de la etiqueta <input> en HTML.