El Atributo VALUE

El atributo value en HTML se utiliza para especificar el valor inicial o el valor actual de un elemento. Su función y significado varían dependiendo del tipo de elemento al que se aplique. Es un atributo fundamental para la interacción con formularios y para definir contenido inicial en ciertos elementos.

¿A qué elementos se aplica el atributo value?

El atributo value es más comúnmente utilizado con los siguientes elementos de formulario:

• <input> (con varios tipos)
• <button>
• <option>
• <progress>
• <meter>

Vamos a explorar cómo se utiliza en cada uno de estos casos.

El atributo value en el elemento <input>

El comportamiento del atributo value en el elemento <input> depende del tipo de entrada type.

Para los siguientes tipos:

• type="text"
• type="password"
• type="email"
• type="number"
• type="url"
• type="search"

El atributo value define el texto inicial que se muestra dentro del campo de entrada.

Cuando el usuario interactúa con el campo y modifica el texto, el valor del atributo value no cambia automáticamente en el HTML. El valor que el usuario ingresa se convierte en el valor actual del campo, que puede ser accedido mediante JavaScript o enviado al servidor al enviar el formulario.

HTML:

<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Introduce tu nombre"><br><br>

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

<label for="numero">Número:</label><br>
<input type="number" id="numero" name="numero" value="100"><br><br>

Para los siguientes tipos:

• type="checkbox"
• type="radio"

El atributo value define el valor que se enviará al servidor cuando el checkbox o el radio button esté seleccionado.

Es importante destacar que el atributo value aquí no controla si el elemento está seleccionado o no. Para eso, se utiliza el atributo checked.

HTML:

<input type="checkbox" id="opcion1" name="opciones" value="opcion1" checked>
<label for="opcion1">Opción 1</label><br>

<input type="radio" id="genero_masculino" name="genero" value="masculino">
<label for="genero_masculino">Masculino</label><br>

<input type="radio" id="genero_femenino" name="genero" value="femenino" checked>
<label for="genero_femenino">Femenino</label><br>

Para los siguientes tipos:

• type="submit"
• type="reset"

El atributo value define el texto que se mostrará en el botón.

<input type="submit" value="Enviar Formulario">
<input type="reset" value="Limpiar Formulario">

Para el siguiente tipos:

• type="button"

Similar a submit y reset, el atributo value define el texto que se mostrará en el botón. Este tipo de botón generalmente se utiliza con JavaScript para realizar acciones específicas.

HTML:

<input type="button" value="Haz clic aquí">

Para los siguientes tipos:

• type="date"
• type="time"
• type="datetime-local"
• type="color"
• type="range"
• type="file"
• type="hidden"

El comportamiento del atributo value en estos tipos de input varía:

• Para date, time, y datetime-local, define el valor inicial de la fecha u hora.
• Para color, define el color inicial (en formato hexadecimal).
• Para range, define el valor inicial del deslizador.
• Para file, el atributo value no se puede establecer mediante HTML por razones de seguridad.
• Para hidden, define el valor que se enviará al servidor aunque no sea visible para el usuario.

El atributo value en el elemento <button>

El atributo value en el elemento <button> también define el texto que se mostrará en el botón. Aunque es común usar el contenido del elemento <button> para definir el texto, el atributo value puede ser útil en ciertos contextos, especialmente al trabajar con formularios y JavaScript.

HTML:

<button type="submit" value="Enviar">Enviar Datos</button>
<button type="button" value="Cancelar">Cancelar</button>

El atributo value en el elemento <option>

Dentro de un elemento <select>, cada <option> tiene un atributo value. Este atributo define el valor que se enviará al servidor cuando esa opción sea seleccionada. El texto que se muestra al usuario es el contenido del elemento <option>.

HTML:

<label for="pais">Selecciona tu país:</label><br>
<select id="pais" name="pais">
  <option value="mx">México</option>
  <option value="us">Estados Unidos</option>
  <option value="ca">Canadá</option>
  <option value="es">España</option>
</select>

En este ejemplo, si el usuario selecciona "México", el valor enviado al servidor será "mx".

El atributo value en los elementos <progress> y <meter>

<progress>: El atributo value especifica cuánto del trabajo se ha completado. El valor máximo se define con el atributo max (por defecto es 1).

<progress value="75" max="100">75%</progress>

<meter value="60" min="0" max="100" low="30" high="80" optimum="70">60 de 100</meter>

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo del Atributo Value</title>
</head>
<body>

  <h2>Formulario de Registro</h2>

  <form action="/procesar_formulario" method="post">
    <label for="email">Correo Electrónico:</label><br>
    <input type="email" id="email" name="email" value="usuario@ejemplo.com"><br><br>

    <label>Género:</label><br>
    <input type="radio" id="masculino" name="genero" value="masculino" checked>
    <label for="masculino">Masculino</label><br>
    <input type="radio" id="femenino" name="genero" value="femenino">
    <label for="femenino">Femenino</label><br><br>

    <label for="ciudad">Ciudad:</label><br>
    <select id="ciudad" name="ciudad">
      <option value="gdl" selected>Guadalajara</option>
      <option value="cdmx">Ciudad de México</option>
      <option value="mty">Monterrey</option>
    </select><br><br>

    <label for="rango_edad">Rango de Edad:</label><br>
    <input type="range" id="rango_edad" name="rango_edad" min="18" max="100" value="25"><br><br>

    <input type="submit" value="Registrarse">
    <input type="reset" value="Borrar">
  </form>

  <h2>Indicadores</h2>
  <p>Progreso de Descarga:</p>
  <progress value="60" max="100">60%</progress><br><br>

  <p>Nivel de Batería:</p>
  <meter value="0.8">80%</meter>

</body>
</html>