JavaScript 및 양식 사용

Javascript는 많은 모자를 쓰고 있습니다. JavaScript를 사용하여 특수 효과를 만들 수 있습니다. 의사 결정 기능을 활용하여 JavaScript를 사용하여 HTML 페이지를 "더 스마트"하게 만들 수 있습니다. 그리고 JavaScript를 사용하여 HTML 양식을 향상시킬 수 있습니다. 이 마지막 적용은 특히 중요합니다. JavaScript가 입을 수있는 모든 모자 중에서 양식 처리 기능이 가장 많이 사용되고 사용됩니다.

웹 게시자의 중심에 CGI라는 세 글자보다 더 큰 두려움을주는 것은 없습니다. CGI (공통 게이트웨이 인터페이스의 약자)는 클라이언트 (브라우저)에서 서버로 데이터를 안전하게 전송하기위한 메커니즘입니다. 일반적으로 HTML 양식에서 서버로 데이터를 전송하는 데 사용됩니다.

JavaScript를 사용하면 서버를 호출하지 않고도 간단한 양식을 처리 할 수 ​​있습니다. 그리고 CGI 프로그램에 양식을 제출해야 할 때 JavaScript가 입력 유효성 검사와 같은 모든 예비 요구 사항을 처리하도록 할 수 있습니다. 이 칼럼에서는 JavaScript의 양식 객체를 사용하는 방법, 양식 콘텐츠를 읽고 설정하는 방법, 양식 컨트롤을 조작하여 JavaScript 이벤트를 트리거하는 방법을 포함하여 JavaScript 양식 연결에 대해 자세히 살펴볼 것입니다. 또한 JavaScript를 사용하여 양식 입력을 확인하고 양식을 CGI 프로그램에 합산하는 방법도 다룹니다.

JavaScript 배우기

이 기사는 JavaWorld 기술 컨텐츠 아카이브의 일부입니다. JavaScript 시리즈의 기사를 읽으면 JavaScript 프로그래밍에 대해 많은 것을 배울 수 있습니다. 일부 정보는 구식 일 가능성이 있음을 명심하십시오. JavaScript를 사용한 프로그래밍에 대한 자세한 내용은 "JavaScript의 내장 개체 사용"및 "JavaScript 프로그램 디버깅"을 참조하십시오.

양식 만들기

직선 HTML 양식과 JavaScript 강화 양식 간에는 몇 가지 차이점이 있습니다. 주요한 것은 JavaScript 양식이 onClick 또는 onSubmit과 같은 하나 이상의 이벤트 핸들러에 의존한다는 것입니다. 사용자가 버튼을 클릭하는 것과 같이 양식에서 무언가를 할 때 자바 스크립트 액션을 호출합니다. HTML 양식 태그의 나머지 속성과 함께 배치되는 이벤트 핸들러는 JavaScript를 지원하지 않는 브라우저에 표시되지 않습니다. 이러한 특성으로 인해 JavaScript 및 비 JavaScript 브라우저 모두에 대해 하나의 양식을 사용할 수 있습니다.

일반적인 양식 제어 개체 ( "위젯"이라고도 함)에는 다음이 포함됩니다.

  • 텍스트 줄을 입력하기위한 텍스트 상자
  • 동작 선택을위한 푸시 버튼
  • 옵션 그룹 중 하나를 선택하기위한 라디오 버튼
  • 하나의 독립적 인 옵션을 선택하거나 선택 취소하기위한 확인란

이러한 컨트롤 (위젯)의 모든 속성과 HTML에서 사용하는 방법을 열거하지 않겠습니다. HTML에 대한 대부분의 참조는 세부 정보를 제공합니다. JavaScript와 함께 사용하려면 항상 양식 자체 및 사용하는 각 컨트롤의 이름을 제공해야합니다. 이름을 사용하면 JavaScript 강화 페이지에서 개체를 참조 할 수 있습니다.

전형적인 형태는 다음과 같습니다. 양식 자체를 포함하여 모든 양식 컨트롤에 대해 NAME = 속성을 제공했습니다.

 Enter something in the box:

  • FORM NAME = "myform" 은 양식을 정의하고 이름을 지정합니다. JavaScript의 다른 곳에서는 myform 이라는 이름으로이 양식을 참조 할 수 있습니다 . 양식에 제공하는 이름은 귀하에게 달려 있지만 JavaScript의 표준 변수 / 함수 이름 지정 규칙 (공백, 밑줄을 제외한 이상한 문자 등)을 준수해야합니다.
  • ACTION = "" 은 서버에서 실행되는 CGI 프로그램에 제출 될 때 브라우저가 양식을 처리하는 방법을 정의합니다. 이 예제는 아무것도 제출하도록 설계되지 않았으므로 CGI 프로그램의 URL은 생략되었습니다.
  • METHOD = "GET" 은 양식이 제출 될 때 서버로 전달되는 메소드 데이터를 정의합니다. 이 경우 예제 양식은 아무것도 제출하지 않으므로 atttibute가 푹신합니다.
  • INPUT TYPE = "text" 는 텍스트 상자 개체를 정의합니다. 이것은 표준 HTML 마크 업입니다.
  • INPUT TYPE = "button" 은 버튼 개체를 정의합니다. 이것은 onClick 핸들러를 제외한 표준 HTML 마크 업입니다.
  • 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 구문을 사용하여 양식 개체에 전달됩니다 (this 키워드는 단추 컨트롤을 참조합니다. 양식은 단추 컨트롤의 속성이며 양식 개체를 나타냄). testResult 함수 내 에서 양식 개체에 이름 양식을 지정 했지만 원하는 이름을 지정할 수 있습니다.

testResults 함수는 간단합니다. 텍스트 상자의 내용을 TestVar라는 변수에 복사 할뿐입니다. 텍스트 상자 내용이 어떻게 참조되었는지 확인하십시오. 사용하고자하는 양식 객체 ( form ), 원하는 양식 내의 객체 ( inputbox 라고 함 ) 및 원하는 해당 객체의 속성 ( value 속성)을 정의했습니다.

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 함수를 호출합니다.
  • When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box.

Reading other form object values

The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with:

  • Hidden text box (TYPE="hidden").
  • Radio button (TYPE="radio")
  • Check box (TYPE="checkbox")
  • Text area ()
  • Lists ()

Using Hidden Text Boxes

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 행 x 20 자입니다. COLS 및 ROWS 속성을 사용하여 크기를 변경할 수 있습니다. 다음은 40 자 너비에 7 행의 텍스트 상자가있는 텍스트 영역의 일반적인 예입니다.

JavaScript를 사용하여 텍스트 영역 상자의 내용을 읽을 수 있습니다. 이것은 value 속성으로 수행됩니다. 다음은 그 예입니다.