Hướng dẫn how can we collect data from form in html? - làm thế nào chúng ta có thể thu thập dữ liệu từ biểu mẫu trong html?

Question

Chúng ta hãy tìm hiểu cách tạo biểu mẫu với thẻ

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

3, cách thu nhập đầu vào của người dùng bằng thẻ

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

4, các loại thẻ

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

4 khác nhau và cách gửi biểu mẫu.

Nội dung chính Show

Các hình thức
Hoạt động
Phương pháp
Lựa chọn
Nhóm tùy chọn
Yếu tố đầu vào
Mật khẩu
Hộp kiểm
Bộ trường và truyền thuyết
Đệ trình
Tài nguyên
Bộ sưu tập mẫu trong HTML là gì?
Dữ liệu từ hình thức HTML đi đâu?
Làm thế nào để bạn đăng dữ liệu từ một biểu mẫu?

Các hình thức

Khi bạn muốn thu thập dữ liệu từ người dùng của mình, các biểu mẫu trong HTML là một cách tuyệt vời để thực hiện điều đó. Thẻ xung quanh cho các biểu mẫu là thẻ

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

3. Ngoài ra, nó sẽ yêu cầu hai thuộc tính, thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 và thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

8.forms in HTML are a great way to accomplish that. The surrounding tag for forms is the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

3 tag. In addition, it will require two attributes, the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 attribute and the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

8 attribute.

Hoạt động

Thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 chỉ đơn giản là vị trí mà thông tin từ biểu mẫu đang được gửi đến. Do đó, giá trị của thuộc tính này sẽ là một URL của một số loại. Thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 là tùy chọn, nhưng nếu bạn muốn đảm bảo rằng thông tin đang được gửi đến một vị trí cụ thể, bạn nên đặt nó.URL of some kind. The

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 attribute is optional, but if you want to make sure that the information is being sent to a specific location, you should set it.

Phương pháp

Thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

8 xác định cách biểu mẫu sẽ gửi thông tin. Hai giá trị được sử dụng nhiều nhất cho thuộc tính này là

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

2 và

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

3.how the form is going to send the information. The two most used values for this attribute is

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

2 and

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

3.

Nếu bạn thử thực hiện tìm kiếm google và nhìn vào URL ở đầu sau đó, bạn sẽ thấy văn bản bạn đã nhập trước khi nhấn tìm kiếm. Đây là một ví dụ về get. Sử dụng

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

2 sẽ làm cho dữ liệu được nhập trong một biểu mẫu được thêm vào cuối URL.get. Using

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

2 will make the data inputted in a form get appended to the end of the URL.

Mặt khác, sử dụng

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

3 vẫn sẽ gửi dữ liệu như

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

2, nhưng sự khác biệt chính duy nhất là bạn sẽ không thấy nó trong URL. Sử dụng

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

3 được khuyến nghị cho các bài nộp yêu cầu bảo mật cao như mật khẩu và thông tin cá nhân.not see it in the URL. Using

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

3 is recommended for submissions that require heightened security like passwords and personal information.

Đặt tất cả lại với nhau, và bạn nhận được biểu mẫu này:

	<!DOCTYPE html>
<html>
    <head>
        <title>Forms</title>
    </head>
    <body>
        <form action="destination" method="get">
        </form>
    </body>
</html>

Mặc dù đó là một hình thức hoàn toàn hợp lệ, không có cách nào để người dùng nhập hoặc gửi dữ liệu, nhưng về cơ bản nó là vô dụng. Chúng tôi sẽ khám phá nhiều cách mà bạn có thể thu thập dữ liệu từ người dùng.

Textarea

TextAreas là các hộp văn bản nhiều dòng nơi bạn có thể nhập văn bản. Chúng hỗ trợ nhiều dòng văn bản với các thuộc tính tùy chọn để kiểm soát kích thước của chúng, các thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

8 và
<p>Favorite color?</p> <select> <option>Red</option> <option selected>Blue</option> <option>Green</option> </select>
9. Thuộc tính
<p>Favorite color?</p> <select> <option>Red</option> <option selected>Blue</option> <option>Green</option> </select>
8 xác định số lượng hàng mà TextArea sẽ có và thuộc tính
<p>Favorite color?</p> <select> <option>Red</option> <option selected>Blue</option> <option>Green</option> </select>
9 xác định số lượng cột mà TextArea sẽ có. are multiple-line text boxes where you can input text. They support multiple lines of text with optional attributes to control the size of them, the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

8 and

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

9 attributes. The

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

8 attribute defines the number of rows that the textarea will have, and the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

9 attribute defines the number of columns that the textarea will have.

	<textarea rows="8" cols="64">This is the initial value.</textarea>

Textareas là những hộp văn bản.

Textareas are boxes of text.

Lựa chọn

Chọn Hộp là menu thả xuống, nơi bạn có thể chọn một trong các tùy chọn. Chúng được sử dụng để chọn một tùy chọn duy nhất từ danh sách các tùy chọn. boxes is a dropdown menu where you can select one of the options. They are used to select a single option from a list of options.

Thẻ

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

2 là thẻ ngoài cùng và bên trong bạn có thể xác định các tùy chọn để chọn, sử dụng thẻ

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

3.

Hãy xem xét một ví dụ:

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

Chọn với 3 tùy chọn.

Select with 3 options.

Nếu bạn muốn một tùy chọn được chọn theo mặc định, bạn có thể thêm thuộc tính

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

4 không có giá trị.value-less

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

4 attribute.

Ví dụ: nếu bạn muốn

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

5 được chọn trước, bạn sẽ làm điều này:

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option selected>Blue</option>
    <option>Green</option>
</select>

Nhóm tùy chọn

Nếu các tùy chọn của bạn cảm thấy tốt hơn nếu chúng được nhóm lại với nhau, bạn có thể sử dụng thẻ

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

6, với thuộc tính

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

7 đi kèm. Đây là một ví dụ đơn giản về nó:grouped together, you can use the

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

6 tag, with its accompanying

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

7 attribute. Here's a simple example of it:

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

Nhóm tùy chọn có thể hữu ích.

Option groups can be useful.

Yếu tố đầu vào

Phần tử

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

4 là phần tử được sử dụng phổ biến nhất bên trong các dạng HTML. Thẻ

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

4 có thể biến thành nhiều thứ khác nhau do thuộc tính

	<input type="text">

0 linh hoạt của nó. Vì thẻ này không bao quanh bất kỳ nội dung nào, nó không yêu cầu thẻ đóng.many different things due to its versatile

	<input type="text">

0 attribute. Since this tag doesn't surround any content, it does not require a closing tag.

Hãy xem qua tất cả các loại chính.

Chữ

Khi

	<input type="text">

0 được đặt thành

	<input type="text">

2, nó sẽ là một trường văn bản một dòng. Nó sẽ chấp nhận bất kỳ đầu vào văn bản.

	<input type="text">

Thuộc tính

	<input type="text">

3 được sử dụng để đặt giá trị mặc định của trường văn bản. Ví dụ: nếu bạn muốn đặt giá trị mặc định thành

	<input type="text">

4, bạn sẽ làm điều này:

	<input type="text" value="Hello World!">

Mật khẩu

Khi

	<input type="text">

0 được đặt thành

	<input type="text">

6, nó hoạt động giống như loại được đặt thành

	<input type="text">

2, ngoại trừ bất kỳ văn bản nào được nhập sẽ được ghi đè trực quan bởi các dấu chấm hoặc sao như bạn mong đợi khi nhập mật khẩu. Bạn nên sử dụng loại đầu vào này khi bạn muốn thu thập thông tin nhạy cảm.visually overridden by dots or stars as you would expect when entering a password. It is recommended that you use this type of input when you want to collect sensitive information.

	<input type="password">

Hộp kiểm

Khi

	<input type="text">

0 được đặt thành

	<input type="text">

9, nó trở thành hộp kiểm có hai trạng thái. Một hộp kiểm có thể được kiểm tra và không được kiểm tra.checkbox that has two states. A checkbox can either be checked and not checked.

	<input type="checkbox">

Bạn có tùy chọn để cung cấp cho thuộc tính

	<input type="text" value="Hello World!">

0 không có giá trị này, sẽ đặt trạng thái ban đầu của hộp kiểm sẽ được kiểm tra.value-less

	<input type="text" value="Hello World!">

0 attribute, which will set the initial state of the checkbox to be checked.

	<input type="checkbox" checked>

Đài

Khi

	<input type="text">

0 được đặt thành

	<input type="text" value="Hello World!">

2, nó sẽ biến nó thành nút radio, tương tự như hộp kiểm ngoại trừ chỉ có một tùy chọn có thể được chọn trong một nhóm chúng.radio button, which is similar to a checkbox except that only one option can be selected in a group of them.

	<textarea rows="8" cols="64">This is the initial value.</textarea>

0

Con số

Khi

	<input type="text">

0 được đặt thành

	<input type="text" value="Hello World!">

4, nó sẽ biến thành một trường đầu vào một dòng nơi bạn có thể chọn một số. Bạn có các thuộc tính

	<input type="text" value="Hello World!">

5 và

	<input type="text" value="Hello World!">

6 tùy chọn để ràng buộc giá trị vào một phạm vi nhất định. Ví dụ: nếu bạn muốn hạn chế số từ 1 đến 10, bạn sẽ làm điều này:number. You have optional

	<input type="text" value="Hello World!">

5 and

	<input type="text" value="Hello World!">

6 attributes to constrain the value to a certain range. For example, if you wanted to constrain the number to be between 1 and 10, you would do this:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

1

Nộp

Khi

	<input type="text">

0 được đặt thành

	<input type="text" value="Hello World!">

8, nó trở thành một nút, khi được nhấp, hãy gửi biểu mẫu đến đích được xác định trong thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7.submits the form to the destination defined in the

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 attribute.

	<textarea rows="8" cols="64">This is the initial value.</textarea>

2

Thuộc tính

	<input type="text">

3 tùy chọn xác định văn bản được hiển thị trên nút. Ví dụ: nếu bạn muốn gửi biểu mẫu với văn bản

	<input type="password">

1, bạn sẽ làm điều này:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

3 Có nhiều loại đầu vào.

There are many more input types.

Cái nút

Loại đầu vào cuối cùng trong danh sách trên là

	<input type="text" value="Hello World!">

8, đó là nút mà người dùng nhấn để gửi biểu mẫu. Tuy nhiên, có một cách khác để tạo một nút chung có thể làm bất cứ điều gì bạn muốn (đôi khi yêu cầu một chút JavaScript).

Ví dụ: với thẻ

	<input type="password">

3, bạn có thể dễ dàng tạo nút đặt lại biểu mẫu cho các giá trị ban đầu của nó bằng cách cung cấp cho nó một thuộc tính

	<input type="text">

0 với giá trị

	<input type="password">

5.resets the form to its initial values by giving it a

	<input type="text">

0 attribute with the value of

	<input type="password">

5.

	<textarea rows="8" cols="64">This is the initial value.</textarea>

4

Nói chung, bạn chỉ có thể tạo một nút chung như thế này:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

5 Nút HTML không làm gì cả.

An HTML button that does nothing.

Nếu bạn đã cho nút một thuộc tính

	<input type="password">

6, nó sẽ chạy JavaScript sau khi nhấn.

	<textarea rows="8" cols="64">This is the initial value.</textarea>

6

Trong trường hợp này, nó sẽ chạy một hàm gọi là

	<input type="password">

7

Yêu cầu

Yêu cầu là một thuộc tính bạn có thể thêm vào bất kỳ thẻ nào đã nói ở trên sẽ làm cho nó mang lại cho nó một giá trị cần thiết để gửi biểu mẫu. is an attribute you can add to any of the aforementioned tags that will make giving it a value required for form submission.

Ví dụ: nếu bạn đã cố gắng gửi biểu mẫu sau:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

7

Không cung cấp cho nó một giá trị, trình duyệt sẽ tự động ngăn chặn tất cả các nỗ lực gửi cho đến khi người dùng nhập một cái gì đó trong các thẻ được đưa ra thuộc tính

	<input type="password">

8.automatically prevent all submission attempts until the user inputs something in the tags given the

	<input type="password">

8 attribute.

Điều này rất hữu ích cho những thứ như đăng ký tài khoản mà bạn cần một tên người dùng/email và mật khẩu để tiến hành.need a username/email and password to proceed.

Bạn cần nhập một giá trị cho các đầu vào cần thiết.

Nhãn

Khi đến lúc gửi dữ liệu, bạn sẽ muốn sử dụng thuộc tính

	<input type="password">

9. Thuộc tính

	<input type="password">

9 được sử dụng để xác định dữ liệu trong biểu mẫu.

Thêm một cái như vậy:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

8

Hoặc cái này:

	<textarea rows="8" cols="64">This is the initial value.</textarea>

9

Sau khi bạn đã cung cấp các thẻ

	<input type="password">

9, việc cung cấp cho chúng các nhãn có thể nhìn thấy tốt, sử dụng thẻ

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

7.

Sử dụng các ví dụ trên của chúng tôi, sử dụng

	<p>Favorite color?</p>
<select>
    <optgroup label="Dark Colors">
        <option>Brown</option>
        <option>Black</option>
        <option>Purple</option>
    </optgroup>
    <optgroup label="Light Colors">
        <option>Yellow</option>
        <option>White</option>
        <option>Pink</option>
    </optgroup>
</select>

7 có thể trông như thế này:

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

0

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

1 Họ giúp người dùng rất nhiều.

They help the user tremendously.

Bộ trường và truyền thuyết

Với các bộ trường và các thành phần huyền thoại, bạn có thể cung cấp nhãn cho các nhóm thẻ, sử dụng thẻ

	<input type="checkbox">

4 để nhóm chúng và thẻ

	<input type="checkbox">

5 để dán nhãn.field sets and legends elements, you can give labels to groups of tags, using the

	<input type="checkbox">

4 tag to group them, and the

	<input type="checkbox">

5 tag to label it.

Ví dụ:

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

2 Ví dụ về các bộ trường và truyền thuyết.

Example of field sets and legends.

Đệ trình

Gửi dữ liệu bạn đã thu thập có thể được xử lý bởi máy chủ. Thuộc tính

	<p>Favorite color?</p>
<select>
    <option>Red</option>
    <option>Blue</option>
    <option>Green</option>
</select>

7 xác định nơi dữ liệu sẽ được gửi và do đó, một máy chủ sẽ nhận được và xử lý nó.

Tài nguyên

HTML Forms - MDN Web Docs

Tham gia
Đăng lại
tiếng riu ríu
Đăng lại

Đưa ra phản hồi trên trang này!

Bộ sưu tập mẫu trong HTML là gì?

Khóa học HTML/CSS hoàn chỉnh 2022 Bộ sưu tập HTML DOM DOM được sử dụng để trả về tất cả các phần tử biểu mẫu có trong tài liệu HTML dưới dạng bộ sưu tập.used for returning all the form elements that are present inside the HTML document as a collection.

Dữ liệu từ hình thức HTML đi đâu?

Một biểu mẫu HTML được sử dụng để thu thập đầu vào của người dùng.Đầu vào của người dùng thường được gửi đến một máy chủ để xử lý.most often sent to a server for processing.

Làm thế nào để bạn đăng dữ liệu từ một biểu mẫu?

Để đăng dữ liệu biểu mẫu HTML lên máy chủ ở định dạng được mã hóa URL, bạn cần thực hiện yêu cầu POST HTTP cho máy chủ và cung cấp dữ liệu biểu mẫu HTML trong phần thân của thông báo bài đăng.Bạn cũng cần chỉ định kiểu dữ liệu bằng cách sử dụng tiêu đề yêu cầu loại nội dung: Ứng dụng/X-www-form-urlencoded.make an HTTP POST request to the server and provide the HTML form data in the body of the POST message. You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.

programming html Form HTML Form action Form tag HTML