ใช้ JavaScript และแบบฟอร์ม

Javascript สวมหมวกหลายใบ คุณสามารถใช้ JavaScript เพื่อสร้างลักษณะพิเศษ คุณสามารถใช้ JavaScript เพื่อทำให้หน้า HTML ของคุณ "ฉลาดขึ้น" โดยใช้ประโยชน์จากความสามารถในการตัดสินใจ และคุณสามารถใช้ JavaScript เพื่อปรับปรุงรูปแบบ HTML แอปพลิเคชันสุดท้ายนี้มีความสำคัญเป็นพิเศษ ในบรรดาหมวกทั้งหมดที่จาวาสคริปต์สามารถสวมใส่ได้คุณสมบัติการประมวลผลแบบฟอร์มนั้นเป็นที่ต้องการและใช้มากที่สุด

ไม่มีสิ่งใดที่จะทำให้ผู้เผยแพร่เว็บเกิดความกลัวได้มากไปกว่าตัวอักษรสามตัวนี้: CGI CGI (ซึ่งย่อมาจากอินเทอร์เฟซเกตเวย์ทั่วไป) เป็นกลไกในการขนส่งข้อมูลอย่างปลอดภัยจากไคลเอนต์ (เบราว์เซอร์) ไปยังเซิร์ฟเวอร์ โดยทั่วไปจะใช้เพื่อถ่ายโอนข้อมูลจากรูปแบบ HTML ไปยังเซิร์ฟเวอร์

ด้วย JavaScript ที่อยู่เคียงข้างคุณคุณสามารถประมวลผลแบบฟอร์มง่ายๆโดยไม่ต้องเรียกใช้เซิร์ฟเวอร์ และเมื่อจำเป็นต้องส่งแบบฟอร์มไปยังโปรแกรม CGI คุณสามารถให้ JavaScript ดูแลข้อกำหนดเบื้องต้นทั้งหมดได้เช่นการตรวจสอบความถูกต้องของอินพุตเพื่อให้แน่ใจว่าผู้ใช้มีจุด i ทุกตัว ในคอลัมน์นี้เราจะดูการเชื่อมต่อรูปแบบ JavaScript อย่างละเอียดรวมถึงวิธีใช้ออบเจ็กต์ฟอร์มของ JavaScript วิธีอ่านและตั้งค่าเนื้อหาแบบฟอร์มและวิธีเรียกใช้เหตุการณ์ JavaScript โดยจัดการกับการควบคุมฟอร์ม นอกจากนี้เราจะพูดถึงวิธีการใช้ JavaScript เพื่อตรวจสอบการป้อนข้อมูลแบบฟอร์มและรวมแบบฟอร์มเข้ากับโปรแกรม CGI

การเรียนรู้ JavaScript

บทความนี้เป็นส่วนหนึ่งของที่เก็บถาวรเนื้อหาทางเทคนิคของ JavaWorld คุณสามารถเรียนรู้มากมายเกี่ยวกับการเขียนโปรแกรม JavaScript โดยอ่านบทความในซีรี่ส์ JavaScriptแต่โปรดทราบว่าข้อมูลบางส่วนอาจล้าสมัย ดู "การใช้ออบเจ็กต์ในตัวของ JavaScript" และ "การดีบักโปรแกรม JavaScript" สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเขียนโปรแกรมด้วย JavaScript

การสร้างแบบฟอร์ม

มีความแตกต่างเล็กน้อยระหว่างรูปแบบ HTML แบบตรงและรูปแบบที่ปรับปรุงด้วย JavaScript สิ่งสำคัญคือรูปแบบ JavaScript อาศัยตัวจัดการเหตุการณ์อย่างน้อยหนึ่งตัวเช่น onClick หรือ onSubmit สิ่งเหล่านี้เรียกใช้การดำเนินการ JavaScript เมื่อผู้ใช้ทำบางสิ่งในฟอร์มเช่นคลิกปุ่ม ตัวจัดการเหตุการณ์ซึ่งวางไว้พร้อมกับแอตทริบิวต์ที่เหลือในแท็กรูปแบบ HTML จะมองไม่เห็นเบราว์เซอร์ที่ไม่รองรับ JavaScript เนื่องจากลักษณะนี้คุณจึงสามารถใช้รูปแบบเดียวสำหรับทั้ง JavaScript และเบราว์เซอร์ที่ไม่ใช่ JavaScript

ออบเจ็กต์การควบคุมฟอร์มทั่วไปหรือที่เรียกว่า "วิดเจ็ต" - รวมสิ่งต่อไปนี้:

  • กล่องข้อความสำหรับใส่บรรทัดข้อความ
  • ปุ่มกดสำหรับเลือกการกระทำ
  • ปุ่มตัวเลือกสำหรับการเลือกหนึ่งรายการในกลุ่มตัวเลือก
  • ช่องทำเครื่องหมายสำหรับการเลือกหรือยกเลิกการเลือกตัวเลือกเดียวที่เป็นอิสระ

ฉันจะไม่รบกวนการระบุแอตทริบิวต์ทั้งหมดของการควบคุมเหล่านี้ (วิดเจ็ต) และวิธีใช้ใน HTML การอ้างอิงส่วนใหญ่เกี่ยวกับ HTML จะให้รายละเอียดแก่คุณ สำหรับการใช้งานกับ JavaScript คุณควรจำไว้เสมอว่าต้องระบุชื่อสำหรับฟอร์มและแต่ละตัวควบคุมที่คุณใช้ ชื่อช่วยให้คุณสามารถอ้างอิงออบเจ็กต์ในเพจที่ปรับปรุงด้วย JavaScript ของคุณ

รูปแบบทั่วไปมีลักษณะเช่นนี้ แจ้งให้ทราบว่าฉันได้ให้ NAME = แอตทริบิวต์สำหรับตัวควบคุมฟอร์มทั้งหมดรวมถึงฟอร์มด้วย:

 Enter something in the box:

  • FORM NAME = "myform"กำหนดและตั้งชื่อแบบฟอร์ม อื่น ๆ ใน JavaScript คุณสามารถอ้างอิงแบบฟอร์มนี้โดยชื่อMyForm ชื่อที่คุณตั้งให้แบบฟอร์มนั้นขึ้นอยู่กับคุณ แต่ควรเป็นไปตามกฎการตั้งชื่อตัวแปร / ฟังก์ชันมาตรฐานของ JavaScript (ไม่เว้นวรรคไม่มีอักขระแปลก ๆ ยกเว้นขีดล่าง ฯลฯ )
  • ACTION = ""กำหนดวิธีที่คุณต้องการให้เบราว์เซอร์จัดการแบบฟอร์มเมื่อส่งไปยังโปรแกรม CGI ที่ทำงานบนเซิร์ฟเวอร์ เนื่องจากตัวอย่างนี้ไม่ได้ออกแบบมาเพื่อส่งอะไรเลย URL ของโปรแกรม CGI จึงถูกละเว้น
  • METHOD = "GET"กำหนดวิธีการส่งข้อมูลไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม ในกรณีนี้ Atttibute เป็นปลาปักเป้าเนื่องจากแบบฟอร์มตัวอย่างไม่ได้ส่งอะไรเลย
  • INPUT TYPE = "text"กำหนดวัตถุกล่องข้อความ นี่คือมาร์กอัป HTML มาตรฐาน
  • INPUT TYPE = "button"กำหนดวัตถุปุ่ม นี่คือมาร์กอัป HTML มาตรฐานยกเว้นตัวจัดการ onClick
  • onClick = "testResults (this.form)"คือตัวจัดการเหตุการณ์ซึ่งจะจัดการเหตุการณ์ในกรณีนี้ให้คลิกปุ่ม เมื่อคลิกปุ่ม JavaScript จะเรียกใช้นิพจน์ภายในเครื่องหมายคำพูด นิพจน์บอกว่าให้เรียกใช้ฟังก์ชัน testResults ที่อื่นในเพจและส่งผ่านไปยังอ็อบเจ็กต์ฟอร์มปัจจุบัน

รับค่าจากวัตถุฟอร์ม

มาทดลองรับค่าจากออบเจ็กต์แบบฟอร์ม โหลดหน้าจากนั้นพิมพ์บางอย่างลงในกล่องข้อความ คลิกปุ่มและสิ่งที่คุณพิมพ์จะปรากฏในกล่องการแจ้งเตือน

รายการ 1. testform.html

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

นี่คือวิธีการทำงานของสคริปต์ JavaScript เรียกใช้ฟังก์ชัน testResults เมื่อคุณคลิกปุ่มในแบบฟอร์ม ฟังก์ชัน testResults ถูกส่งผ่านอ็อบเจ็กต์ฟอร์มโดยใช้ไวยากรณ์ this.form (คีย์เวิร์ดนี้อ้างอิงปุ่มคอนโทรลฟอร์มเป็นคุณสมบัติของคอนโทรลปุ่มและแทนอ็อบเจ็กต์ฟอร์ม) ฉันได้ให้ฟอร์มออบเจ็กต์ชื่อฟอร์มภายในฟังก์ชัน testResult แต่คุณสามารถตั้งชื่ออะไรก็ได้ที่ต้องการ

ฟังก์ชัน testResults นั้นเรียบง่ายเพียงแค่คัดลอกเนื้อหาของกล่องข้อความไปยังตัวแปรชื่อ TestVar สังเกตว่าเนื้อหาของกล่องข้อความถูกอ้างอิงอย่างไร ฉันกำหนดวัตถุรูปแบบที่ฉันต้องการใช้ (เรียกว่าแบบฟอร์ม ) วัตถุภายในรูปแบบที่ฉันต้องการ (เรียกว่าinputbox ) และคุณสมบัติของวัตถุนั้นที่ฉันต้องการ ( คุณสมบัติค่า )

เพิ่มเติมจาก JavaWorld

ต้องการบทแนะนำและข่าวสารการเขียนโปรแกรมเพิ่มเติมหรือไม่? รับจดหมายข่าว JavaWorld Enterprise Java ที่ส่งไปยังกล่องจดหมายของคุณ

การตั้งค่าในวัตถุฟอร์ม

คุณสมบัติค่าของช่องป้อนข้อมูลที่แสดงในตัวอย่างด้านบนมีทั้งแบบอ่านได้และเขียนได้ นั่นคือคุณสามารถอ่านสิ่งที่พิมพ์ลงในช่องและเขียนข้อมูลกลับเข้าไปได้ กระบวนการกำหนดค่าในวัตถุรูปแบบเป็นเพียงการย้อนกลับของการอ่าน นี่คือตัวอย่างสั้น ๆ เพื่อสาธิตการตั้งค่าในกล่องข้อความแบบฟอร์ม กระบวนการนี้คล้ายกับตัวอย่างก่อนหน้านี้ยกเว้นครั้งนี้มีปุ่มสองปุ่ม คลิกปุ่ม "อ่าน" จากนั้นสคริปต์จะอ่านสิ่งที่คุณพิมพ์ลงในกล่องข้อความ คลิกปุ่ม "เขียน" จากนั้นสคริปต์จะเขียนวลีที่ไม่ชัดเจนลงในกล่องข้อความ

รายการ 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:

  • เมื่อคุณคลิกปุ่ม "อ่าน" JavaScript จะเรียกใช้ฟังก์ชัน readText ซึ่งจะอ่านและแสดงค่าที่คุณป้อนลงในกล่องข้อความ
  • เมื่อคุณคลิกปุ่ม "เขียน" JavaScript จะเรียกฟังก์ชัน writeText ซึ่งเขียนว่า "Have a nice day!" ในกล่องข้อความ

การอ่านค่าวัตถุในรูปแบบอื่น ๆ

กล่องข้อความอาจเป็นวัตถุรูปแบบทั่วไปที่คุณจะอ่าน (หรือเขียน) โดยใช้ JavaScript อย่างไรก็ตามคุณสามารถใช้ JavaScript เพื่ออ่านและเขียนค่าจากอ็อบเจ็กต์อื่น ๆ ส่วนใหญ่ได้ (โปรดทราบว่าปัจจุบันไม่สามารถใช้ JavaScript เพื่ออ่านหรือเขียนข้อมูลโดยใช้กล่องข้อความรหัสผ่าน) นอกเหนือจากกล่องข้อความแล้ว JavaScript ยังสามารถใช้กับ:

  • กล่องข้อความที่ซ่อนอยู่ (TYPE = "hidden")
  • ปุ่มตัวเลือก (TYPE = "วิทยุ")
  • ช่องทำเครื่องหมาย (TYPE = "checkbox")
  • พื้นที่ข้อความ ()
  • รายการ ()

ใช้กล่องข้อความที่ซ่อนอยู่

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

พื้นที่ข้อความใช้สำหรับการป้อนข้อความหลายบรรทัด ขนาดเริ่มต้นของกล่องข้อความคือ 1 แถวคูณ 20 อักขระ คุณสามารถเปลี่ยนขนาดโดยใช้แอตทริบิวต์ COLS และ ROWS นี่คือตัวอย่างทั่วไปของพื้นที่ข้อความที่มีช่องข้อความกว้าง 40 อักขระคูณ 7 แถว:

คุณสามารถใช้ JavaScript เพื่ออ่านเนื้อหาของกล่องพื้นที่ข้อความ สิ่งนี้ทำได้ด้วยคุณสมบัติค่า นี่คือตัวอย่าง: