Hướng dẫn how do you reference a form in javascript? - làm thế nào để bạn tham khảo một biểu mẫu trong javascript?

Question

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.

Nội dung chính Show

Hình thức cơ bản
Tham chiếu các hình thức
Gửi một biểu mẫu
Truy cập các trường biểu mẫu
Đặt tất cả lại với nhau: Mẫu đăng ký
Hàm showMessage ()
Các chức năng của vòi hoa sen () và showcess ()
Hàm HasValue ()
Hàm validateMail ()
Người xử lý sự kiện gửi
Bản tóm tắt
Làm thế nào để bạn liên kết một biểu mẫu trong JavaScript?
Làm thế nào để bạn truy cập phần tử biểu mẫu bằng JavaScript?
Làm thế nào để các hình thức hoạt động trong JavaScript?
Chúng ta có thể xác nhận biểu mẫu bằng JavaScript không?

Hình thức cơ bản

Để tạo biểu mẫu trong HTML, bạn sử dụng phần tử

document.forms
Code language: JavaScript (javascript)

9:

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

Phần tử

document.forms
Code language: JavaScript (javascript)

9 có hai thuộc tính quan trọng:

document.forms[0]
Code language: CSS (css)

1 và

document.forms[0]
Code language: CSS (css)

2.

Thuộc tính
```
document.forms[0]
Code language: CSS (css)
```
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

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

0 để biểu thị một biểu mẫu.

<input type="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ử

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

0 cũng cung cấp các phương pháp hữu ích sau:

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

9 - Gửi biểu mẫu.

<button type="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ư

<button type="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

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

3 trả về một bộ sưu tập các biểu mẫu (

<button type="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ử

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

5 hoặc

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

6 với loại

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

7:

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

Hoặc

<button type="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

<button type="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

<button type="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

<button type="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

<button type="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

<input type="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

<button type="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,

<button type="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ố

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

5:

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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ử

<button type="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ề

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

6 gọi hàm

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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ị

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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

<button type="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

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

3 và

<form action="signup.html" method="post" id="signup">
	<h2>Sign Up</h2>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="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ư

<button type="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
```
<button type="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?

Làm thế nào để bạn liên kết một biểu mẫu trong JavaScript?

Trong thẻ cơ thể, đã tạo một biểu mẫu HTML và chỉ định ID, phương thức và hành động của biểu mẫu. Trong biểu mẫu, chỉ định thẻ neo với một sự kiện onclick. Tạo một chức năng cho JavaScript sẽ được thực thi khi nhấp vào liên kết. Khi chúng tôi nhấp vào liên kết, chức năng SubborForm () sẽ được thực thi.

Làm thế nào để bạn truy cập phần tử biểu mẫu bằng JavaScript?

Để 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ư getElementsByName (), getEuityById (), querySelector (), v.v ...Also, bạn có thể sử dụng thuộc tính phần tử của đối tượng biểu mẫu. Hình thức. Các yếu tố Tài sản lưu trữ một bộ sưu tập các yếu tố biểu mẫu.use DOM methods like getElementsByName() , getElementById() , querySelector() , etc. Also, you can use the elements property of the form object. The form. elements property stores a collection of the form elements.

Làm thế nào để các hình thức hoạt động trong JavaScript?

Khi trang được tải, JavaScript tạo một biểu mẫu mảng trong đó đặt tất cả các biểu mẫu trên trang.Mẫu đầu tiên là biểu mẫu [0], mẫu thứ hai là biểu mẫu [1], v.v ... Mỗi biểu mẫu có một mảng khác trong đó JavaScript đặt tất cả các phần tử trong biểu mẫu.Các yếu tố đầu tiên là các phần tử [0], các phần tử thứ hai [1], v.v.. The first form is forms[0] , the second is forms[1] etc. Each form has another array in which JavaScript puts all the elements in the form. The first elements is elements[0] , the second elements[1] etc.