Attributet disabled
Attributet disabled inaktiverar ett
HTML-formulärelement,
det vill säga gör det inaktivt. Det är ett attribut
utan värde.
Inaktivering av element behövs vanligtvis för att förhindra användaren från att ändra vissa värden (som ändå ska visas för användaren i form av formulärelement). Ibland inaktiveras element (och aktiveras igen) med hjälp av JavaScript.
Beteende
För en knapp (button
eller input
med attributet type med värdena button,
reset eller submit) innebär inaktivering
att knappen inte kan klickas.
För ett textinmatningsfält (input
eller textarea)
går det inte att ändra eller kopiera
texten i det. För checkboxes
och radio buttons
går det inte att ändra deras tillstånd (markerad eller inte). För rullgardinsmenyer
select
går det inte att ändra det valda alternativet.
Ett inaktiverat element har som standard en grå bakgrund. Det kommer inte heller att delta i navigering med Tab-tangenten.
Exempel . Inaktiverad knapp
Låt oss inaktivera en knapp med attributet
disabled. Som jämförelse finns ett exempel
på en knapp som inte är inaktiverad (försök att klicka på den):
<button disabled>text</button>
<button>text</button>
:
Exempel . Inaktiverad checkbox
Låt oss nu titta på en inaktiverad checkbox. Som jämförelse tittar vi på ett exempel med en checkbox som inte är inaktiverad:
<input type="checkbox" disabled>
<input type="checkbox">
:
Exempel . Inaktiverad och markerad checkbox
Låt oss se hur en inaktiverad
och markerad checkbox med attributet checked
ser ut. Som jämförelse tittar vi på ett exempel med en checkbox som inte är inaktiverad men är markerad:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Exempel . Inaktiverat textfält
Låt oss nu inaktivera ett input-fält. Som jämförelse tittar vi på ett exempel med ett input-fält som inte är inaktiverat:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
Exempel . Inaktiverad textarea
Här ser vi en inaktiverad textarea (lägg märke till att storleken på den inaktiverade textarea kan ändras). Som jämförelse tittar vi på ett exempel med en textarea som inte är inaktiverad:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
Exempel . Inaktiverad rullgardinsmeny
Låt oss se hur en inaktiverad
select
fungerar. Som jämförelse tittar vi på ett exempel med en rullgardinsmeny som inte är inaktiverad:
<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>
:
