Métodos de entrada de datos

En HTML, la manera de conseguir información del usuario es por medio de input tags o etiquetas de entrada de datos.

Existen varias etiquetas con este propósito.

<label>

Usar un método de entrada por sí solo puede ser un poco confuso ya que no tiene un texto que indique de qué se trata el campo.

Normalmente lo utilizamos junto con la etiqueta <label>. La cual nos ayuda a crear un texto que describe la información a introducir.

Cuando hacemos esto debemos de agregar el atributo for dentro de <label> y un identificador id dentro de <input>.

Ambas deben tener el mismo valor para relacionarlas correctamente.

<label for="name">Nombre:</label>
<input type="text" id="name" />

De manera alternativa, si no queremos ligarlas explícitamente con dichos atributos, podemos meter <input> dentro de <label>.

<label>
  Nombre:
  <input type="text" />
</label>

De esta manera podemos obtener el mismo resultado visual, pero con menos código.

<input>

La etiqueta esencial es <input> que nos ofrece una gran variedad de métodos de entrada de datos.

<input />

Se usa junto con el atributo type o tipo, que nos ayuda a cambiar el tipo de entrada de dato.

Existen muchos diferentes:

<input type="text" />
<input type="email" />
<input type="password" />
<input type="number" />
<input type="radio" />
<input type="checkbox" />
<input type="date" />
<input type="submit" />

text, email y password

El tipo text nos ayuda a mostrar una barra donde el usuario puede insertar texto.

<label>
  Texto:
  <input type="text" />
</label>

El tipo email es similar, sólo que espera datos con el formato de correo electrónico: correo@ejemplo.com.

<label>
  Email:
  <input type="email" />
</label>

El tipo password oculta lo que se escribe en el campo.

<label>
  Contraseña:
  <input type="password" />
</label>

number

Nos ayuda a crear un campo donde sólo se pueden introducir números

<label>
  Número:
  <input type="number" />
</label>

radio

Nos ayuda a crear conjuntos de opciones donde sólo se puede seleccionar un elemento.

Esta entrada es especial porque debemos agregar el mismo atributo name a todas las opciones para que sólo se pueda seleccionar una a la vez.

<label>
  Opción 1:
  <input type="radio" name="ejemplo" />
</label>
<label>
  Opción 2:
  <input type="radio" name="ejemplo" />
</label>
<label>
  Opción 3:
  <input type="radio" name="ejemplo" />
</label>

checkbox

Nos ayuda a crear una casilla de verificación para poder seleccionar diferentes opciones.

<label>
  Opción 1:
  <input type="checkbox" name="ejemplo" />
</label>
<label>
  Opción 2:
  <input type="checkbox" name="ejemplo" />
</label>
<label>
  Opción 3:
  <input type="checkbox" name="ejemplo" />
</label>

date

Nos ayuda a crear un campo donde podemos seleccionar una fecha.

<label>
  Fecha:
  <input type="date" />
</label>

submit

Nos ayuda a crear un botón para enviar nuestro formulario (<form>).

Por defecto, el mensaje que aparece será “Submit”, que significa “Enviar” en inglés.

<input type="submit" />

Para cambiar eso, podemos usar el atributo value con el mensaje que queramos poner.

<input type="submit" value="Da clic para enviar" />

<textarea>

Esta etiqueta nos ayuda a crear campos de texto que tengan más de un renglón.

<textarea>Texto por defecto</textarea>

<select> y <option>

Nos ayudan a crear menús desplegables con diferentes opciones.

<select>
  <option value="opcion-a">Opción A</option>
  <option value="opcion-b">Opción B</option>
  <option value="opcion-c">Opción C</option>
</select>

Comentarios

Rutas relacionadas

Web Dev (Frontend)

Artículos relacionados