Cách thêm biểu mẫu bằng KompoZer

01 trên 06

Thêm một biểu mẫu với KompoZer

Có nhiều lần khi bạn tạo trang web mà bạn cần xử lý dữ liệu đầu vào do người dùng gửi, chẳng hạn như trang đăng nhập, tạo tài khoản mới hoặc gửi câu hỏi hoặc nhận xét. Đầu vào của người dùng được thu thập và gửi đến máy chủ web bằng cách sử dụng biểu mẫu HTML. Các biểu mẫu dễ dàng thêm vào với các công cụ tích hợp của KompoZer. Tất cả các kiểu trường mẫu mà hỗ trợ HTML 4.0 có thể được thêm và chỉnh sửa bằng KompoZer, nhưng đối với hướng dẫn này, chúng ta sẽ làm việc với các vùng văn bản, vùng văn bản, gửi và thiết lập lại.

02/06

Tạo một mẫu mới với KompoZer

KompoZer có các công cụ tạo biểu mẫu phong phú mà bạn có thể sử dụng để thêm biểu mẫu vào các trang web của mình. Bạn truy cập các công cụ biểu mẫu bằng cách nhấp vào nút Biểu mẫu hoặc trình đơn thả xuống đi kèm trên thanh công cụ. Lưu ý rằng nếu bạn không viết kịch bản xử lý biểu mẫu của riêng mình, bạn sẽ cần nhận một số thông tin cho bước này từ tài liệu hoặc từ lập trình viên đã viết kịch bản lệnh. Bạn cũng có thể sử dụng các biểu mẫu mailto nhưng chúng không phải lúc nào cũng hoạt động .

1. Định vị con trỏ của bạn ở vị trí mà bạn muốn biểu mẫu xuất hiện trên trang.
2. Nhấp vào nút Biểu mẫu trên thanh công cụ. Hộp thoại Thuộc tính biểu mẫu mở ra.
3. Thêm tên cho biểu mẫu. Tên được sử dụng trong mã HTML được tạo tự động để xác định biểu mẫu và được yêu cầu. Bạn cũng cần lưu trang của mình trước khi có thể thêm biểu mẫu. Nếu bạn đang làm việc với một trang mới chưa được lưu, KompoZer sẽ nhắc bạn lưu lại.
4. Thêm URL vào tập lệnh sẽ xử lý dữ liệu biểu mẫu trong trường URL hành động. Trình xử lý biểu mẫu thường là các tập lệnh được viết bằng PHP hoặc ngôn ngữ phía máy chủ tương tự. Nếu không có thông tin này, trang web của bạn sẽ không thể thực hiện bất kỳ điều gì với dữ liệu do người dùng nhập. KompoZer sẽ nhắc bạn nhập URL cho trình xử lý biểu mẫu nếu bạn không nhập.
5. Chọn Phương thức được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ. Hai lựa chọn là GET và POST. Bạn sẽ cần biết phương thức nào mà tập lệnh yêu cầu.
6. Nhấp vào OK và biểu mẫu được thêm vào trang của bạn.

03/06

Thêm một trường văn bản vào một biểu mẫu với KompoZer

Sau khi bạn đã thêm biểu mẫu vào trang bằng KompoZer, biểu mẫu sẽ được phác thảo trên trang bằng đường nét đứt màu xanh nhạt. Bạn thêm các trường biểu mẫu của bạn bên trong khu vực này. Bạn cũng có thể nhập văn bản hoặc thêm hình ảnh, giống như bạn thực hiện trên bất kỳ phần nào khác của trang. Văn bản hữu ích khi thêm lời nhắc hoặc nhãn để tạo thành các trường để hướng dẫn người dùng.

1. Chọn nơi bạn muốn trường văn bản đi vào khu vực biểu mẫu được nêu. Nếu bạn muốn thêm nhãn, trước tiên bạn có thể muốn nhập văn bản.
2. Nhấp vào mũi tên xuống bên cạnh nút Biểu mẫu trên thanh công cụ và chọn Trường biểu mẫu từ trình đơn thả xuống.
3. Cửa sổ Form Field Properties sẽ mở ra. Để thêm trường văn bản, hãy chọn Văn bản từ trình đơn thả xuống có gắn nhãn Loại trường.
4. Đặt tên cho trường văn bản. Tên được sử dụng để xác định trường trong mã HTML và kịch bản xử lý biểu mẫu cần tên để xử lý dữ liệu. Một số thuộc tính tùy chọn khác có thể được sửa đổi trên hộp thoại này bằng cách bật nút Thuộc tính / Ít thuộc tính hơn hoặc bằng cách nhấn nút Chỉnh sửa nâng cao, nhưng hiện tại chúng tôi sẽ chỉ nhập tên trường.
5. Nhấp vào OK và trường văn bản xuất hiện trên trang.

04/06

Thêm một vùng văn bản vào một biểu mẫu với KompoZer

Đôi khi, nhiều văn bản cần phải được nhập vào biểu mẫu, chẳng hạn như tin nhắn hoặc trường câu hỏi / nhận xét. Trong trường hợp này, một trường văn bản không phù hợp. Bạn có thể thêm trường biểu mẫu vùng văn bản bằng cách sử dụng các công cụ biểu mẫu.

1. Định vị con trỏ của bạn bên trong đường viền biểu mẫu nơi bạn muốn vùng văn bản của mình ở đó. Nếu bạn muốn nhập nhãn, bạn nên nhập văn bản nhãn, nhấn enter để di chuyển đến một dòng mới, sau đó thêm trường biểu mẫu, vì kích thước của vùng văn bản trên trang làm cho nó khó xử cho nhãn ở bên trái hoặc bên phải.
2. Nhấp vào mũi tên xuống bên cạnh nút Biểu mẫu trên thanh công cụ và chọn Khu vực văn bản từ trình đơn thả xuống. Cửa sổ Thuộc tính vùng văn bản sẽ mở ra.
3. Nhập tên cho trường vùng văn bản. Tên xác định trường trong mã HTML và được sử dụng bởi kịch bản xử lý biểu mẫu để xử lý thông tin do người dùng gửi.
4. Nhập số hàng và cột mà bạn muốn vùng văn bản hiển thị. Các thứ nguyên này xác định kích thước của trường trên trang và số lượng văn bản có thể được nhập vào trường trước khi cuộn cần phải xảy ra.
5. Có thể chỉ định các tùy chọn nâng cao hơn với các điều khiển khác trong cửa sổ này, nhưng hiện tại tên và kích thước trường là đủ.
6. Nhấp vào OK và vùng văn bản xuất hiện trên biểu mẫu.

05/06

Thêm nút gửi và đặt lại vào biểu mẫu bằng KompoZer

Sau khi người dùng điền vào biểu mẫu trên trang của bạn, cần phải có một số cách để thông tin được gửi tới máy chủ. Ngoài ra, nếu người dùng muốn bắt đầu lại hoặc mắc lỗi, sẽ rất hữu ích khi bao gồm một điều khiển sẽ đặt lại tất cả các giá trị biểu mẫu về mặc định. Điều khiển biểu mẫu đặc biệt xử lý các chức năng này, được gọi là nút Gửi và Đặt lại tương ứng.

1. Đặt con trỏ của bạn trong khu vực biểu mẫu được nêu ở nơi bạn muốn nút gửi hoặc đặt lại thành. Thông thường, những điều này sẽ được đặt bên dưới phần còn lại của các trường trên biểu mẫu.
2. Nhấp vào mũi tên xuống bên cạnh nút Biểu mẫu trên thanh công cụ và chọn Xác định nút từ trình đơn thả xuống. Cửa sổ Thuộc tính Nút sẽ xuất hiện.
3. Chọn loại nút từ trình đơn thả xuống có nhãn Loại. Lựa chọn của bạn là Gửi, Đặt lại và Nút. Trong trường hợp này, chúng tôi sẽ chọn loại Gửi.
4. Đặt tên cho nút, sẽ được sử dụng trong HTML và mã xử lý biểu mẫu để xử lý yêu cầu biểu mẫu. Các nhà phát triển web thường đặt tên trường này là "gửi".
5. Trong hộp có nhãn Giá trị, hãy nhập văn bản sẽ xuất hiện trên nút. Văn bản phải ngắn gọn nhưng mô tả về những gì sẽ xảy ra khi nhấn nút. Nội dung như “Gửi”, “Gửi biểu mẫu” hoặc “Gửi” là những ví dụ hay.
6. Nhấp vào OK và nút xuất hiện trên biểu mẫu.

Nút Đặt lại có thể được thêm vào biểu mẫu bằng cách sử dụng cùng một quy trình, nhưng chọn Đặt lại từ trường Loại thay vì Gửi.

06 trên 06

Chỉnh sửa biểu mẫu bằng KompoZer

Việc chỉnh sửa trường biểu mẫu hoặc biểu mẫu trong KompoZer rất dễ dàng. Chỉ cần nhấp đúp vào trường mà bạn muốn chỉnh sửa và hộp thoại thích hợp xuất hiện nơi bạn có thể thay đổi thuộc tính trường cho phù hợp với nhu cầu của mình. Sơ đồ trên cho thấy một biểu mẫu đơn giản sử dụng các thành phần được đề cập trong hướng dẫn này.