HTML 09 – Form

0
94

1. Form là gì

Một website nếu muốn tương tác với người dùng, muốn nhận dữ liệu thông tin từ người dùng thì biểu mẫu form chính xác là thứ mà website đó cần dùng. Thông qua form, người dùng có thể gửi được thông tin cho hệ thống hay người quản trị hệ thống. Một số loại form hay được tạo ra trên website như: Form đăng nhập, Form đăng ký, Form bình luận, Form liên hệ…

Để bắt đầu làm việc với form , chúng ta sử dụng cặp thẻ <form></form>. Form có các thuộc tính như : name, action và method các thuộc tính này đều được sử dụng để kết hợp với ngôn ngữ lập trình PHP.

2. Các phần tử trong form

a. Phần tử Textbox

Phần tử này cho ta một ô textbox để nhập giá trị, ví dụ như username hoặc email…
Để khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”text”. Ngoài ra , hầu hết các thẻ input luôn có các thuộc tính name để đặt tên cho phần tử và value xác định giá trị của phần tử.

b. Phần tử Password

Phần tử này cho ta một ô textbox để nhập giá trị và giá trị sẽ hiển thị ở dạng các dấu “*”.
Tương tự như phần tử textbox, khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”password”.

c. Phần tử Checkbox

Phần tử này cho ta một ô tích vuông, cho phép ta có lựa chọn hoặc là không lựa chọn bằng cách tích hoặc không tích vào ô tích.
Khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”checkbox”. Nếu ta muốn mặc định ô tích đã được tích vào thì sử dụng thuộc tính checked=”checked”.

d. Phần tử Radio

Phần tử này cho ta một ô tích tròn.
Khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”radio”, và thuộc tính checked tương tự như checkbox.

e. Phần tử File

Phần tử này cho phép người dùng có thể upload file lên hệ thống.
Khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”file”. Thẻ input này không có thuộc tính value.

f. Phần tử Submit

Phần tử này cho ta một nút nhấn, người dùng có thể từ đó nhấn gửi thông tin cho hệ thống.
Khai báo phần tử này ta sử dụng thẻ <input> với thuộc tính type=”submit”.

g. Phần tử TextArea

Phần tử này cho ta một khung để nhập dữ liệu.
Khai báo phần tử này ta sử dụng cặp thẻ <textarea></textarea>. Các thuộc tính của cặp thẻ này gồm : name để đặt tên cho phần tử, cols để quy định độ rộng của phần tử, rows quy định chiều cao của phần tử(giá trị là số nguyên dương).

h. Phần tử Select

Phần tử này cho ta một danh sách xổ xuống các lựa chọn có sẵn do ta định nghĩa giá trị. Bên trong cặp thẻ này có các cặp thẻ <option></option> để đặt các lựa chọn khác nhau.

Ví dụ:

See the Pen vp_form_examp by Thien (@anhtomks) on CodePen.0

 

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here