Làm thế nào để bạn có được đầu vào trong html?

Trong bài viết này, bạn sẽ tìm hiểu cách tạo trường nhập 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á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 biểu mẫu

Bắt đầu nào

Biểu mẫu web là gì?

Biểu mẫu là một cách hiệu quả để thu thập thông tin

Có nhiều trường hợp bạn cần điền vào biểu mẫu vật lý, tài liệu vật lý được in và cung cấp thông tin cá nhân

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

Cũng giống như biểu mẫu vật lý, biểu mẫu web kỹ thuật số trực tuyến là một cách để nhận và thu thập thông tin đầ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

Biểu mẫu web bắt chước biểu mẫu vật lý bằng cách chứa khoảng trống để người dùng điền thông tin của họ

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

Một trang web có thể có hộp tìm kiếm hoặc trường nhập văn bản để nhập một dòng văn bản. Đ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

Điều đó thường chứa trường nhập 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, chẳng hạn như 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ọ vào trường riêng. Mặc dù các trường mật khẩu cũng là các trường văn bản, nhưng mỗi ký tự văn bản được che bởi một chấm đen để ẩn nội dung đang được nhập

Một trang web cũng có thể có vùng văn bản 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 rất hữu ích khi để lại nhận xét bên dưới 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 chọn/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áy chủ nơi dữ liệu sẽ được lưu trữ hoặc xử lý

Biểu mẫu web hoạt động như thế nào

Internet là mạng toàn cầu rộng 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 khá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áy chủ web là một 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 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 nên biểu mẫu web dưới dạng phản hồi. Trình duyệt web sau đó 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 trình 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 HyperText Transfer Protocol)

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 chưa và dữ liệu có đúng định dạng hay không, người dùng nhấp vào nút gửi

Sau đó, dữ liệu được gửi đến máy chủ theo cặp tên-giá trị trong yêu cầu HTTP. Phương pháp tổ chức thông tin theo cặp tên-giá trị này đảm bảo rằng dữ liệu chính xác tương ứng với thành phần 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ữ thông tin đó trong cơ sở dữ liệu để sử dụng hoặc truy xuất sau này

Cách tạo 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 dùng để thu thập thông tin

Phần tử




    
    
    
    Web form


    
3 có thẻ mở



    
    
    
    Web form


    
3 và đóng thẻ



    
    
    
    Web form


    
6




    
    
    
    Web form


    

Phần tử




    
    
    
    Web form


    
3 có 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 làm giá trị cho một trong hai động từ HTTP, hoặc là
     
    
    
    0 hoặc là
     
    
    
    1. Nếu không bao gồm thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    9, 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 nào của 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à nó là phần tử tự đóng. Điều này có nghĩa là nó không yêu cầu thẻ đóng. (Các thẻ đóng có dấu gạch chéo về phía trước,
 

7. )

Bạn sử dụng nó để tạo các kiểu trường nhập liệu khác nhau hoặc tạo các điều khiển nhập liệu để người dùng nhập nhiều loại thông tin khác nhau

Nó tạo 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, nút gửi, khả năng chọn và tải tệp và hình ảnh lên từ máy tính của người dùng, v.v.

Cách xác định loại trường đầu vào hoặc kiểm soát đầ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 như thế này

________số 8

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

 

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




    
    
    
    Web form


    
1

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 nhập liệu hộp văn bản HTML

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

 

8 của
 

4 khi không được chỉ định là văn bản. Vì vậy, kiểu nhập văn bản là kiểu nhập phổ biến nhất

Dòng




    
    
    
    Web form


    
15 tạo trường nhập văn bản một dòng, nơi người dùng có thể nhập bất kỳ kiểu nhập văn bản nào




    
    
    
    Web form


    
7

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

Làm thế nào để bạn có được đầu vào 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ỗ hay còn gọi là văn bản điền vào là một cách nhắc nhở và 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 họ bắt đầu nhập




    
    
    
    Web form


    
8

Mã từ trên sẽ dẫn đến kết quả như sau

Làm thế nào để bạn có được đầu vào trong html?

Tầm quan trọng của thuộc tính Web form
16 trong 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 đâu là tên người dùng, đâu là mật khẩu và đâu là địa chỉ email

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




    
    
    
    Web form


    
16 và một 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 cách sau để nhắc ai đó nhập tên đầy đủ của họ vào trường văn bản




    
    
    
    Web form


    
1

Làm thế nào để bạn có được đầu vào 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


    
16

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




    
    
    
    Web form


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



    
    
    
    Web form


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



    
    
    
    Web form


    
71

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




    
    
    
    Web form


    
6

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

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




    
    
    
    Web form


    
72

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




    
    
    
    Web form


    
73

Cách tạo thông tin văn bản bắt buộc

Bạn có thể làm cho nó sao cho một số trường nhất định là bắt buộc và người dùng cần điền vào

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

Đây là tính năng hiển thị thông báo nếu người dùng chưa điền vào các trường bắt buộc hoặc nhập sai thông tin. Đ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 để kích hoạt tính năng này là thêm thuộc tính




    
    
    
    Web form


    
74 vào phần tử
 

5. Thuộc tính này không cần phải có 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 cần phải thêm các phần tử theo một thứ tự nhất định




    
    
    
    Web form


    
2

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

Làm thế nào để bạn có được đầu vào trong html?

Một thông báo 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 bắt buộc chưa được hoàn thành

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

Bạn có thể chỉ định số 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


    
77

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


    
4

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ự

Làm thế nào để bạn có được đầu vào 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


    
78

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




    
    
    
    Web form


    
77 và



    
    
    
    Web form


    
78 có thể 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ự

Làm thế nào để Web form
81 Điều khiển biểu mẫu

Cho đến nay, tôi đã sử dụng phần tử




    
    
    
    Web form


    
82 để viết một số văn bản trước hộp văn bản, theo cách này sẽ nhắc 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à cách 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 là mỗi trường văn bản, phải có phần tử




    
    
    
    Web form


    
83 của riêng nó

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

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




    
    
    
    Web form


    
15 vào phần tử



    
    
    
    Web form


    
83 như vậy




    
    
    
    Web form


    
1

Làm thế nào để bạn có được đầu vào trong html?

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




    
    
    
    Web form


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

5

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




    
    
    
    Web form


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



    
    
    
    Web form


    
83 và thuộc tính



    
    
    
    Web form


    
10 được thêm vào
 

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

Giá trị của




    
    
    
    Web form


    
88 sẽ giống với



    
    
    
    Web form


    
10




    
    
    
    Web form


    
2

Sự kết luận

Tóm lại, để tạo trường nhập văn bản trong HTML, bạn cần ít nhất

  • Phần tử
     
    
    
    5, thường nằm bên trong phần tử
    
    
    
        
        
        
        Web form
    
    
        
    3
  • Để đặt thuộc tính
     
    
    
    8 có giá trị là
    
    
    
        
        
        
        Web form
    
    
        
    17. Điều này sẽ tạo ra một trường nhập văn bản một dòng
  • Đừng quên thêm thuộc tính
    
    
    
        
        
        
        Web form
    
    
        
    16. Đ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 chỉ 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 đã đọc và mã hóa hạnh phúc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Làm thế nào để bạn có được đầu vào trong html?
Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó


Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã 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