Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu

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ẻ

và kết thúc bởi 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ưới 255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi nhiều dữ 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).

Ví dụ:

Code:

<form method = "post" action ="thu2ti.php"> Thử hai tí 
</form>

- 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ính nà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).

Code:


<form method = "post" action ="thu2ti.php"> Thử hai tí 
</form> 

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ững chứ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:

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...

1. 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ạt và gửi dữ liệu đi
   text: Hiển thị một ô văn bản cho phé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:

Code:

<form method="POST"> 
<p>User Name:<input type="text" name="T1" size="20"> </p> 
<p>Password:<input type="password" name="T2" size="20"><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, ta phải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:

Code:

<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.

Ví dụ:

Code:


<form method="POST"> 
<p>User Name:<input type="text" name="T1" size="20"> </p> 
<p>Password:<input type="password" name="T2" size="20"><input type="submit" value="Login" name="B1"></p> 
<p>Sex: <Select name ="sex"> 
<option value =1>Male </option> 
<option value =0>Female </option> 
</select> 
</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:

Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:

Code:

<input type=radio name="switcher" value="OFF" >Tắt 
<input type=radio name="switcher" checked value="TELEX" >Telex 
<input type=radio name="switcher" value="VNI"> 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: Giá trị mặc định của khối văn bản

Còn một số cặp thẻ khác, nhưng ít nhất thì tôi cũng không nhớ ra tại thời điểm này. Các bạn có thể vào FrontPage, sau đó sử dụng menu Insert/Form để chèn các thành phần này vào, sau đó các bạn có thể vào xem và thay đổi các thuộc cơ bản của chúng. Còn bây giờ, chúng ta quay lại với việc lấy dữ liệu của PHP:

Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $HTTP_POST_VARS[]. Mảng này có chỉ số chính là tên của các phần tử trong form và giá trị là nội dung giá trị do người sử dụng nhập vào các phần tử có tên tương ứng. Chẳng hạn với mẫu biểu sau:

Code:

<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> 
<input type="submit" value="Gui di" name="B1"> 
</form> 

Nguồn phpvn.org