JS 13 Interfejs użytkownika.doc

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();

}