Penentuan Nilai Pada Elemen HTML Menggunakan Atribut Value
 |
| Ilustrasi Atribut Value HTML |
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">
<!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:<!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
- Merge sort
- Quick sort
- 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:- Penggunaan Atribut Onhashchange pada Elemen HTML [klik]
- 2 Contoh Penggunaan Atribut Onload pada Elemen HTML [klik]
- Cara Menggunakan Atribut Onoffline pada Elemen HTML [klik]
- Cara Mudah Menggunakan Atribut OnOnline pada Elemen HTML [klik]
- 1 Contoh Penggunaan Atribut OnPageShow Ketika Melakukan Navigasi HTML [klik]
- Cara Singkat Penggunaan Atribut OnResize pada Elemen HTML [klik]
- Cara Penggunaan Atribut OnUnload pada Elemen HTML [klik]
5 komentar untuk "Penentuan Nilai Pada Elemen HTML Menggunakan Atribut Value"
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 -
Apa yang dimaksud dengan atribut value pada elemen html?
BalasHapusAtribut value pada html digunakan untuk menentukan nilai input pada file html. Atribut value digunakan secara berbeda untuk tipe input berbeda-beda.
HapusSampai sini sudah lumayan memahami fungsi dari atribut value pada elemen html.
HapusYang belum terlalu memahami fungsi dari atribut value pada elemen html mending rakit PC aja.
HapusAtribut value berfungsi untuk menentukan nilai atau value elemen yang digunakan sesuai dengan jenis input elemen yang menyertainya.
Hapus