HTML5: <input>


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

Thẻ <INPUT>, theo đúng như nghĩa của tên thẻ nó được dùng cho vấn đề nhập liệu. <INPUT> là thành phần con của thẻ <FORM>, <INPUT> đưa ra các cách thức nhập liệu khác nhau thông qua thuộc tính type.

Dữ liệu nhập vào thẻ <INPUT> sẽ được lưu trữ vào thuộc tính VALUE của thẻ, thuộc tính ACCESSKEY dùng để đưa ra phím tắt khi muốn focus vào thẻ. Chẳng hạn nếu bạn đặt phím tắt là ACCESSKEY="H" thì bạn nhấn tổ hợp phím "Alt + H" sẽ focus được vào thẻ tương ứng, thuộc tính DISABLED dùng để ngăn cản sự tương tác giữa người dùng với thẻ, thuộc tính DIR có hai trá trị là ltr (left to right) để nhập dữ liệu theo hướng từ trái sang phải và rtl (right to left) dùng để nhập dữ liệu theo hướng từ phải sang trái. Dưới đây tôi sẽ trình bày chi tiết các kiểu (type) của <INPUT>.

1. text:

Kiểu text được dùng để nhập những mẩu dữ liệu nhỏ như họ và tên, địa chỉ, quê quán, mô tả ngắn, tiêu đề bình luận, tiêu đề phản hồi. Đây là một trong những kiểu hay được sử dụng nhất trong form dữ liệu.

Ví dụ:

Họ và tên: <INPUT TYPE="text" />

2. password:

Kiểu password dùng để nhập những giá trị cần tính bảo mật cao như mật khẩu.

Ví dụ:

Mật khẩu: <INPUT TYPE="password" />

3. checkbox:

Kiểu checkbox dùng để tạo hộp kiểm cho phép người dùng tích chọn. Thông thường trong một form sẽ có nhiều checkbox và người dùng có thể có quyền không chọn, chọn một hoặc nhiều checkbox.

Ví dụ:

Bạn có khả năng đối với ngôn ngữ lập trình nào?

<INPUT TYPE="checkbox" /> Ngôn ngữ C

<INPUT TYPE="checkbox" /> HDJ

<INPUT TYPE="checkbox" /> SQL

<INPUT TYPE="checkbox" /> PHP

4. file:

Kiểu file cho phép bạn chọn một file có phần mở rộng bất kỳ. HTML5 có thêm thuộc tính multiple áp dụng cho file để cho phép người dùng có thể chọn nhiều tập tin cùng lúc.

Ví dụ:

Mời bạn chọn một file: <INPUT TYPE="file" />

5. button:

Kiểu button sẽ tạo ra một nút lệnh, nút lệnh này khi được nhấn chọn sẽ không có tác dụng gì vì mặc định nó không được cài đặt bất kỳ sự kiện nào.

Ví dụ:

<INPUT TYPE="button" value="Nút lệnh" />

6. submit:

Kiểu submit dùng để tạo nút lệnh với tác dụng gửi dữ liệu của form (biểu mẫu) tới trang nhận. Kiểu submit thường dùng làm nút đăng ký tài khoản hoặc nút gửi feedback, ...

<INPUT TYPE="submit" value="Đăng ký" />

7. image:

Kiểu image cũng có tác dụng như kiểu submit là dùng để tạo nút lệnh với tác dụng gửi dữ liệu của form tới trang nhận. Tuy nhiên, ta có thể dùng một ảnh làm nền cho nút lệnh này. Ngoài ra, kèm theo form dữ liệu gửi đi là hai giá trị hoành độ x và tung độ y tương ứng với tọa độ của chuột tại vị trí click vào nút lệnh image.

<INPUT TYPE="image" value="Đăng ký" src="Nguồn_ảnh" />

» Tiếp: <nobr>
« Trước: <img>
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!