Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về API biểu mẫu JavaScript: truy cập vào biểu mẫu, nhận các giá trị của các yếu tố, xác thực dữ liệu biểu mẫu và gửi biểu mẫu.: in this tutorial, you will learn about JavaScript form API: accessing the form, getting values of the elements, validating form data, and submitting the form.
1 chỉ định một URL sẽ xử lý trình gửi biểu mẫu. Trong ví dụ này, hành động là URL
document.forms[0]
Code language:CSS(css)
4.
Thuộc tính
document.forms[0]
Code language:CSS(css)
2 Chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp là
document.forms[0]
Code language:CSS(css)
6 hoặc
document.forms[0]
Code language:CSS(css)
7.
Nói chung, bạn sử dụng phương thức
document.forms[0]
Code language:CSS(css)
7 khi bạn muốn truy xuất dữ liệu từ máy chủ và phương thức
document.forms[0]
Code language:CSS(css)
6 khi bạn muốn thay đổi dữ liệu trên máy chủ.
JavaScript sử dụng đối tượng
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
0 để biểu thị một biểu mẫu.
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
0 có các thuộc tính sau tương ứng với các thuộc tính HTML:
document.forms[0]
Code language:CSS(css)
1 - là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính
document.forms[0]
Code language:CSS(css)
1 của phần tử
document.forms
Code language:JavaScript(javascript)
9.
document.forms[0]
Code language:CSS(css)
2 - là phương thức HTTP tương đương với thuộc tính
document.forms[0]
Code language:CSS(css)
2 của phần tử
document.forms
Code language:JavaScript(javascript)
9.
Phần tử
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
0 cũng cung cấp các phương pháp hữu ích sau:
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
9 - Gửi biểu mẫu.
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
0 - Đặt lại biểu mẫu.
Tham chiếu các hình thức
Để tham khảo phần tử
document.forms
Code language:JavaScript(javascript)
9, bạn có thể sử dụng các phương thức chọn DOM như
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
2:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
3 trả về một bộ sưu tập các biểu mẫu (
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
4) trên tài liệu:
document.forms
Code language:JavaScript(javascript)
Để tham khảo một biểu mẫu, bạn sử dụng một chỉ mục. Ví dụ: câu lệnh sau trả về dạng đầu tiên của tài liệu HTML:
document.forms[0]
Code language:CSS(css)
Gửi một biểu mẫu
Thông thường, một biểu mẫu có một nút gửi. Khi bạn nhấp vào nó, trình duyệt sẽ gửi dữ liệu biểu mẫu đến máy chủ. Để tạo nút gửi, bạn sử dụng phần tử
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
5 hoặc
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
6 với loại
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7:
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
Hoặc
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
Nếu nút gửi có tiêu điểm và bạn nhấn phím
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
8, trình duyệt cũng gửi dữ liệu biểu mẫu.
Khi bạn gửi biểu mẫu, sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7 sẽ được bắn trước khi yêu cầu được gửi đến máy chủ. Điều này cho bạn một cơ hội để xác nhận dữ liệu biểu mẫu. Nếu dữ liệu biểu mẫu không hợp lệ, bạn có thể ngừng gửi biểu mẫu.
Để đính kèm trình nghe sự kiện vào sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7, bạn sử dụng phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
1 của phần tử biểu mẫu như sau:
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
Để ngăn biểu mẫu được gửi, bạn gọi phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
2 của đối tượng
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
3 bên trong trình xử lý sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7 như thế này:
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
Thông thường, bạn gọi phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
5 nếu dữ liệu biểu mẫu không hợp lệ. Để gửi biểu mẫu trong JavaScript, bạn gọi phương thức
<inputtype="submit"value="Subscribe">
Code language:HTML, XML(xml)
9 của đối tượng biểu mẫu:
form.submit();
Code language:CSS(css)
Lưu ý rằng
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
7 không bắn sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7. Do đó, bạn phải luôn luôn xác nhận biểu mẫu trước khi gọi phương thức này.
Truy cập các trường biểu mẫu
Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
9,
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
2,
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
1, v.v.
Ngoài ra, bạn có thể sử dụng thuộc tính
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
2 của đối tượng
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
3. Tài sản
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
4 lưu trữ một bộ sưu tập các yếu tố biểu mẫu.
JavaScript cho phép bạn truy cập một phần tử theo chỉ mục, ID hoặc tên. Giả sử rằng bạn có biểu mẫu đăng ký sau với hai yếu tố
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
5:
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
Để truy cập các phần tử của biểu mẫu, bạn sẽ nhận phần tử biểu mẫu trước:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
0
Và sử dụng chỉ mục, ID hoặc tên để truy cập phần tử. Các phần sau truy cập phần tử biểu mẫu đầu tiên:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
1
Các phần sau truy cập phần tử đầu vào thứ hai:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
2
Sau khi truy cập trường biểu mẫu, bạn có thể sử dụng thuộc tính
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
6 để truy cập giá trị của nó, ví dụ:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
3
Đặt tất cả lại với nhau: Mẫu đăng ký
Sau đây minh họa tài liệu HTML có mẫu đăng ký. Xem bản demo trực tiếp ở đây.
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
4
Tài liệu HTML tham chiếu các tệp
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
7 và
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
8. Nó sử dụng phần tử
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
9 để hiển thị thông báo lỗi trong trường hợp phần tử
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
5 có dữ liệu không hợp lệ.
Gửi biểu mẫu mà không cung cấp bất kỳ thông tin nào sẽ dẫn đến lỗi sau:
Gửi biểu mẫu với tên nhưng định dạng địa chỉ email không hợp lệ sẽ dẫn đến lỗi sau:
Sau đây hiển thị tệp
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
8 hoàn chỉnh:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
5
Làm thế nào nó hoạt động.
Hàm showMessage ()
Hàm
form.submit();
Code language:CSS(css)
2 chấp nhận phần tử đầu vào, thông báo và loại:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
6
Sau đây hiển thị trường đầu vào tên trên biểu mẫu:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
7
Nếu giá trị tên của tên trống, bạn cần phải có được cha mẹ trước đó là
form.submit();
Code language:CSS(css)
3 với trường lớp.
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
8
Tiếp theo, bạn cần chọn phần tử
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
9:
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
9
Sau đó, cập nhật thông báo:
document.forms
Code language:JavaScript(javascript)
0
Sau đó, chúng tôi thay đổi lớp CSS của trường đầu vào dựa trên giá trị của tham số loại. Nếu loại là đúng, chúng tôi thay đổi lớp đầu vào thành thành công. Nếu không, chúng tôi thay đổi lớp thành lỗi.
document.forms
Code language:JavaScript(javascript)
1
Cuối cùng, trả lại giá trị của loại:
document.forms
Code language:JavaScript(javascript)
2
Các chức năng của vòi hoa sen () và showcess ()
Các hàm
form.submit();
Code language:CSS(css)
5 và
form.submit();
Code language:CSS(css)
6 gọi hàm
form.submit();
Code language:CSS(css)
2. Hàm
form.submit();
Code language:CSS(css)
5 luôn trả về
form.submit();
Code language:CSS(css)
9 trong khi hàm
form.submit();
Code language:CSS(css)
6 luôn trả về
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
1. Ngoài ra, hàm
form.submit();
Code language:CSS(css)
6 đặt thông báo lỗi thành một chuỗi trống.
document.forms
Code language:JavaScript(javascript)
3
Hàm HasValue ()
Hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
3 kiểm tra xem phần tử đầu vào có giá trị hay không và hiển thị thông báo lỗi bằng hàm
form.submit();
Code language:CSS(css)
5 hoặc
form.submit();
Code language:CSS(css)
6 tương ứng:
document.forms
Code language:JavaScript(javascript)
4
Hàm validateMail ()
Hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
6 xác thực nếu trường email chứa địa chỉ email hợp lệ:
document.forms
Code language:JavaScript(javascript)
5
Hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
6 gọi hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
3 để kiểm tra xem giá trị trường có trống không. Nếu trường đầu vào trống, nó hiển thị
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
9.
Để xác thực email, nó sử dụng một biểu thức chính quy. Nếu email không hợp lệ, hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
6 hiển thị
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
01.
Người xử lý sự kiện gửi
Đầu tiên, chọn biểu mẫu đăng ký bằng ID của nó bằng phương thức
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
1:
document.forms
Code language:JavaScript(javascript)
6
Thứ hai, xác định một số hằng số để lưu trữ thông báo lỗi:
document.forms
Code language:JavaScript(javascript)
7
Thứ ba, thêm trình nghe sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7 của biểu mẫu đăng ký bằng phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
1:
document.forms
Code language:JavaScript(javascript)
8
Trong phần xử lý sự kiện:
Dừng đệ trình biểu mẫu bằng cách gọi phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
5.
Xác thực các trường tên và email bằng các hàm
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
3 và
<formaction="signup.html"method="post"id="signup"><h2>Sign Up</h2><divclass="field"><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="Enter your fullname" /><small></small></div><divclass="field"><labelfor="email">Email:</label><inputtype="text"id="email"name="email"placeholder="Enter your email address" /><small></small></div><buttontype="submit">Subscribe</button></form>
Code language:HTML, XML(xml)
6.
Nếu cả tên và email đều hợp lệ, hãy hiển thị cảnh báo. Trong một ứng dụng trong thế giới thực, bạn cần gọi phương thức
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
// handle the form data
});
Code language:JavaScript(javascript)
7 để gửi biểu mẫu.
Bản tóm tắt
Sử dụng phần tử
document.forms
Code language:JavaScript(javascript)
9 để tạo biểu mẫu HTML.
Sử dụng các phương thức DOM như
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
2 và
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
1 để chọn phần tử
document.forms
Code language:JavaScript(javascript)
9.
const form = document.getElementById('subscribe');
Code language:JavaScript(javascript)
13 cũng trả về phần tử biểu mẫu bằng một chỉ mục số.
Sử dụng
form.addEventListener('submit', (event) => {
// stop form submission
event.preventDefault();
});
Code language:PHP(php)
4 để truy cập các yếu tố biểu mẫu.
Sự kiện
<buttontype="submit">Subscribe</button>
Code language:HTML, XML(xml)
7 bắn khi người dùng nhấp vào nút Gửi trên biểu mẫu.
Hướng dẫn này có hữu ích không?
Chúng ta có thể gửi biểu mẫu bằng JavaScript không?
Gửi () được sử dụng để tạo động và gửi chi tiết đến máy chủ.Việc gửi biểu mẫu JavaScript có thể được sử dụng để tạo đối tượng và các thuộc tính khác nhau cũng có thể được sử dụng.Các thuộc tính có thể là lớp, id, thẻ, v.v.The JavaScript form submission can be used for object creation and various attributes can also be used. The attributes can be class, id, tag, etc.
Cú pháp nào sau đây được sử dụng để gửi biểu mẫu trong JavaScript?
Gửi biểu mẫu Nói chung, để gửi, chúng tôi sử dụng nút gửi gửi giá trị được nhập vào biểu mẫu.Cú pháp của phương thức Subway () như sau:
Gửi gì () trong JavaScript?
Định nghĩa và cách sử dụng.Phương thức gửi () gửi biểu mẫu (giống như nhấp vào nút Gửi).Mẹo: Sử dụng phương thức RESET () để đặt lại biểu mẫu.submits the form (same as clicking the Submit button). Tip: Use the reset() method to reset the form.
Cú pháp tạo nút gửi trong biểu mẫu là gì?
Nút gửi Xác định một nút để gửi dữ liệu biểu mẫu cho người điều khiển biểu mẫu.Trình xử lý biểu mẫu thường là một tệp trên máy chủ với tập lệnh để xử lý dữ liệu đầu vào.Trình xử lý hình thức được chỉ định trong thuộc tính hành động của biểu mẫu. defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.