HTML | atributo de valor – Barcelona Geeks

El atributo de valor en HTML se usa para especificar el valor del elemento con el que se usa. Tiene un significado diferente para diferentes elementos HTML.
Uso: Se puede usar con los siguientes elementos: <input>, <button>, <meter>, <li>, <option>, <progress> y <param>, <output>.

<entrada>: cuando el atributo de valor está presente, especifica el valor inicial del elemento de entrada.
Tiene un significado diferente para diferentes tipos de entrada:

Cuando está presente en «botón», «restablecer» y «enviar», especifica el texto en el botón.
Cuando está presente en «texto», «contraseña» y «oculto», especifica el valor inicial del campo de entrada.
Cuando está presente en «casilla de verificación», «radio» e «imagen», especifica el valor asociado con la entrada.

Sintaxis:
```
<input value = "value">
```

Ejemplo 1:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        Input: <input type = "text" value = "GeeksforGeeks">
  
    </body>
</html>

Producción:

Ejemplo-2:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        <input type = "button" value = "Click me!">
  
    </body>
</html>

Producción:

<botón>: cuando el atributo de valor está presente, especifica el valor inicial del elemento del botón.

Sintaxis:
```
<button value = "value">
```

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        <button id="btn" value="GeeksforGeeks" onclick="geek()">
         Click me!</button>
          
        <p id="g"></p>
          
        <script>
            function geek() {
              var x = document.getElementById("btn").value;
              document.getElementById("g").innerHTML = "Welcome to " + x;
            }
        </script>
    </body>
</html>

Salida:
Antes de hacer clic en el botón:

Después de hacer clic en el botón:

<metro>: Especifica el valor actual del calibre. El valor debe estar entre el atributo min y max.

Sintaxis:
```
<meter value = "value">
```

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        <p>Health: <meter min="0" low="40" high="90"
                          max="100" value="60"></meter></p>
    </body>
</html>

Producción:

<li>: cuando el atributo de valor está presente, especifica el valor inicial del elemento de la lista. Sólo es aplicable en la lista ordenada.

Sintaxis:
```
<li value = "number">list item </li>
```

número: especifica el valor del elemento de la lista.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body >
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        <p>Sorting Algorithms</p>
          
        <ol>
          <li value="50">Merge sort</li>
          <li>Quick sort</li>
          <li>Insertion sort</li>
        </ol>
    </body>
</html>

Producción:

<opción>: cuando el atributo de valor está presente, especifica el valor del elemento de opción.

Sintaxis:
```
<option value = "value"></option>
```

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        Sorting Algorithms:
        <select id="opt">
          <option value="quick">Quick sort</option>
          <option value="merge">Merge sort</option>
          <option value="insertion">Insertion sort</option>
        </select>
          
        <button type="button" onclick="geek()">Click me!</button>
        <p id = "p"></p>
        <script>
            function geek() {
              var x = document.getElementById("opt").selectedIndex;
              var y = document.getElementsByTagName("option")[x].value;
              document.getElementById("p").innerHTML = "The selected 
              option has value equals " + y + ".";
            }
        </script>
    </body>
</html>

Salida:
Antes de hacer clic en el botón:

Después de hacer clic en el botón:

<progreso>: cuando el atributo de valor está presente, especifica el valor del elemento de progreso.

Sintaxis:
```
<progress value = "number"></progress>
```

number especifica el valor inicial del elemento de progreso.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML value Attribute</title>
    </head>
    <body style = "text-align:center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            HTML value Attribute
        </h2>
          
        Progress:
        <progress value="65" max="100">
        </progress>
    </body>
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con el atributo de valor en el elemento de progreso se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta