Hướng dẫn section in html form - phần ở dạng html
Khái niệm web formBiểu mẫu - web form - được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side.web form - được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side. Show form trong HTML được tạo ra bằng thẻ , bên trong form đó nó chứa một hoặc nhiều phần tử để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như: trong HTML được tạo ra bằng thẻ , bên trong form đó nó chứa một hoặc nhiều phần tử để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như:
Hầu hết các control (điều khiển) để người dùng nhập thông tin, dữ liệu được tạo ra bằng thẻ HTML và đi cùng nó thường là phần tử để tạo ra nhãn (tiêu đề) cho control. và đi cùng nó thường là phần tử để tạo ra nhãn (tiêu đề) cho control. Thẻ , tạo web form đầu tiênĐể tạo ra HTML Form thì dùng đến thẻ , sau đó nội dung trong thẻ trình bày các HTML và các phần tử là điều khiển (control) có trong form. , sau đó nội dung trong thẻ trình bày các HTML và các phần tử là điều khiển (control) có trong form. Thẻ cơ bản có hai thuộc tính cần lưu tâm là action và method:
Khi thông tin gửi tới địa chỉ máy chủ (địa chỉ trong thuộc tính action), thì dự liệu nhận được xử lý thế nào là việc của server, bạn sẽ thực hiện việc sử lý này khi lập trình backend với một ngôn ngữ lập trình nào đó như php, c# ... Ở đây, để nhanh chóng kiểm tra xem server nhận được dữ liệu FORM gửi đến như thế nào bạn có thể sử dụng httpbin hoặc gửi thẳng đến địa chỉ : 1 để kiểm tra FORM của mìnhviệc của server, bạn sẽ thực hiện việc sử lý này khi lập trình backend với một ngôn ngữ lập trình nào đó như php, c# ... Ở đây, để nhanh chóng kiểm tra xem server nhận được dữ liệu FORM gửi đến như thế nào bạn có thể sử dụng httpbin hoặc gửi thẳng đến địa chỉ : 1 để kiểm tra FORM của mìnhVí dụ tạo form htmlVí dụ FORM HTML sau yêu cầu người dùng điền tên đăng nhập, password và bấm vào nút 2 để gửi đi. 2 để gửi đi.(Bạn có thể điền thông tin và bấm vào nút đăng nhập để kiểm tra dữ liệu gửi đến server) Với FORM HTML trên, nó có ba điều khiển (control), đều được tạo ra từ thẻ chúng được đặt tên thông qua thuộc tính name gồm: name, pass, submit. Tên này coi như tên trường dữ liệu mà FORM sẽ gửi đi. Khi bấm gửi dữ liệu (submit dữ liệu) ở trên là nút (Đăng nhập) thì dữ liệu trong các control sẽ được gửi đi, khi gửi đi mỗi dữ liệu gồm tên và giá trị.name gồm: name, pass, submit. Tên này coi như tên trường dữ liệu mà FORM sẽ gửi đi. Khi bấm gửi dữ liệu (submit dữ liệu) ở trên là nút (Đăng nhập) thì dữ liệu trong các control sẽ được gửi đi, khi gửi đi mỗi dữ liệu gồm tên và giá trị. Giả sử bạn nhập vào tên là 3, mật khẩu là 4 rồi bấm vào Đăng nhập. Form trên gửi bằng phương thức get, do vậy dữ liệu trong FORM sẽ nằm trong cấu trúc URL gửi đến server. Bạn sẽ thấy ngay địa chỉ trình duyệt sẽ có dạng Đăng nhập. Form trên gửi bằng phương thức get, do vậy dữ liệu trong FORM sẽ nằm trong cấu trúc URL gửi đến server. Bạn sẽ thấy ngay địa chỉ trình duyệt sẽ có dạnghttps://httpbin.org/anything?name=test&pass=abcname=test&pass=abc Bạn thấy các dữ liệu trong thẻ 5 đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của 5 là: 7Trong trường hợp bạn chọn method là 0 thì sẽ không nhìn thấy dữ liệu biểu diễn qua URL như thế này mà dữ liệu được tích hợp vào cấu trúc của HTTP Request. Sẽ là ẩn với người dùng.Sửa lại ví dụ trên (đổi sang phương thức post), bạn thử submit lại để kiểm tra: Tạo nút bấm để gửi (submit) form HTML, reset formĐể có nút bấm submit, bấm vào đó dữ liệu của form được thu thập và gửi đi thì bạn có thể dùng thẻ hoặc thẻ : hoặc thẻ : Nút bấm bằng thẻThẻ là thẻ rỗng (không có đóng thẻ), cú pháp là Tạo nút bấm gửi (submit) thì cho thuộc tính type="submit", còn nhãn nút bấm thiết lập qua thuộc tính value="Text", Ví dụ:type="submit", còn nhãn nút bấm thiết lập qua thuộc tính value="Text", Ví dụ: Tạo nút bấm, bấm vào đó toàn bộ dữ liệu trong các control của FORM bị xóa đi về mặc định, để nhập lại thì thuộc tính type thiết lập bằng reset Chú ý, nếu các nút bấm trên bạn cho thêm thuộc tính name, ví dụ name="submit", name="reset" thì dữ liệu (trong value) của nút bấm cũng được gửi đi cùng các dữ liệu khác.name, ví dụ name="submit", name="reset" thì dữ liệu (trong value) của nút bấm cũng được gửi đi cùng các dữ liệu khác. Sử dụng thẻ tạo nút bấmThẻ chuyển tạo ra các điều khiển nút bấm trong HTML FORM, thẻ này có đóng thẻ, do vậy button có thể chứa nội dung phong phú để trình bày nút bấm hơn Để tạo ra nút bấm submit và reset tương tự như chỉ việc thiết lập giá trị submit hay reset cho thuộc tính typetype Thẻ tạo ra nút bấm trình bày phức tạp hơn, do nó chứa được nội dung HTML Phần sau sẽ tìm hiểu các phần tử trong FORM (các phần tử để nhập liệu). Các phần tử điều khiển trong FORMCác phần tử điều khiển trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, thông tin trong các điều khiển này sẽ được tập hợp lại để gửi đi, để tạo ra các điều khiển ta dùng các thẻ như: 9Tất nhiên trong FORM có thể chứa bất kỳ nội dung HTML nào, nhưng chỉ để trình bày,còn các HTML tạo control mới có chức năng nhập liệu. Ở đây chỉ trình bày nguyên tắc chính tạo control, còn chi tiết sử dụng từng loại thẻ xem ở các bài viết tương ứng cho từng thẻ đó. Mỗi phần tử là control của form để người dùng nhập dữ liệu thì phần tử đó cần có thuộc tính 0 là tên của phần tử, cũng là tên trường dữ liệu cần nhập, tên trường dữ liệu FORM sẽ gửi đi. Như ví dụ:Nó tạo ra một textbox, đặt tên là name, nó cũng là tên trường dữ liệu gửi đi. Trong control thiếu trường này, thì dù bạn nhập dữ liệu vào, thì nó cũng sẽ không được gửi đi. Để thêm các control cụ thể vào HTML Form, hãy xem chi tiết tại:
|