Làm cách nào để tạo biểu mẫu có thể điền trong html?

Biểu mẫu HTML được yêu cầu để thu thập các loại đầu vào khác nhau của người dùng, chẳng hạn như chi tiết liên hệ như tên, địa chỉ email, số điện thoại hoặc chi tiết như thông tin thẻ tín dụng, v.v.

Các biểu mẫu chứa các phần tử đặc biệt được gọi là các điều khiển như hộp nhập, hộp kiểm, nút radio, nút gửi, v.v. Người dùng thường hoàn thành một biểu mẫu bằng cách sửa đổi các điều khiển của nó. g. nhập văn bản, chọn mục, v.v. và gửi biểu mẫu này tới máy chủ web để xử lý thêm

Các

thẻ được sử dụng để tạo biểu mẫu HTML. Đây là một ví dụ đơn giản về một hình thức đăng nhập

    Username: 
    Password: 
    

Phần sau đây mô tả các loại điều khiển khác nhau mà bạn có thể sử dụng trong biểu mẫu của mình

Yếu tố đầu vào

Đây là phần tử được sử dụng phổ biến nhất trong các biểu mẫu HTML

Nó cho phép bạn chỉ định nhiều loại trường nhập liệu của người dùng, tùy thuộc vào thuộc tính type. Một phần tử đầu vào có thể thuộc loại trường văn bản, trường mật khẩu, hộp kiểm, nút radio, nút gửi, nút đặt lại, hộp chọn tệp, cũng như một số loại đầu vào mới được giới thiệu trong HTML5

Các loại đầu vào được sử dụng thường xuyên nhất được mô tả bên dưới

Trường văn bản

Trường văn bản là vùng một dòng cho phép người dùng nhập văn bản

Điều khiển nhập văn bản một dòng được tạo bằng cách sử dụng phần tử , có thuộc tính type có giá trị là text. Đây là một ví dụ về kiểu nhập văn bản một dòng được sử dụng để lấy tên người dùng

    Username:
    

— Đầu ra của ví dụ trên sẽ giống như thế này

Ghi chú. Thẻ được sử dụng để xác định nhãn cho các phần tử . Nếu bạn muốn người dùng của mình nhập một số dòng, bạn nên sử dụng ____1_______1

— Đầu ra của ví dụ trên sẽ giống như thế này

---

Chọn hộp

Hộp chọn là danh sách tùy chọn thả xuống cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách tùy chọn kéo xuống. Hộp chọn được tạo bằng cách sử dụng phần tử

    Username:
    

2 xác định từng mục danh sách

    City:
    
        
        
        
    

— Đầu ra của ví dụ trên sẽ giống như thế này

---

Các nút gửi và đặt lại

Nút gửi được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ web. Khi nhấp vào nút gửi, dữ liệu biểu mẫu được gửi đến tệp được chỉ định trong thuộc tính

    Username:
    

3 của biểu mẫu để xử lý dữ liệu đã gửi

Nút đặt lại sẽ đặt lại tất cả các điều khiển biểu mẫu về giá trị mặc định. Hãy thử ví dụ sau bằng cách nhập tên của bạn vào trường văn bản và nhấp vào nút gửi để xem nó hoạt động

    First Name:
    
    
    

Nhập tên của bạn vào trường văn bản ở trên và nhấp vào nút gửi để xem nó hoạt động

Ghi chú. Bạn cũng có thể tạo các nút bằng phần tử . Các nút được tạo bằng chức năng phần tử giống như các nút được tạo bằng phần tử đầu vào, nhưng chúng cung cấp khả năng hiển thị phong phú hơn bằng cách cho phép nhúng các phần tử HTML khác

---

Nhóm điều khiển biểu mẫu

Bạn cũng nhóm các điều khiển và nhãn có liên quan một cách hợp lý trong một biểu mẫu web bằng cách sử dụng phần tử . Nhóm các điều khiển biểu mẫu thành các danh mục giúp người dùng dễ dàng xác định vị trí điều khiển giúp biểu mẫu thân thiện hơn. Hãy làm thử ví dụ sau để xem nó hoạt động như thế nào

    
        Contact Details
        Email Address: 
        Phone Number: 
    

---

Thuộc tính biểu mẫu thường được sử dụng

Bảng sau liệt kê các thuộc tính của phần tử biểu mẫu được sử dụng thường xuyên nhất

AttributeDescription_______1_______7Chỉ định tên của biểu mẫu.

    Username:
    

3Chỉ định URL của chương trình hoặc tập lệnh trên máy chủ web sẽ được sử dụng để xử lý thông tin được gửi qua biểu mẫu.

    Username:
    

9Chỉ định phương thức HTTP được trình duyệt sử dụng để gửi dữ liệu đến máy chủ web. Giá trị có thể là

    City:
    
        
        
        
    

0 (mặc định) và

    City:
    
        
        
        
    

1.

    City:
    
        
        
        
    

2Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Các giá trị có thể là

    City:
    
        
        
        
    

3,

    City:
    
        
        
        
    

4,

    City:
    
        
        
        
    

5 và

    City:
    
        
        
        
    

6.

    City:
    
        
        
        
    

7Chỉ định cách mã hóa dữ liệu biểu mẫu khi gửi biểu mẫu tới máy chủ. Chỉ áp dụng khi giá trị của thuộc tính

    Username:
    

9 là

    City:
    
        
        
        
    

1

Có một số thuộc tính khác, để biết về chúng, vui lòng xem

tham chiếu thẻ

Ghi chú. Thuộc tính

    Username:
    

7 đại diện cho tên của biểu mẫu trong bộ sưu tập biểu mẫu. Giá trị của nó phải là duy nhất trong số các biểu mẫu trong tài liệu và không được là một chuỗi rỗng

Mẹo. Tất cả dữ liệu được gửi qua phương thức

    City:
    
        
        
        
    

0 hiển thị trên thanh địa chỉ của trình duyệt. Tuy nhiên, dữ liệu được gửi qua

    City:
    
        
        
        
    

1 không hiển thị với người dùng. Vui lòng xem hướng dẫn về GET vs. POST để tìm hiểu chi tiết về sự khác biệt giữa hai phương thức HTTP này