Cách tạo biểu mẫu trong javascript

Javascript đội nhiều mũ. Bạn có thể sử dụng JavaScript để tạo hiệu ứng đặc biệt. Bạn có thể sử dụng JavaScript để làm cho các trang HTML của mình "thông minh hơn" bằng cách khai thác khả năng ra quyết định của nó. Và bạn có thể sử dụng JavaScript để nâng cao các biểu mẫu HTML. Ứng dụng cuối cùng này có tầm quan trọng đặc biệt. Trong tất cả các tính năng mà JavaScript có thể mang, các tính năng xử lý biểu mẫu của nó là một trong những tính năng được tìm kiếm và sử dụng nhiều nhất

Không có gì khiến trái tim của một nhà xuất bản Web sợ hãi hơn ba chữ cái này. C-G-I. CGI (viết tắt của common gateway interface), là một cơ chế vận chuyển dữ liệu an toàn từ máy khách (trình duyệt) đến máy chủ. Nó thường được sử dụng để truyền dữ liệu từ dạng HTML sang máy chủ

Với JavaScript bên cạnh, bạn có thể xử lý các biểu mẫu đơn giản mà không cần gọi máy chủ. Và khi cần gửi biểu mẫu tới chương trình CGI, bạn có thể yêu cầu JavaScript đảm nhận tất cả các yêu cầu sơ bộ, chẳng hạn như xác thực đầu vào để đảm bảo rằng người dùng đã đánh dấu mọi biểu mẫu. Trong cột này, chúng ta sẽ xem xét kỹ kết nối biểu mẫu JavaScript, bao gồm cách sử dụng đối tượng biểu mẫu của JavaScript, cách đọc và đặt nội dung biểu mẫu cũng như cách kích hoạt các sự kiện JavaScript bằng thao tác điều khiển biểu mẫu. Chúng tôi cũng sẽ giới thiệu cách sử dụng JavaScript để xác minh đầu vào của biểu mẫu và gửi biểu mẫu tới chương trình CGI

Học JavaScript

Bài viết này là một phần của kho lưu trữ nội dung kỹ thuật JavaWorld. Bạn có thể tìm hiểu nhiều về lập trình JavaScript bằng cách đọc các bài viết trong loạt bài về JavaScript, chỉ cần lưu ý rằng một số thông tin có thể đã lỗi thời. Xem "Sử dụng các đối tượng tích hợp sẵn của JavaScript" và "Gỡ lỗi chương trình JavaScript" để biết thêm về cách lập trình với JavaScript

Tạo biểu mẫu

Có một số điểm khác biệt giữa biểu mẫu HTML thẳng và biểu mẫu được tăng cường JavaScript. Vấn đề chính là biểu mẫu JavaScript dựa trên một hoặc nhiều trình xử lý sự kiện, chẳng hạn như onClick hoặc onSubmit. Chúng gọi một hành động JavaScript khi người dùng thực hiện điều gì đó trong biểu mẫu, chẳng hạn như nhấp vào nút. Trình xử lý sự kiện, được đặt cùng với các thuộc tính còn lại trong thẻ biểu mẫu HTML, sẽ ẩn đối với trình duyệt không hỗ trợ JavaScript. Do đặc điểm này, bạn thường có thể sử dụng một biểu mẫu cho cả trình duyệt JavaScript và không phải JavaScript

Các đối tượng điều khiển biểu mẫu điển hình -- còn được gọi là "widget" -- bao gồm các đối tượng sau

• Hộp văn bản để nhập một dòng văn bản
• Nút nhấn để chọn một hành động
• Các nút radio để thực hiện một lựa chọn trong một nhóm các tùy chọn
• Các hộp kiểm để chọn hoặc bỏ chọn một tùy chọn độc lập, duy nhất

Tôi sẽ không bận tâm đến việc liệt kê tất cả các thuộc tính của các điều khiển (widget) này và cách sử dụng chúng trong HTML. Hầu hết mọi tài liệu tham khảo về HTML sẽ cung cấp cho bạn thông tin chi tiết. Để sử dụng với JavaScript, bạn phải luôn nhớ cung cấp tên cho biểu mẫu và mỗi điều khiển bạn sử dụng. Tên cho phép bạn tham chiếu đối tượng trong trang được tăng cường JavaScript của bạn

Hình thức điển hình trông như thế này. Lưu ý rằng tôi đã cung cấp các thuộc tính NAME= cho tất cả các điều khiển biểu mẫu, bao gồm cả chính biểu mẫu đó

<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>

• FORM NAME="myform" xác định và đặt tên cho biểu mẫu. Ở những nơi khác trong JavaScript, bạn có thể tham khảo biểu mẫu này bằng tên myform. Tên mà bạn đặt cho biểu mẫu là tùy thuộc vào bạn, nhưng tên đó phải tuân thủ các quy tắc đặt tên hàm/biến tiêu chuẩn của JavaScript (không có khoảng trắng, không có ký tự lạ ngoại trừ dấu gạch dưới, v.v. )
• ACTION="" xác định cách bạn muốn trình duyệt xử lý biểu mẫu khi biểu mẫu được gửi tới chương trình CGI đang chạy trên máy chủ. Vì ví dụ này không được thiết kế để gửi bất kỳ thứ gì nên URL cho chương trình CGI bị bỏ qua
• METHOD="GET" xác định dữ liệu phương thức được truyền đến máy chủ khi biểu mẫu được gửi. Trong trường hợp này, thuộc tính là phù hợp vì mẫu ví dụ không gửi bất cứ thứ gì
• INPUT TYPE="text" xác định đối tượng hộp văn bản. Đây là đánh dấu HTML tiêu chuẩn
• INPUT TYPE="button" xác định đối tượng nút. Đây là đánh dấu HTML tiêu chuẩn ngoại trừ trình xử lý onClick
• onClick="testResults(cái này. form)" là một trình xử lý sự kiện -- nó xử lý một sự kiện, trong trường hợp này là nhấp vào nút. Khi nút được nhấp, JavaScript sẽ thực thi biểu thức trong dấu ngoặc kép. Biểu thức nói gọi hàm testResults ở nơi khác trên trang và chuyển cho nó đối tượng biểu mẫu hiện tại

Nhận một giá trị từ một đối tượng biểu mẫu

Hãy thử nghiệm với việc lấy các giá trị từ các đối tượng biểu mẫu. Tải trang, sau đó nhập nội dung nào đó vào hộp văn bản. Nhấp vào nút và những gì bạn đã nhập được hiển thị trong hộp cảnh báo

Liệt kê 1. mẫu thử nghiệm. html

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
    var TestVar = form.inputbox.value;
    alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>

Đây là cách kịch bản hoạt động. JavaScript gọi hàm testResults khi bạn nhấp vào nút trong biểu mẫu. Hàm testResults được truyền vào đối tượng biểu mẫu bằng cú pháp this. biểu mẫu (từ khóa this tham chiếu điều khiển nút; biểu mẫu là thuộc tính của điều khiển nút và đại diện cho đối tượng biểu mẫu). Tôi đã đặt cho đối tượng biểu mẫu tên biểu mẫu bên trong hàm testResult, nhưng bạn có thể đặt bất kỳ tên nào bạn thích

Hàm testResults rất đơn giản -- nó chỉ sao chép nội dung của hộp văn bản vào một biến có tên là TestVar. Lưu ý cách nội dung hộp văn bản được tham chiếu. Tôi đã xác định đối tượng biểu mẫu mà tôi muốn sử dụng (được gọi là biểu mẫu), đối tượng trong biểu mẫu mà tôi muốn (được gọi là hộp nhập liệu) và thuộc tính của đối tượng mà tôi muốn (thuộc tính giá trị)

Thêm từ JavaWorld

Muốn có thêm hướng dẫn lập trình và tin tức?

Đặt giá trị trong đối tượng biểu mẫu

Thuộc tính giá trị của hộp nhập liệu, được hiển thị trong ví dụ trên, có thể đọc và ghi được. Nghĩa là, bạn có thể đọc bất cứ thứ gì được nhập vào hộp và bạn có thể ghi dữ liệu trở lại vào đó. Quá trình thiết lập giá trị trong một đối tượng biểu mẫu hoàn toàn ngược lại với việc đọc nó. Đây là một ví dụ ngắn để chứng minh việc đặt giá trị trong hộp văn bản biểu mẫu. Quá trình này tương tự như ví dụ trước, ngoại trừ lần này có hai nút. Nhấp vào nút "Đọc" và tập lệnh sẽ đọc những gì bạn đã nhập vào hộp văn bản. Nhấp vào nút "Viết" và tập lệnh viết một cụm từ đặc biệt khó hiểu vào hộp văn bản

Liệt kê 2. set_formval. html

• Khi bạn nhấp vào nút "Đọc", JavaScript sẽ gọi hàm readText, hàm này sẽ đọc và hiển thị giá trị bạn đã nhập vào hộp văn bản
• Khi bạn nhấp vào nút "Viết", JavaScript sẽ gọi hàm writeText, hàm viết "Chúc một ngày tốt lành. " trong hộp văn bản

Đọc các giá trị đối tượng biểu mẫu khác

Hộp văn bản có lẽ là đối tượng biểu mẫu phổ biến nhất mà bạn sẽ đọc (hoặc viết) bằng JavaScript. Tuy nhiên, bạn có thể sử dụng JavaScript để đọc và ghi giá trị từ hầu hết các đối tượng khác (lưu ý rằng JavaScript hiện không thể được sử dụng để đọc hoặc ghi dữ liệu bằng hộp văn bản mật khẩu). Ngoài các hộp văn bản, JavaScript có thể được sử dụng với

• Hộp văn bản ẩn (TYPE="hidden")
• Nút radio (TYPE="radio")
• Hộp kiểm (TYPE="hộp kiểm")
• Text area ()
• Lists ()

  Sử dụng hộp văn bản ẩn

  Từ quan điểm của JavaScript, các hộp văn bản ẩn hoạt động giống như các hộp văn bản thông thường, chia sẻ cùng các thuộc tính và phương thức. Từ quan điểm của người dùng, các hộp văn bản ẩn "không tồn tại" vì chúng không xuất hiện trong biểu mẫu. Thay vào đó, các hộp văn bản ẩn là phương tiện mà thông tin đặc biệt có thể được truyền giữa máy chủ và máy khách. Chúng cũng có thể được sử dụng để giữ dữ liệu tạm thời mà bạn có thể muốn sử dụng sau này. Bởi vì các hộp văn bản ẩn được sử dụng giống như các hộp văn bản tiêu chuẩn, một ví dụ riêng biệt sẽ không được cung cấp ở đây

  Sử dụng các nút radio

  Các nút radio được sử dụng để cho phép người dùng chọn một và chỉ một mục từ một nhóm các tùy chọn. Các nút radio luôn được sử dụng theo bội số; . Thay vào đó, nếu bạn muốn lựa chọn nhấp/bỏ nhấp đơn giản, hãy sử dụng hộp kiểm (xem bên dưới)

  Để xác định các nút radio cho JavaScript, hãy cung cấp tên giống nhau cho từng đối tượng. JavaScript sẽ tạo một mảng sử dụng tên mà bạn đã cung cấp; . Nút đầu tiên trong chuỗi được đánh số 0, nút thứ hai được đánh số 1, v.v. Lưu ý rằng thuộc tính VALUE là tùy chọn đối với các biểu mẫu chỉ dành cho JavaScript. Tuy nhiên, bạn sẽ muốn cung cấp một giá trị nếu bạn gửi biểu mẫu tới một chương trình CGI đang chạy trên máy chủ

  <INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
  <INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
  <INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
  <INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>

  Sau đây là ví dụ kiểm tra nút nào được chọn. Vòng lặp for trong chức năng testButton quay vòng qua tất cả các nút trong nhóm "rad". Khi tìm thấy nút được chọn, nó thoát ra khỏi vòng lặp và hiển thị số nút (nhớ. bắt đầu từ 0)

  Liệt kê 3. form_radio. html

  <HTML>
  <HEAD>
  <TITLE>Radio Button Test</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function testButton (form){
      for (Count = 0; Count < 3; Count++) {
          if (form.rad[Count].checked)
              break;
      }
      alert ("Button " + Count + " is selected");
  }
  </SCRIPT>
  </BODY>
  <FORM NAME="testform">
  <INPUT TYPE="button" NAME="button" Value="Click" 
      onClick="testButton(this.form)"> <BR>
  <INPUT TYPE="radio" NAME="rad" Value="rad_button1" onClick=0><BR>
  <INPUT TYPE="radio" NAME="rad" Value="rad_button2" onClick=0><BR>
  <INPUT TYPE="radio" NAME="rad" Value="rad_button3" onClick=0><BR>
  </FORM>
  </HTML>

  Đặt lựa chọn nút radio với thị trường HTML rất đơn giản. Nếu bạn muốn biểu mẫu xuất hiện ban đầu với một nút radio nhất định được chọn, hãy thêm thuộc tính ĐÃ KIỂM TRA vào phần đánh dấu HTML cho nút đó

  ________số 8

  Bạn cũng có thể đặt lựa chọn nút theo chương trình bằng JavaScript, sử dụng thuộc tính đã chọn. Chỉ định chỉ mục của mảng nút radio bạn muốn kiểm tra

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

  Sử dụng hộp kiểm

  Các hộp kiểm là các yếu tố độc lập; . Do đó, chúng dễ sử dụng hơn một chút. Sử dụng JavaScript, bạn có thể kiểm tra xem hộp kiểm có được chọn hay không bằng cách sử dụng thuộc tính đã chọn, như được hiển thị ở đây. Tương tự như vậy, bạn có thể đặt thuộc tính đã chọn để thêm hoặc xóa dấu kiểm khỏi hộp kiểm. Trong ví dụ này, một thông báo cảnh báo cho bạn biết nếu hộp kiểm đầu tiên được chọn. Giá trị là đúng nếu hộp được chọn;

  Liệt kê 4. form_check. html

  <FORM NAME="myform" ACTION="" METHOD="GET">
  Enter something in the box: <BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
  <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
  </FORM>

  0

  Đối với đối tượng nút radio, hãy thêm thuộc tính CHECKED vào đánh dấu HTML cho hộp kiểm mà bạn muốn kiểm tra ban đầu khi biểu mẫu được tải lần đầu

  <HTML>
  <HEAD>
  <TITLE>Test Input</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function testResults (form) {
      var TestVar = form.inputbox.value;
      alert ("You typed: " + TestVar);
  }
  </SCRIPT>
  </HEAD>
  <BODY>
  <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
  <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
  </FORM>
  </BODY>
  </HTML>

  0

  Bạn cũng có thể đặt lựa chọn nút theo chương trình bằng JavaScript, sử dụng thuộc tính đã chọn. Chỉ định tên của hộp kiểm bạn muốn kiểm tra, như trong

  <HTML>
  <HEAD>
  <TITLE>Test Input</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function testResults (form) {
      var TestVar = form.inputbox.value;
      alert ("You typed: " + TestVar);
  }
  </SCRIPT>
  </HEAD>
  <BODY>
  <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
  <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
  </FORM>
  </BODY>
  </HTML>

  1

  Sử dụng vùng văn bản

  Vùng văn bản được sử dụng để nhập văn bản nhiều dòng. Kích thước mặc định của hộp văn bản là 1 hàng x 20 ký tự. Bạn có thể thay đổi kích thước bằng thuộc tính COLS và ROWS. Dưới đây là ví dụ điển hình về vùng văn bản có hộp văn bản rộng 40 ký tự và 7 hàng

  <HTML>
  <HEAD>
  <TITLE>Test Input</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  function testResults (form) {
      var TestVar = form.inputbox.value;
      alert ("You typed: " + TestVar);
  }
  </SCRIPT>
  </HEAD>
  <BODY>
  <FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
  <INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
  <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
  </FORM>
  </BODY>
  </HTML>

  2

  Bạn có thể sử dụng JavaScript để đọc nội dung của hộp văn bản. Điều này được thực hiện với thuộc tính giá trị. Đây là một ví dụ

  Làm thế nào để sử dụng JavaScript trong biểu mẫu?

  Ví dụ về việc sử dụng JavaScript để truy cập và thao tác với các đối tượng đầu vào HTML. .

  đối tượng nút. Vô hiệu hóa nút Tìm tên của nút Tìm loại nút Tìm giá trị của nút Tìm văn bản hiển thị trên nút Tìm id của biểu mẫu mà nút thuộc về

  đối tượng biểu mẫu. .

  Tùy chọn và Chọn đối tượng

  Làm cách nào để viết JavaScript ở dạng HTML?

  Bạn có thể làm như vậy bằng cách sử dụng thẻ sẽ bao gồm tất cả mã JS mà bạn viết. Mã JS có thể được thêm vào. giữa các thẻ

  Làm cách nào để lấy đầu vào biểu mẫu trong JavaScript?

  Cách lấy giá trị của đầu vào bằng JavaScript .

  hàm getVal() {

  const val = tài liệu. querySelector('đầu vào'). giá trị;

  nhật ký (giá trị);

  Phương thức biểu mẫu trong JavaScript là gì?

  Định nghĩa và cách sử dụng. Thuộc tính phương thức đặt hoặc trả về giá trị của thuộc tính phương thức trong một biểu mẫu . Thuộc tính phương thức chỉ định cách gửi dữ liệu biểu mẫu (dữ liệu biểu mẫu được gửi đến trang được chỉ định trong thuộc tính hành động).