Mẫu biểu (form) - http://kinglazy.tk

Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ... Mẫu biểu được bắt đầu bằng thẻ
. Giữa 2 cặp thẻ này, các bạn có thể sử dụng các cặp thẻ HTML khác. Thẻ form có một số thuộc tính sau:
- method: Thuộc tính này có 2 giá trị POST hoặc GET, để xác định dữ liệu gửi lên theo kiểu POST hay GET. Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô Address dưới dạng các căp tên=giá_tri. Nhược điểm của kiểu này là toàn bộ cái URL và xâu tên=giá_trị kia sẽ bị giới hạn dưới255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi nhiềudữ liệu hơn, người ta đã sinh ra kiểu POST. Với kiểu này, dữ liệu sẽ không bị giới hạn chiều dài 255 ký tự của chuỗi địa chỉ do không bị gộp vào chuỗi địa chỉ. Kiểu POST cũng thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô Address (password chẳng hạn).
- action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tínhnày không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó trình duyệt sẽ tải lại nội dung mới). Ví dụ:
Mã PHP: < form method = "post" action = "http://TaiLieuSo1.Org" > forum >
Tuy nhiên, 2 ví dụ trên chưa có ý nghĩa gì, vì chúng ta chưa trang bị các thành phần cơ bản của form như ô văn bản, nút bấm... Các thẻ nhập vào (input) Thẻ input có một số thuộc tính, mỗi thuộc tính sẽ quy định nhữngchức năng riêng:
- name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.
- Value: Xác định giá trị đặt trước cho thẻ.
- type:Thuộc tính này có một số giá trị sau:
* submit: Sẽ xác định một nút bấm (submit) mà khi kích chuột vào đó, form sẽ tự động kích hoạtvà gửi dữ liệu đi
* text: Hiển thị một ô văn bản chophép người sử dụng nhập văn bản
* password: Hiển thị ô văn bản để nhập password.
* hidden: Tạo một biến ẩn, ta có thể dùng nó để lưu trữ các dữ liệu "ẩn" khỏi người dùng, tất nhiên nếu họ biết View source lên thì chịu.
Ví dụ: đoạn mã sau sinh ra một form có 1 ô văn bản, một ô nhập mật khẩu và 1 nút bấm:
Mã PHP: < form method = "POST" > < p > User Name : < input type = "text" name = "T1" size = "20" > p > < p > Password : < input type = "password" name = "T2" size = "20" > p > < p > < input type = "submit" value = "Login" name = "B1" > p > form >
Thẻ tạo hộp chọn xổ xuống: Danh sách sổ xuống là một ô danh sách cho phép bạn kích chọn 1 mục trong danh sách sẵn có. Để tạo một hộp chọn sổ xuống, taphải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:
Mã PHP: < Select name = xxx > < option value = gia_trí1 > nội dung 1 option > < option value = gia_trí2 > nội dung 2 option > < option value = gia_trí3 > nội dung 3 option > < option value = gia_trín > nội dung n option > select >
Trong đó: Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh sách sổ xuống. Các thẻ option xác định giá trị của tên biến trong thẻ select nếu được chọn. Giá trị sẽ được gán vào biến nằm trong thuộc tính value của thẻ option.
Mã PHP: < form method = "POST" > < p > User Name : < input type = "text" name = "T1" size = "20" > p > < p > Password : < input type = "password" name = "T2" size = "20" > p > < p > Sex : < Select name = "sex" > < option value = 1 > Male option > < option value = 0 > Female option > select > p > < p > < input type = "submit" value = "Login" name = "B1" > p > form >
Khi người dùng kích chọn Male, giá trị 1 sẽ được chuyển vào biến sex (được định nghĩa trong thẻ Select>).
Các thẻ lựa chọn radio: Các thẻ này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép kích chọn 1 trong các nút đó. Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
Mã PHP: < input type = "radio" value = "" name = "R1" >
Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:
Mã PHP: < input type = radio name = "switcher" value = "OFF" > < input type = radio name = "switcher" checked value = "TELEX" > < input type = radio name = "switcher" value = "VNI" >
Thẻ nhập khối văn bản Thẻ input với thuộc tính type = text chỉ cho phép ta hiển thị ra một ô văn bản nhỏ (hiện được 1 dòng). Để hiện ra một ô soạn thảo lớn, có thể hiển thị nhiều dòng đồng thời, ta phải dùng thẻ textarea