Атрибутот disabled

Атрибутот disabled го блокира елементот на HTML формата, односно го прави неактивен. Тој е атрибут без вредност.

Блокирањето на елементи обично е потребно за да му се забрани на корисникот да менува одредени вредности (кои, сепак, треба да му бидат прикажани на корисникот во вид на елементи на формата). Понекогаш елементите се блокираат (и се отстранува блокирањето) со помош на JavaSctipt.

Однесување

Во случај на копче (button или input со атрибут type во вредности button, reset или submit) блокирањето значи дека копчето нема да може да се кликне. Во случај со текстуалното поле за внесување (input или textarea) во него нема да може да се смени или копира текстот. Во случај со чекбоксите и радио копчињата нивната состојба (означено или не) нема да може да се смени. Во случај со падачките листи select нема да може да се смени избраната ставка од листата.

Блокираниот елемент стандардно има сива позадина. Тој исто така нема да учествува во премини со копчето Tab.

Пример . Блокирано копче

Ајде да го блокираме копчето со помош на атрибутот disabled. За споредба покрај пример на неблокирано копче (обидете се да го кликнете):

html<button disabled>text</button>
<button>text</button>

Результат:

Пример . Блокиран чекбокс

А сега ајде да погледнеме блокиран чекбокс. За споредба покрај гледаме пример на неблокиран чекбокс:

html<input type="checkbox" disabled>
<input type="checkbox">

Результат:

Пример . Блокиран и означен чекбокс

Ајде да видиме како изгледа блокиран и означен со помош на атрибутот checked чекбокс. За споредба покрај се обраќаме на примерот на неблокиран означен чекбокс:

html<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Результат:

Пример . Блокиран текстуелен input

А сега ајде да го блокираме input полето. За споредба покрај гледаме пример на неблокирано input поле:

html<input type="text" value="text" disabled>
<input type="text" value="text">

Результат:

Пример . Блокиран textarea

А тука ќе видиме блокиран textarea (обрнете внимание на тоа што големината на блокираниот textarea може да се менува). За споредба покрај се обраќаме на примерот на неблокиран textarea:

html<textarea disabled>text</textarea>
<textarea>text</textarea>

Результат:

Пример . Блокиран падачка листа

Ајде да видиме како работи блокиран select. За споредба покрај гледаме пример на неблокирана падачка листа:

html<select disabled>
  <option>city1</option>
  <option selected>city2</option>
  <option>city3</option>
  <option>city4</option>
</select>
<select>
  <option>city1</option>
  <option selected>city2</option>
  <option>city3</option>
  <option>city4</option>
</select>

Результат:

Погледнете исто така