Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Trong bài viết này, bạn sẽ học cách tạo trường đầu vào văn bản trong HTML. Bạn cũng sẽ tìm hiểu về các biểu mẫu web và có được cái nhìn tổng quan về cách chúng hoạt động, vì các hộp văn bản là một tính năng phổ biến của mọi hình thức.

Show

Bắt đầu nào!

Các biểu mẫu web là gì?

Các hình thức là một cách hiệu quả để thu thập thông tin.

Có nhiều trường hợp bạn sẽ cần điền vào một biểu mẫu vật lý, một tài liệu vật lý in và đưa ra chi tiết cá nhân.

Ví dụ: bạn có thể điền vào một biểu mẫu và đưa nó cho ai đó khi bạn bắt đầu một công việc mới hoặc khi bạn đang kiểm tra y tế hoặc khi bạn đang trong quá trình thuê/mua nhà - hoặc bất kỳ thời gian khác khi cần có giấy tờ.

Giống như các hình thức vật lý, các biểu mẫu web kỹ thuật số trực tuyến là một cách để nhận và thu thập đầu vào, thông tin và dữ liệu quan trọng từ người dùng và khách truy cập, sử dụng kết hợp các công nghệ web.

Một biểu mẫu web bắt chước một hình thức vật lý bằng cách chứa không gian cho người dùng để điền thông tin của họ.

Các biểu mẫu web sử dụng nhiều công cụ hoặc điều khiển biểu mẫu, để thu thập đầu vào của người dùng.

Một trang web có thể có một hộp tìm kiếm hoặc trường đầu vào văn bản, để nhập một dòng văn bản duy nhất. Điều này cho phép người dùng tìm kiếm một cái gì đó cụ thể.

Một trang web cũng có thể chứa một biểu mẫu đăng ký cho phép người dùng đăng ký nhận bản tin hoặc các bản cập nhật khác.

Thông thường sẽ chứa một trường đầu vào văn bản để nhập tên, họ và địa chỉ email của người dùng.

Nhiều trang web cũng có biểu mẫu đăng ký / đăng nhập khi mua hàng trực tuyến, ví dụ, nơi người dùng nhập tên người dùng của họ vào trường văn bản và mật khẩu của họ trong một trường riêng biệt. Mặc dù các trường mật khẩu cũng là các trường văn bản, mỗi ký tự văn bản được bao phủ bởi một chấm đen để ẩn những gì đang được gõ.

Một trang web cũng có thể có Textarea lớn hơn để người dùng nhập các đoạn văn bản dài hơn, điều này là sử dụng để để lại một bình luận bên dưới một bài đăng trên blog.

Nhiều biểu mẫu cũng cho phép người dùng chọn một tùy chọn cụ thể từ một số tùy chọn bằng cách chọn nút radio. Họ có thể cho phép người dùng chọn nhiều tùy chọn bằng cách kiểm tra/bỏ chọn hộp kiểm.

Cuối cùng, tất cả các biểu mẫu đều có nút gửi, để gửi dữ liệu đến một máy chủ nơi nó sẽ được lưu trữ hoặc xử lý.

Cách thức hoạt động của Web

Internet là một mạng lưới toàn cầu lớn kết nối hàng triệu máy tính trên toàn thế giới.

Các máy tính là một phần của mạng giao tiếp với nhau bằng cách gửi và nhận thông tin.

Cách đạt được điều này là nhờ kiến ​​trúc/yêu cầu/phản hồi máy chủ/máy chủ của Web.

Máy khách, thường là trình duyệt web như Google Chrome, gửi yêu cầu đến máy chủ web.

Một máy chủ web là một phần của phần cứng hoặc phần mềm máy tính lưu trữ các tệp tạo nên các trang web và phân phối chúng bất cứ khi nào nhận được yêu cầu làm như vậy.

Yêu cầu có thể là xem một biểu mẫu là một phần của trang web.

Máy chủ gửi lại các tệp tạo thành biểu mẫu web dưới dạng phản hồi. Sau đó, trình duyệt web tập hợp các tệp lại với nhau và người dùng xem biểu mẫu trong trình duyệt web.

Chu kỳ yêu cầu/phản hồi này được cấu trúc bởi một giao thức, được gọi là HTTP (viết tắt của giao thức chuyển siêu văn bản).

Vì vậy, khi sử dụng biểu mẫu web, người dùng nhập dữ liệu cần thiết. Sau đó, sau khi xác thực phía máy khách kiểm tra xem tất cả các trường bắt buộc được điền và liệu dữ liệu có đúng định dạng hay không, người dùng nhấp vào nút gửi.

Dữ liệu sau đó được gửi đến máy chủ trong các cặp giá trị tên trong yêu cầu HTTP. Phương pháp tổ chức thông tin này trong các cặp giá trị tên, đảm bảo rằng dữ liệu chính xác tương ứng với phần tử biểu mẫu chính xác.

Sau đó, một ngôn ngữ phía máy chủ như PHP, Ruby hoặc Python được sử dụng để xử lý thông tin và lưu trữ trong cơ sở dữ liệu để sử dụng hoặc truy xuất sau này.

Cách tạo các biểu mẫu web trong HTML

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




    
    
    
    Web form


    
3 được sử dụng để thu thập thông tin.

Phần tử




    
    
    
    Web form


    
3 có lỗ mở



    
    
    
    Web form


    
3 và đóng thẻ



    
    
    
    Web form


    
6.




    
    
    
    Web form


    

Phần tử




    
    
    
    Web form


    
3 lấy hai thuộc tính:

  • Thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    8, chỉ định URL nơi bạn muốn dữ liệu được gửi và xử lý.
  • Thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    9 chấp nhận như một giá trị một trong hai động từ HTTP,
     
    
    
    0 hoặc
     
    
    
    1. Nếu không có thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    9 được bao gồm, phương thức
     
    
    
    0 được sử dụng theo mặc định.



    
    
    
    Web form


    

Tuy nhiên, điều này một mình không thu thập bất kỳ đầu vào người dùng.

Phần tử HTML 4 là gì?

Phần tử

 

5 được sử dụng phổ biến nhất để thu thập và truy xuất dữ liệu người dùng từ biểu mẫu web.

Đó là nơi người dùng nhập dữ liệu của họ.

Nó được lồng bên trong phần tử




    
    
    
    Web form


    
3 và đó là một yếu tố tự đóng. Điều này có nghĩa là nó không yêu cầu một thẻ đóng. (Đóng thẻ có một dấu gạch chéo phía trước,
 

7.)

Bạn sử dụng nó để tạo các kiểu khác nhau của các trường đầu vào hoặc hình thức điều khiển đầu vào, để người dùng nhập nhiều loại thông tin khác nhau.

Nó tạo ra các trường văn bản, trường email, trường mật khẩu, hộp kiểm, nút radio, menu thả xuống, gửi nút, khả năng chọn và tải lên các tệp và hình ảnh từ máy tính của người dùng và nhiều hơn nữa.

Cách để xác định loại trường đầu vào hoặc điều khiển đầu vào biểu mẫu, là đặt thuộc tính

 

8 và gán cho nó một giá trị.

Cú pháp chung của

 

5 trông giống như thế này:

 

Ví dụ: để tạo một trường cho phép người dùng tải lên một tệp, phần tử

 

5 sẽ trông như thế này:




    
    
    
    Web form


    

Thuộc tính

 

8 xác định loại dữ liệu mà phần tử
 

4 có thể chấp nhận.

Cách tạo trường đầu vào hộp văn bản HTML

Giá trị mặc định của thuộc tính

 

8 của ____ 24 khi không được chỉ định là văn bản. Vì vậy, đầu vào văn bản là kiểu đầu vào phổ biến nhất.text. So text input is the most common style of input.

Dòng




    
    
    
    Web form


    
5 tạo ra một trường đầu vào văn bản dòng duy nhất, trong đó người dùng có thể nhập bất kỳ đầu vào văn bản nào.




    
    
    
    Web form


    

Please enter some text below:

Khi bạn xem trang trong trình duyệt, bạn có thể thấy rằng một trường đầu vào văn bản dòng duy nhất đã được tạo:

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Cách thêm văn bản giữ chỗ vào trường văn bản

Văn bản giữ chỗ, còn được gọi là văn bản filler, là một cách để nhắc nhở và đưa ra gợi ý cho người dùng về loại thông tin họ cần để điền vào biểu mẫu. Nó cũng có thể cung cấp một giá trị mặc định trước khi chúng bắt đầu gõ.




    
    
    
    Web form


    

Please enter your first and last name:

Mã từ trên sẽ dẫn đến những điều sau:

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Tầm quan trọng của thuộc tính Web form
6 trong các trường văn bản

Khi gửi biểu mẫu và gửi nó đến máy chủ, máy chủ cần phân biệt và phân biệt giữa các loại dữ liệu được gửi khác nhau mà nó thu thập.

Ví dụ, nó cần biết tên người dùng nào là mật khẩu và đó là địa chỉ email.

Điều này có nghĩa là mỗi trường văn bản cần thuộc tính




    
    
    
    Web form


    
6 và giá trị để làm cho loại dữ liệu được gửi rõ ràng hơn.

Ví dụ: bạn có thể sử dụng phần sau để nhắc ai đó nhập tên đầy đủ của họ vào trường văn bản:




    
    
    
    Web form


    

Please enter your full name:

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Giả sử người dùng nhập tên "John Bexley" vào trường văn bản. Điều này sau đó sẽ trở thành giá trị của thuộc tính




    
    
    
    Web form


    
6.

Như đã đề cập trước đó, dữ liệu trong các biểu mẫu được gửi trong các cặp giá trị tên. Trong trường hợp này, máy chủ sẽ biết rằng




    
    
    
    Web form


    
6 của người dùng là



    
    
    
    Web form


    

Please enter some text below:

0, cụ thể là nó sẽ trông giống như



    
    
    
    Web form


    

Please enter some text below:

1.

Để đưa ra một ví dụ khác:




    
    
    
    Web form


    

Please enter your first name:

Please enter your last name:

Mã trên có hai trường văn bản riêng biệt để người dùng nhập tên và họ của họ một cách riêng biệt.

Nếu họ nhập "John" làm tên đầu tiên, cặp giá trị tên được gửi đến máy chủ sẽ là




    
    
    
    Web form


    

Please enter some text below:

2.

Nếu họ nhập "Bexley" làm tên cuối cùng, cặp giá trị tên được gửi đến máy chủ sẽ là




    
    
    
    Web form


    

Please enter some text below:

3.

Cách làm thông tin văn bản cần thiết

Bạn có thể làm cho nó để các trường nhất định được yêu cầu và cần được người dùng điền vào.

HTML5 đã giới thiệu xác thực phía máy khách.

Đây là một tính năng trong đó một thông báo được hiển thị nếu người dùng chưa điền vào các trường bắt buộc hoặc chưa nhập thông tin một cách chính xác. Điều đó cũng có nghĩa là họ sẽ không thể gửi biểu mẫu.

Tất cả những gì bạn cần làm để cho phép điều này là thêm thuộc tính




    
    
    
    Web form


    

Please enter some text below:

4 vào phần tử
 

5. Thuộc tính này không cần phải có một giá trị.

Hãy nhớ rằng khi thêm nhiều thuộc tính vào phần tử

 

5, bạn không phải thêm các phần tử theo một thứ tự nhất định.




    
    
    
    Web form


    

Please enter your first and last name:

Nhìn vào những gì xảy ra nếu người dùng không điền vào một trong các trường:

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Một tin nhắn sẽ xuất hiện và người dùng sẽ không thể gửi biểu mẫu nếu các trường cần thiết chưa được hoàn thành.

Cách đặt số lượng ký tự tối thiểu và tối đa trong hộp văn bản

Bạn có thể chỉ định số lượng ký tự tối thiểu và tối đa mà người dùng có thể nhập vào trường văn bản.

Để tạo số lượng ký tự tối thiểu, hãy sử dụng thuộc tính




    
    
    
    Web form


    

Please enter some text below:

7.

Ví dụ: bạn có thể có nó để tên người dùng của người dùng dài ít nhất ba ký tự:




    
    
    
    Web form


    

Please enter your username

Người dùng sẽ không thể gửi biểu mẫu nếu tên người dùng ngắn hơn ba ký tự:

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Để giới hạn số lượng ký tự mà người dùng nhập vào trường văn bản, hãy sử dụng thuộc tính




    
    
    
    Web form


    

Please enter some text below:

8.

Một ví dụ về việc kết hợp cả hai thuộc tính




    
    
    
    Web form


    

Please enter some text below:

7 và



    
    
    
    Web form


    

Please enter some text below:

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




    
    
    
    Web form


    
0

Trong ví dụ trên, tên người dùng của người dùng phải dài ít nhất 3 ký tự và không dài hơn 20 ký tự.

Cách Web form

Please enter your first and last name:

1 điều khiển biểu mẫu

Cho đến nay tôi đã sử dụng một yếu tố




    
    
    
    Web form


    

Please enter your first and last name:

2 để viết một số văn bản trước hộp văn bản, theo cách này để nhắc nhở người dùng và cho họ biết những gì họ cần nhập.

Nhưng đây không phải là một thực hành tốt nhất và không thể truy cập được.

Mỗi điều khiển biểu mẫu, trong trường hợp này mỗi trường văn bản, nên có phần tử




    
    
    
    Web form


    

Please enter your first and last name:

3 riêng.

Điều này làm cho biểu mẫu có thể truy cập được cho người dùng khiếm thị sử dụng các công nghệ hỗ trợ như đầu đọc màn hình.

Một cách để sử dụng nó là làm tổ bất kỳ văn bản giới thiệu nào và




    
    
    
    Web form


    
5 trong phần tử



    
    
    
    Web form


    

Please enter your first and last name:

3 như vậy:




    
    
    
    Web form


    
1

Hướng dẫn how do you add a textbox in html? - làm thế nào để bạn thêm một hộp văn bản trong html?

Một cách khác để sử dụng phần tử




    
    
    
    Web form


    

Please enter your first and last name:

3 và có kết quả tương tự là tách nó khỏi phần tử
 

5.

Trong trường hợp này, thuộc tính




    
    
    
    Web form


    

Please enter your first and last name:

8 cần được thêm vào



    
    
    
    Web form


    

Please enter your first and last name:

3 và thuộc tính



    
    
    
    Web form


    

Please enter your full name:

0 được thêm vào
 

5, để liên kết cả hai với nhau.

Giá trị của




    
    
    
    Web form


    

Please enter your first and last name:

8 sẽ giống nhau với



    
    
    
    Web form


    

Please enter your full name:

0.




    
    
    
    Web form


    
2

Sự kết luận

Để tổng hợp, để tạo một trường đầu vào văn bản trong HTML, ít nhất bạn cần:

  • Một phần tử
     
    
    
    5, thường đi trong phần tử
    
    
    
        
        
        
        Web form
    
    
        
    3.
  • Để đặt thuộc tính
     
    
    
    8 có giá trị
    
    
    
        
        
        
        Web form
    
    
        

    Please enter your full name:

    7. Điều này sẽ tạo ra một trường đầu vào văn bản dòng duy nhất.
  • Đừng quên thêm thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    6. Điều này xác định thông tin cho từng điều khiển biểu mẫu được tạo và làm cho mọi thứ rõ ràng hơn cho máy chủ.

Để tìm hiểu thêm về HTML và CSS, hãy xem chứng nhận thiết kế web đáp ứng của Freecodecamp, nơi bạn sẽ học theo cách tương tác trong khi xây dựng các dự án thú vị trên đường đi.

Cảm ơn bạn đã đọc và mã hóa hạnh phúc!



Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Bây giờ, chúng ta phải đặt con trỏ vào thời điểm đó trong thẻ nơi chúng ta muốn tạo hộp văn bản.Và, sau đó chúng ta phải nhập thẻ tại điểm đó.Bước 3: Sau khi viết thẻ, chúng ta phải sử dụng thuộc tính của nó có tên là loại.Thuộc tính này chỉ định loại dữ liệu sẽ được nhập.

Làm cách nào để tạo hộp văn bản?Go to Insert > Text Box, and then select Draw Text Box. Click or tap in the document, and drag to draw the text box the size that you want. To add text to a text box, select inside the text box, and then type or paste text.

Thêm một hộp văn bản Chuyển đến Insert> Hộp văn bản, sau đó chọn Vẽ hộp văn bản.Nhấp hoặc nhấn vào tài liệu và kéo để vẽ hộp văn bản kích thước mà bạn muốn.Để thêm văn bản vào hộp văn bản, chọn bên trong hộp văn bản, sau đó nhập hoặc dán văn bản.

Thẻ nào được sử dụng cho hộp văn bản?