JavaScript ve formları kullanma

Javascript pek çok şapka takar. Özel efektler oluşturmak için JavaScript kullanabilirsiniz. Karar verme yeteneklerinden yararlanarak HTML sayfalarınızı "daha akıllı" hale getirmek için JavaScript'i kullanabilirsiniz. HTML formlarını geliştirmek için JavaScript kullanabilirsiniz. Bu son uygulama özellikle önemlidir. JavaScript'in giyebileceği tüm şapkalar arasında, form işleme özellikleri en çok aranan ve kullanılanlar arasındadır.

Bir Web yayıncısının kalbinde şu üç harften daha fazla korku olamaz: CGI. CGI (ortak ağ geçidi arayüzü anlamına gelir), verileri bir istemciden (bir tarayıcıdan) bir sunucuya güvenli bir şekilde taşımak için bir mekanizmadır. Genellikle verileri bir HTML formundan sunucuya aktarmak için kullanılır.

Yanınızda JavaScript ile sunucuyu çalıştırmadan basit formları işleyebilirsiniz. Ve formu bir CGI programına gönderirken gerekliyse, JavaScript'in, kullanıcının her i.i.'de noktalı olduğundan emin olmak için girişi doğrulama gibi tüm ön gereklilikleri yerine getirmesini sağlayabilirsiniz. Bu sütunda, JavaScript'in form nesnesinin nasıl kullanılacağı, form içeriğinin nasıl okunacağı ve ayarlanacağı ve form kontrollerini değiştirerek JavaScript olaylarının nasıl tetikleneceği dahil olmak üzere JavaScript-form bağlantısına yakından bakacağız. Ayrıca, form girişini doğrulamak ve formu bir CGI programına göndermek için JavaScript'in nasıl kullanılacağını da ele alacağız.

JavaScript öğrenmek

Bu makale JavaWorld teknik içerik arşivinin bir parçasıdır. JavaScript serisindeki makaleleri okuyarak JavaScript programlama hakkında çok şey öğrenebilirsiniz , ancak bazı bilgilerin güncelliğini yitirmiş olma ihtimalinin yüksek olduğunu unutmayın. JavaScript ile programlama hakkında daha fazla bilgi için bkz. "JavaScript'in yerleşik nesnelerini kullanma" ve "JavaScript programlarında hata ayıklama".

Formun oluşturulması

Düz bir HTML formu ile JavaScript ile geliştirilmiş bir form arasında birkaç fark vardır. Bunlardan en önemlisi, bir JavaScript formunun onClick veya onSubmit gibi bir veya daha fazla olay işleyicisine dayanmasıdır. Bunlar, kullanıcı formda bir düğmeyi tıklamak gibi bir şey yaptığında bir JavaScript eylemi başlatır. HTML form etiketlerindeki diğer özniteliklerle yerleştirilen olay işleyicileri, JavaScript'i desteklemeyen bir tarayıcı tarafından görünmez. Bu özellik nedeniyle, hem JavaScript hem de JavaScript olmayan tarayıcılar için genellikle tek bir form kullanabilirsiniz.

Tipik form kontrol nesneleri - "widget" olarak da adlandırılır - aşağıdakileri içerir:

  • Metin satırı girmek için metin kutusu
  • Bir eylem seçmek için basma düğmesi
  • Bir grup seçenek arasından bir seçim yapmak için radyo düğmeleri
  • Tek, bağımsız bir seçeneği seçmek veya seçimi kaldırmak için kutuları işaretleyin

Bu denetimlerin (gereçlerin) tüm özniteliklerini ve bunların HTML'de nasıl kullanılacağını sıralayarak uğraşmayacağım. HTML'deki çoğu referans size ayrıntıları sağlayacaktır. JavaScript ile kullanmak için, formun kendisi ve kullandığınız her kontrol için her zaman bir ad vermeyi unutmamalısınız. Adlar, JavaScript ile geliştirilmiş sayfanızdaki nesneye başvurmanıza olanak tanır.

Tipik form şuna benzer. Formun kendisi de dahil olmak üzere tüm form kontrolleri için NAME = öznitelikleri sağladığıma dikkat edin:

 Enter something in the box:

  • FORM NAME = "myform" , formu tanımlar ve adlandırır. JavaScript'in başka bir yerinde bu forma myform adıyla başvurabilirsiniz . Formunuza verdiğiniz ad size bağlıdır, ancak JavaScript'in standart değişken / işlev adlandırma kurallarına uygun olmalıdır (boşluklar, alt çizgi dışında garip karakterler vb.).
  • ACTION = "" , sunucuda çalışan bir CGI programına gönderildiğinde tarayıcının formu nasıl işlemesini istediğinizi tanımlar. Bu örnek herhangi bir şey göndermek için tasarlanmadığından, CGI programının URL'si atlanmıştır.
  • METHOD = "GET" , form gönderildiğinde verilerin sunucuya iletilme yöntemini tanımlar. Bu durumda, örnek form hiçbir şey sunmadığından öznitelik puffer'dır.
  • INPUT TYPE = "text" , metin kutusu nesnesini tanımlar. Bu standart HTML biçimlendirmesidir.
  • INPUT TYPE = "düğme" düğme nesnesini tanımlar. Bu, onClick işleyicisi dışında standart HTML biçimlendirmesidir.
  • onClick = "testResults (this.form)" bir olay işleyicidir - bir olayı işler, bu durumda düğmeye tıklar . Düğme tıklandığında JavaScript, tırnak içindeki ifadeyi yürütür. İfade, sayfanın başka bir yerindeki testResults işlevini çağırmayı ve ona geçerli form nesnesini iletmeyi söyler.

Bir form nesnesinden bir değer alma

Form nesnelerinden değer elde etmeyi deneyelim. Sayfayı yükleyin, ardından metin kutusuna bir şeyler yazın. Düğmeye tıkladığınızda yazdıklarınız uyarı kutusunda gösterilir.

Liste 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Komut dosyası şu şekilde çalışır. Formdaki düğmeyi tıkladığınızda JavaScript, testResults işlevini çağırır. TestResults işlevi form nesnesine this.form sözdizimi kullanılarak iletilir (bu anahtar sözcük düğme denetimine başvurur; form, düğme denetiminin bir özelliğidir ve form nesnesini temsil eder). Form nesnesine testResult işlevi içindeki ad formunu verdim, ancak istediğiniz herhangi bir adı verebilirsiniz.

TestResults işlevi basittir - yalnızca metin kutusunun içeriğini TestVar adlı bir değişkene kopyalar. Metin kutusu içeriğine nasıl başvurulduğuna dikkat edin. Kullanmak istediğim form nesnesini ( form olarak adlandırılır ), istediğim formdaki nesneyi (giriş kutusu olarak adlandırılır ) ve istediğim nesnenin özelliğini ( değer özelliği) tanımladım .

JavaWorld'den daha fazlası

Daha fazla programlama öğreticisi ve haberi mi istiyorsunuz? JavaWorld Enterprise Java haber bültenini gelen kutunuza alın.

Form nesnesinde bir değer ayarlama

Yukarıdaki örnekte gösterilen giriş kutusunun value özelliği hem okunabilir hem de yazılabilir. Yani, kutuya yazılan her şeyi okuyabilir ve veriyi tekrar yazabilirsiniz. Bir form nesnesindeki değeri ayarlama işlemi, onu okumanın tam tersidir. Bir form metin kutusunda bir değer ayarlamayı gösteren kısa bir örnek. İşlem, bu sefer iki düğme olması dışında önceki örneğe benzer. "Oku" düğmesini tıklayın ve komut dosyası, metin kutusuna yazdıklarınızı okur. "Yaz" düğmesini tıklayın ve komut dosyası metin kutusuna özellikle korkunç bir cümle yazar.

Liste 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • "Oku" düğmesini tıkladığınızda, JavaScript, metin kutusuna girdiğiniz değeri okuyan ve görüntüleyen readText işlevini çağırır.
  • "Yaz" düğmesini tıkladığınızda, JavaScript writeText işlevini çağırır ve "İyi günler!" metin kutusunda.

Diğer form nesnesi değerlerini okuma

Metin kutusu, JavaScript kullanarak okuyacağınız (veya yazacağınız) belki de en yaygın form nesnesidir. Ancak, diğer nesnelerin çoğundan değerleri okumak ve yazmak için JavaScript'i kullanabilirsiniz (JavaScript'in şu anda şifre metin kutusunu kullanarak veri okumak veya yazmak için kullanılamadığını unutmayın). Metin kutularına ek olarak, JavaScript şunlarla kullanılabilir:

  • Gizli metin kutusu (TYPE = "gizli").
  • Radyo düğmesi (TYPE = "radyo")
  • Onay kutusu (TÜR = "onay kutusu")
  • Metin alanı ()
  • Listeler ()

Gizli Metin Kutularını Kullanma

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Metin alanları, çok satırlı metin girişi için kullanılır. Metin kutusunun varsayılan boyutu 1 satıra 20 karakterdir. COLS ve ROWS özelliklerini kullanarak boyutu değiştirebilirsiniz. Aşağıda, 40 karakter genişliğinde 7 satırlı bir metin kutusu içeren bir metin alanı örneği verilmiştir:

Metin alanı kutusunun içeriğini okumak için JavaScript kullanabilirsiniz. Bu değer özelliği ile yapılır. İşte bir örnek: