Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Menonaktifkan Atribut HTML Menggunakan Atribut Disabled

Dipublikasikan Oleh: elfanmauludi 5 komentar
Atribut disabled pada HTML mengindikasikan elemen yang disabled atau yang tidak. Jika nilai atribut disabled di-setting, maka elemen tersebut akan disabled. Atribut disabled umumnya digambarkan dengan teks berwarna abu-abu. Jika elemen tersebut tidak disabled, maka tidak akan memberikan respon apapun pada user action yang merupakan atribut boolean.


Sebelum memahami lebih dalam materi tentang Menonaktifkan Atribut HTML Menggunakan Atribut Disabled, terlebih dahulu pelajari materi tentang: Mengatur Arah Teks HTML Menggunakan Atribut Dirname, Menentukan Arah Teks HTML Menggunakan Atribut Dir, dan Mengatur Tanggal dan Waktu HTML Menggunakan Atribut Datetime.

Kegunaan: Atribut disabled dapat digunakan pada elemen <button>, <input>, <option>, <select>, <textarea>, <feildset>, dan <optgroup>.

Baca Juga:

Sintak: <tag disabled></tag>

<button>: Jika atribut disabled digunakan pada elemen button, maka akan membuat elemen botton menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 

style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!--tombol disabled-->

<button 

type="button" 

disabled>

Click Me!

</button>

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled



<input>: Jika atribut disabled digunakan pada elemen input, maka akan membuat elemen input menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!--input disabled-->

<label>

 

Input:

<input 

type="text" 

name="value" 

value ="input field disabled" 

disabled>

 

</label>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled



<option>: Jika atribut disabled digunakan pada elemen option, maka akan membuat elemen option menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!-- input disabled -->

<p>

Yamaha disabled

</p>

 

<select>

 

<option 

value="yamaha" 

disabled>

yamaha

</option>

 

<option 

value="honda">

honda

</option>

 

<option 

value="ducati">

ducati

</option>

 

<option 

value="bandai">

bandai

</option>

 

</select>

 

<br>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled

Yamaha disabled



<select>: Jika atribut disabled digunakan pada elemen select, maka akan membuat elemen select menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<p>

select field disabled.

</p>

 

<select disabled>

 

<option 

value="binary">

Binary Search

</option>

 

<option 

value="linear">

Linear Search

</option>

 

<option 

value="interpolation">

Interpolation Search

</option>

 

</select>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled

select field disabled.



<textarea>: Jika atribut disabled digunakan pada elemen textarea, maka akan membuat elemen textarea menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 

style = "color: green;">

Blog Elfan 

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!-- textarea disabled -->

<textarea disabled>

textarea disabled.

</textarea>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled



<fieldset>: Jika atribut disabled digunakan pada elemen fieldset, maka akan membuat elemen fieldset menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

 

</head>

<body 

style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!-- fieldset disabled -->

<p>

field disetting disabled.

</p>

 

<fieldset 

disabled>

 

Name: 

<input type="text">

<br>

 

</fieldset>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled

field disetting disabled.

Name: 


<optgroup>: Jika atribut disabled digunakan pada elemen optgroup, maka akan membuat elemen optgroup menjadi disabled yang tidak dapat digunakan atau diklik.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML atribut disabled

</title>

</head>

 

<body 

style = "text-align:center">

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML atribut disabled

</h2>

 

<!-- optgroup disabled -->

<select>

 

<optgroup 

label="Kendaraan German" 

disabled>

 

<option 

value="mercedes">

Mercedes

</option>

 

<option 

value="audi">

Audi

</option>

 

</optgroup>

 

</select>

 

</body>

 

</html>

Output:

Blog Elfan

HTML atribut disabled



Artikel ini didedikasikan kepada: Steven Jordan Alvaro Ramba, Wiwik Widu Wati, Y. Aletha Sekarini, Zainnetha Surya Charmelita, dan Ainis Faradila.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Menonaktifkan Atribut HTML Menggunakan Atribut Disabled"

  1. AnonimSelasa, 03 Agustus 2021 pukul 15.49.00 WIB

    Apa yang terjadi ketika sebuah elemen di-disabled?

    BalasHapus
    Balasan
    1. AnonimSelasa, 03 Agustus 2021 pukul 15.49.00 WIB

      Ketika sebuah elemen disabled, maka elemen tersebut tidak dapat dilakukan perubahan apapun, tidak dapat difokuskan, ataupun juga tidak dapat dilakukan submit bersama form.

      Hapus
    2. AnonimSelasa, 03 Agustus 2021 pukul 15.49.00 WIB

      User tidak dapat melakukan pengeditan ataupun fokus pada kontrol.

      Hapus
    3. AnonimSelasa, 03 Agustus 2021 pukul 15.49.00 WIB

      Ketika elemen pendukung memiliki atribut disabled yang disetting, maka kelas semua :disabled juga berlaku untuk elemen tersebut.

      Hapus
  2. AnonimSelasa, 03 Agustus 2021 pukul 15.50.00 WIB

    Aduh bingung juga ya melakukan disabled pada elemen pada dokumen html, daripada bingung mending rakit PC aja.

    BalasHapus

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 -