You are here

HTML guide 5: Form and action control components

Hướng dẫn HTML căn bản

Bài 5: Form và các thành phần điều khiển

Form có thể có các đối tượng điểu khiển như: Khung soạn văn bản, Danh sách lựa chọn, Nút bấm, Nút chọn, ô kiểm tra (check box),...

<FORM   
    ACTION= ulr   
    METHOD= GET | POST   
    NAME= name   
    TARGET= frame_name | _blank | _self > 
    <!-- Các phần tử điều khiển của form được đặt ở đây -->   
    <INPUT ...>   
    <INPUT ...>   
</FORM>

Trong đó:

ACTION= Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...)
METHOD= Phương thức gửi dữ liệu
NAME= Tên của form
TARGET= Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server

Các đối tượng điểu khiển bên trong “Form” được định ngĩa bằng các cặp thẻ <INPUT>

<INPUT   
ALIGN= LEFT | CENTER | RIGHT 
TYPE= BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | 
RADIO | RESET | SUBMIT | TEXT   
VALUE= value >

Ô nhập văn bản (text input):

<input TYPE=”text”> định nghĩa một ô nhập văn bản 1 dòng

Hãy làm ví dụ:

<form> 
   First name:<br> 
   <input type="text" name="firstname"><br> 
   Last name:<br> 
   <input type="text" name="lastname"> 
</form>

Nút chọn (radio button):

<input TYPE=”radio”> định nghĩa một “nút chọn” – người dùng chọn 1 trong số các đề xuất

<form> 
   <input type="radio" value="male"> Male<br> 
   <input type="radio" value="female"> Female<br> 
</form>

Ô kiểm tra (check box):

<input TYPE=”checkbox”> định nghĩa một danh sách các ô, người dùng có thể không chọn hoặc chọn nhiều lựa chọn bằng cách tích vào ô

<form> 
   <input type="checkbox" value="Bike"> I have a bike<br> 
   <input type="checkbox" value="Car"> I have a car   
</form>

Danh sách lựa chọn:

Tạo một danh sách dạng menu thả xuống, người dùng lựa chọn 1 đề xuất trong danh sách

<SELECT NAME="tên danh sách" SIZE="chiều cao">   
<option VALUE= "value1" SELECTED>Mục chọn 1</option> 
<option VALUE= "value2">Mục chọn thứ hai</option> 
</SELECT>

Tạo hộp soạn thảo văn bản

<TEXTAREA   
    COLS=số cột   
    ROWS=số hàng   
    NAME=tên > 
    Văn bản ban đầu   
</TEXTAREA>

Tạo một nút (button):

<input type="button" onclick="alert('Hello!')" value="Click Me">

Nút “Reset” sẽ khôi phục lại toàn bộ form về trạng thái ban đầu (xóa các lựa chọn)

<input type="reset" value="Reset">

Còn nút “Submit” sẽ thực hiện hành động xác định tại thuộc tính ACTION của form

Ví dụ: làm nút “Read more”

<form action="demo.html"> 
  <input type="submit" value="Read more"> 
</form>