Artikel Terbaru

7 Contoh Program Penerapan Atribut Disabled pada HTML

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.

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

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


Komentar

  1. Apa yang terjadi ketika sebuah elemen di-disabled?

    BalasHapus
    Balasan
    1. 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. User tidak dapat melakukan pengeditan ataupun fokus pada kontrol.

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

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

    BalasHapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D

Hot Artikel!!!

Enkapsulasi pada Java

6 Tahap Utama dalam Melakukan Kompilasi Program Hello World Java

6 Contoh Program Method Overloading pada Java