JS 24 – Các thuộc tính và phương thức của form trong JavaScript

0
283

Xin chào các bạn, trong bài học ngày hôm nay chúng ta sẽ tìm hiểu về các thuộc tính và phương thức của form trong JavaScript.

Các form và các phần tử trong HTML, chẳng hạn như <input> có rất nhiều thuộc tính và sự kiện đặc biệt. Nếu chúng ta biết rõ về các thuộc tính cũng như phương thức thì việc làm việc với các form sẽ trở nên thuận tiện hơn rất nhiều.

Điều hướng form và phần tử trong nó

Khi chúng ta có một form, thì bất kỳ phần tử nào cũng có sẵn trong bộ công cụ có tên là form.elements

Ví dụ:

Có thể có nhiều phần tử có cùng tên, thường là trường hợp bạn sử dụng nút radio. Trong trường hợp đó form.elements [name] là một bộ lưu trữ các tên, ví dụ:

Các thuộc tính điều hướng này không phụ thuộc vào cấu trúc các tag. Tất cả các yếu tố, cho dù chúng có ở sâu như thế nào, đều có sẵn trong form.elements.

Các trường dưới dạng “form con”

Một form có thể có một hoặc nhiều phần tử <fieldset> bên trong nó. Chúng cũng hỗ trợ các thuộc tính của phần tử.

Ví dụ:

Tham chiếu trở lại: element.form

Đối với bất kỳ phần tử nào, form luôn có sẵn dưới dạng element.form. Vì vậy, một form tham chiếu đến tất cả các phần tử và các phần tử tham chiếu form.

Ví dụ:

Các phần tử trong form

Chúng ta sẽ cùng nhau xem xét về các phần tử trong foem, đặc biệt các tính năng cụ thể của chúng.

input và textarea:

Thông thường, chúng ta có thể truy cập giá trị như input.value hoặc input.checked cho các checkbox. Ví dụ:

select và option:

một phần tử select có 3 thuộc tính quan trọng:

  • select.options: tập hợp các phần tử <option>.
  • select.value: giá trị của các tùy chọn đã chọn.
  • select.selectedIndex: chỉ số của tùy chọn đã chọn.

Vì vậy, chúng ta có ba cách để gán giá trị cho một <select>:

  • Tìm <option> cần thiết và đặt option.selected thành true.
  • Đặt select.value thành giá trị.
  • Đặt select.selectedIndex thành số của tùy chọn.

Cách thứ nhất là rõ ràng nhất, nhưng cách (2) và (3) thường thuận tiện hơn.

Ví dụ:

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về Các thuộc tính và phương thức của form. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn cách Validate form trong JavaScript.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây