Interfejs użytkownika

Pola wyboru typu checkbox

Wstawienie pola wyboru umożliwia znacznik <input> . Ogólna konstrukcja:

<input

type = "checkbox" // tylko dla pól wyboru - konieczne

id = "UnId" // unikalny identyfikator

name = "nazwa" // wewnętrzna nazwa pola

value = "wartość" // do wykorzystania w skryptach

[checked = "checked" ] // możliwość wstępnego włączenia / wyłączenia

[disabled = "disabled" ] // możliwość wyłączenia dla użytkownika

/>

Przykład:

w HTML:

<input type="checkbox" id= "UnId1" name="nazwa" value= "wartość" /> Opcja nr 1 <br />

...

<button onclick="funkcja_obsługi()" /> Napis_na_przycisku </button> <br />

w JS:

funkcja_obsługi()

{

if ( UnId1 && UnId1.checked) { // Akcja związana Opcją 1 }

}

Pola wyboru wzajemnie wykluczające się: radio

Ogólna konstrukcja ze znacznikiem input:

<input

type = "radio" // tylko dla pól wyboru - konieczne

id = "UnId" // unikalny identyfikator

name = "nazwa" // wewnętrzna nazwa pola

value = "wartość" // do wykorzystania w skryptach

[checked = "checked" ] // możliwość wstępnego włączenia / wyłączenia

[disabled = "disabled" ] // możliwość wyłączenia dla użytkownika

/>

Przykład:

w HTML:

<input type="radio" id="rb1" name="grupa" value="opcja_1" /> Opcja nr 1 <br />

...

<button onclick="funkcja_obsługi()" /> Napis_na_przycisku </button> <br />

w JS:

funkcja_obsługi()

{

var radiowe = document.getElementsByTagName('input');

for(var i=0; i<radiowe.length; i++)

{

if (radiowe[i].checked)

{

Akcja()

break;

}

}

}

Pole textowe text definiuje się za pomocą znacznika input:

<input

type = "text" // tylko dla pola tekstowego - konieczne

id = "UnId" // unikalny identyfikator

name = "nazwa" // wewnętrzna nazwa pola

value = "wartość" // domyślny tekst w polu

size = "rozmiar" // wymiar okienka

maxlength = "długość" // max długość napisu

[readonly = "readonly" ] // możliwość zablokowania wpisu

[disabled = "disabled" ] // możliwość wyłączenia dostępu

/>

Przykład:

w HTML:

<input type="text" id="UnId" size="50" value="Domyślny tekst" maxlength="60"/>

<button onclick =" funkcja_obsługi()"> Zatwierdź </button>

w JS:

funkcja_obsługi()

{

var poltx = document.getElementById('UnId');

var wpis = poltx.value;

. . .

Akcja();

}

---