Lompat ke konten Lompat ke sidebar Lompat ke footer

Penentuan Nilai Pada Elemen HTML Menggunakan Atribut Value

Atribut value pada html digunakan untuk menentukan value dari suatu elemen. Atribut value mengandung makna yang berbeda untuk setiap elemen html yang berbeda.


Sebelum memahami lebih dalam materi tentang Penentuan Nilai Pada Elemen HTML Menggunakan Atribut Value, terlebih dahulu pelajari materi tentang: Menerjemahkan Konten HTML Menggunakan Atribut Translate, Menentukan URL Target HTML Menggunakan Atribut Link, dan Menentukan Nilai Tab HTML Menggunakan Atribut TabIndex.

Kegunaan: atribut value dapat digunakan dengan elemen <input>, <button>, <meter>, <li>, <option> <progress>, dan <param>.

satu, <input>: Ketika atribut value ditampilkan pada elemen input, maka atribut value akan menentukan inisialisasi value dari elemen input yang memiliki makna yang berbeda bergantung pada tipe input yang digunakan.
  • Ketika atribut value ditampilkan pada elemen input "button", "reset", dan "submit" maka atribut tersebut akan digunakan untuk menentukan teks pada button.
  • Ketika atribut value ditampilkan pada elemen input "text", "password", dan "hidden" maka atribut tersebut akan digunakan untuk menentukan inisialisasi value dari field input.
  • Ketika atribut value ditampilkan pada elemen input "checkbox", "radio", dan "image" maka atribut tersebut akan digunakan untuk menentukan value yang berasosiasi dengan input.

Sintak: <input value = "value">


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color:green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

Input: 

<input 

type = "text

value = "MakanDanMakan">

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value

Input:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color:green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

<input 

type = "button

value = "Sentuh Aku!">

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value



dua, <button>: ketika atribut value digunakan dengan elemen button, maka atribut value akan digunakan untuk inisialisasi value dari elemen button.

Sintak:
<button value = "value">

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color:green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

<button 

id="btn

value="makannasikucing

onclick="Bons()">

Sentuh Aku!

</button>

 

<p id="g"></p>

 

<script>

function Bons() {

var x = document.getElementById("btn").value;

document.getElementById("g").innerHTML = "Selamat Datang " + x;

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value



tiga, <meter>: atribut value digunakan untuk menentukan nilai saat ini dari suatu pengukuran. Nilai dari atribut value harus berada diantara nilai min dan max dari atribut.

Sintak:
<meter value = "value">

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color:green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

<p>

Health: 

<meter 

min="0

low="40

high="90"

max="100

value="60">

</meter>

</p>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value

Health:



empat, <li>: ketika atribut value digunakan pada elemen "li", maka atribut tersebut akan digunakan untuk inisialisasi value dari list item yang hanya dapat diterapkan pada ordered list.

Sintak: <li value = "number">list item </li>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body >

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

<p>

Algoritma Sorting

</p>

 

<ol>

<li value="50">Merge sort</li>

<li>Quick sort</li>

<li>Insertion sort</li>

</ol>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value

Algoritma Sorting

  1. Merge sort
  2. Quick sort
  3. Insertion sort


lima, <option>: ketika atribut value diterapkan pada OPTION, maka atribut tersebut akan digunakan untuk menetnukan nilai dari elemen option.

Sintak: <option value = "value"></option>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

Algoritma Sorting:

<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="Bons()">

Sentuh Aku!

</button>

 

<p id = "p"></p>

 

<script>

function Bons() {

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>

Output:

Blog Elfan

HTML Atribut Value

Algoritma Sorting:



enam, <progress>: ketika atribut value diterapkan pada PROGRESS, maka atribut value akan digunakan untuk menentukan progress dari suatu elemen.

Sintak: <progress value = "number"></progress>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Value

</title>

</head>

 

<body style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Value

</h2>

 

Progress:

<progress 

value="65

max="100">

</progress>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Value

Progress:


Artikel ini didedikasikan kepada: Ma'Rif Hidayatullah, Muchammad Ibnu Maulana, Nabil Fikri Adam, Nabila Erza Fadhilah, dan Ranu Dipo Alam.

5 komentar untuk "Penentuan Nilai Pada Elemen HTML Menggunakan Atribut Value"

  1. Apa yang dimaksud dengan atribut value pada elemen html?

    BalasHapus
    Balasan
    1. Atribut value pada html digunakan untuk menentukan nilai input pada file html. Atribut value digunakan secara berbeda untuk tipe input berbeda-beda.

      Hapus
    2. Sampai sini sudah lumayan memahami fungsi dari atribut value pada elemen html.

      Hapus
    3. Yang belum terlalu memahami fungsi dari atribut value pada elemen html mending rakit PC aja.

      Hapus
    4. Atribut value berfungsi untuk menentukan nilai atau value elemen yang digunakan sesuai dengan jenis input elemen yang menyertainya.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -