Nhận giá trị biểu mẫu HTML trong JavaScript – html biểu mẫu chọn giá trị

Trong bài viết này trình bày cách truy xuất giá trị cho phần tử select-option và phần tử văn bản nhập chữ hoa chữ thường chung thông qua thuộc tính id và name. Chúng tôi sẽ sử dụng giá trị được tìm nạp trong JavaScript cho các công việc tiếp theo.

Bạn đang xem : giá trị chọn biểu mẫu html

Trong JavaScript, chúng ta có thể sử dụng thuộc tính id của phần tử đầu vào cụ thể để nhận các giá trị hoặc kích hoạt thuộc tính tên để truy cập giá trị.

Cả hai quy ước sẽ tiến hành lấy dữ liệu thô từ người dùng. Về mặt kỹ thuật, mục tiêu là lấy tất cả thông tin đầu vào từ người dùng và đảm bảo quy trình đang hoạt động.

Ở đây chúng tôi sẽ làm việc với HTML DOM hay còn gọi là document.forms < / code> để truy xuất tất cả các phần tử từ HTML form . Phần giới thiệu ngắn gọn về các phương pháp có sẵn để tương tác với các phần tử và thuộc tính HTML tại đây .

Ngoài ra, trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng cách xác định thông thường id của một phần tử để lấy ra thông tin từ đó.

Sử dụng document.forms để Nhận Giá trị Biểu mẫu HTML trong JavaScript

Phương thức document.forms lấy thuộc tính name để định vị hình thức và yếu tố của nó. Về mặt chiến thuật, tất cả các giá trị từ biểu mẫu sẽ được chuyển qua cách khởi tạo này.

Chúng tôi sẽ có phần tử select theo sau là phần tử option nhiều. Và chúng tôi sẽ chọn một tùy chọn từ đó, và giá trị sẽ được tách biệt.

Sau đó, khi document.forms được khởi chạy, nó sẽ lấy giá trị được phân tách. Hãy kiểm tra khối mã để có hình ảnh phù hợp.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Kiểm tra & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; form name = "form" & gt;
& lt; select name = "fruit" id = "fruit" & gt;
  & lt; option value = "0" & ​​gt; Chọn Trái cây & lt; / option & gt;
  & lt; option value = "xoài" & gt; Mango & lt; / option & gt;
  & lt; option value = "apple" & gt; Apple & lt; / option & gt;
  & lt; option value = "orange" & gt; Orange & lt; / option & gt;
& lt; / select & gt;
  & lt; button type = "submit" & gt; Nhấn & lt; / button & gt;
& lt; / form & gt;
  & lt; p id = "print" & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;
 
  var form = document.forms ['form'];
form.onsubmit = function (e) {
  e.preventDefault ();
  var select = document.form.fruit.value;
  console.log (chọn);
  document.getElementById ('print'). innerHTML = select.toUpperCase ();
}
 

Đầu ra:

Như bạn có thể thấy, đối tượng form nhận tài liệu . phương thức biểu mẫu để tương tác với các giá trị của HTML form sẽ trả về tất cả các phần tử.

Phương thức onsubmit hỗ trợ thêm hành động làm việc với giá trị đã chọn đó. Trong trường hợp này, đối tượng select nhận giá trị mong muốn với thuộc tính name tương ứng của phần tử form select .

Sau này, chúng tôi đã in giá trị ở định dạng chữ hoa trên trang.

Sử dụng id để truy cập Giá trị biểu mẫu HTML trong JavaScript

Đối với ví dụ này, chúng tôi sẽ sử dụng documnet.getElementById querySelector < / code> để lái xe trên các đầu vào của biểu mẫu.

Phương thức sử dụng định dạng này phổ biến và hoạt động tương tự như phương thức document.forms . Vì vậy, các dòng mã sau sẽ minh họa bản xem trước.

Đoạn mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
  & lt; meta charset = "utf-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width" & gt;
  & lt; title & gt; Kiểm tra & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
 & lt; form name = "form" id = "form" & gt;
  Nhập tên: & amp; nbsp;
& lt; input type = "text" id = "name" & gt;
  & lt; input type = "button" value = "Nhấp Lên" & gt;
 & lt; / form & gt;
  & lt; p id = "print" & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;
 
  var form = document.getElementById ("form");
form.onclick = function (e) {
  e.preventDefault ();
var name = document.getElementById ("name"). value;
  console.log (tên);
document.getElementById ('print'). innerHTML = name.toUpperCase ();
}
 

Đầu ra:

Biểu mẫu được đối tượng form truy cập bằng JavaScript và giá trị của đầu vào cũng là bắt nguồn từ phương thức .value .

Trong ví dụ trước, chúng tôi đã sử dụng phần tử button để gửi dữ liệu đầu vào và ở đây chúng tôi đã sử dụng nút loại đầu vào để thực hiện gửi.

Sự khác biệt ở đây chỉ là ở onsubmit onclick , cả hai đều hoạt động tương tự .

Viết cho chúng tôi

Các bài viết về DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề html biểu mẫu chọn giá trị

HTML - Form Controls

  • Tác giả: Thanh Duong Huu
  • Ngày đăng: 2020-05-17
  • Đánh giá: 4 ⭐ ( 3931 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các điều khiển HTML

[HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 9516 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

HTML - Biểu mẫu

  • Tác giả: isolution.pro
  • Đánh giá: 3 ⭐ ( 7301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu mẫu HTML là bắt buộc khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ, trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v. Một biểu mẫu sẽ nhận đầu vào từ khách truy cập trang web và sau...

Phần tử biểu mẫu HTML

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 9860 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Biểu mẫu HTML

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 6530 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử dụng bảng và biểu mẫu trong tài liệu HTML

  • Tác giả: topwebviet.com
  • Đánh giá: 4 ⭐ ( 1052 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần tử form được sử dụng để trình bày biểu mẫu trong một tài liệu hay ứng dụng. Trên thực tế, biểu được sử dụng nhiều trong việc trình bày nội dung dữ liệu trong các trang quản trị và phần nội dung các trang liên hệ...

Các biểu mẫu trong HTML

  • Tác giả: gokisoft.com
  • Đánh giá: 4 ⭐ ( 6238 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một biểu mẫu trong HTML được dùng để thu thập thông input vào của người dùng. Thông tin người dùng nhập vào có thể sau đó được gửi lên một máy chủ để xử lý.ví dụFirst name:Last name:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  trong từ khóa với ví dụ bằng Python - từ khóa in được sử dụng để