Thẻ <input />

Đăng bởi: Admin

Định nghĩa và sử dụng

  • Tag <input /> được sử dụng cho người dùng nhập hay chọn thông tin.
  • Dạng của <input /> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, ...
  • Khuyên: sử dụng tag <label> để tạo nhãn cho các thành phần <input />

Sự khác nhau giữa HTML và XHTML

HTML4.01 XHTML1.0 XHTML1.1
Không cần kết thúc tag <input> Cần khoảng trắng và ký tự "/" để kết thúc tag <input />

Cấu trúc

Tag <input /> phải được viết bên trong một tag <form>

<form action="#">
<input type="" />
</form>

Ví dụ

Xem thêm ví dụ

Html viết:

<form action="#">
<ul>
<li>Họ tên: <input type="text" value="" size="30" /></li>
<li>Email: <input type="text" value="" size="30" /></li>
<li>Ngày sinh: <input type="text" value="" size="10" /></li>
</ul>
<p><input type="submit" value="Gửi" /></p>
</form>

Hiển thị trình duyệt:

  • Họ tên:
  • Email:
  • Ngày sinh:

Các loại (type) <input />

Input dạng text:

Sử dụng để nhập giá trị text.

<input type="text" name="" value="" size="30" />

Xem thêm ví dụ

Input dạng password:

Text hiển thị bên trong dưới dạng password.

<input type="password" name="" value="" size="30" />

Xem thêm ví dụ

Input dạng hidden:

Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.

<input type="hidden" name="" value="" size="30" />

Input dạng checkbox:

Được sử dụng cho nhiều lựa chọn khác nhau.

<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />


Xem thêm ví dụ

Input dạng radio:

Được sử dụng cho một chọn lựa duy nhất.
Các <input /> phải cùng "name", nếu không sẽ không chọn được.

<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value="" />


Xem thêm ví dụ

Input dạng button:

Sử dụng như một nút nhấn.

<input type="button" name="" value="Click" />

Input dạng button reset:

Dùng để reset lại giá trị trong <form>.

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

Input dạng button submit:

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

<input type="submit" name=""" value="Submit" />

Input dạng image:

Sử dụng như một nút nhấn bằng hình.

<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />

Input dạng file upload:

Sử dụng để upload file.

<input type="file" name="" />

Trình duyệt hỗ trợ

  • Internet Explorer 6
  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

<input /> được hỗ trợ trong đa số các trình duyệt.

Thuộc tính

Cách sử dụng: <input thuoctinh="giatri" />

Thuộc tính tùy chọn

Thuộc tính Giá trị Ví dụ Mô tả
accept kiểu MIME accept="image/gif" Xác định loại tập tin có thể được gửi thông qua một tập tin tải lên (upload) (sử dụng đối với type="file").
Không được hỗ trợ trong phần lớn các trình duyệt.
align left
right
top
middle
bottom		 align="left" Được dùng để sắp xếp vị trí cho image của <input /> (sử dụng đối với type="image").
Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế.
Không được hỗ trợ trong DTD Strict
alt Text alt="Đây là alt" Xác định alt cho image của <input /> (chỉ cho type="image")
checked checked  checked="checked" Xác định một thành phần <input /> được chọn trước khi tải trang (sử dụng đối với type="checkbox" hay type="radio")
disabled disabled disabled="disabled" Xác định một thành phần <input /> không hiển thị trước khi tải trang.
maxlength Số maxlength="50" Xác định số ký tự nhiều nhất được phép nhập của một trường <input /> (sử dụng đối với type="text" hay type="password")
name name name="inputName" Xác định tên cho thành phần <input />.
readonly readonly readonly="readonly" Xác định rằng trường <input /> chỉ được đọc (sử dụng đối với type="text" hay type="password")
size Số size="30" Xác định chiều rộng của một trường <input />.
src URL src="img/ btn_name.gif" Hiển thị đường dẫn của hình, hiển thị như một button submit.
type button type="button" Xác định loại hiển thị dạng nút nhấn.
checkbox type="checkbox" Xác định loại hiển thị dạng hộp kiểm.
file type="file" Xác định loại hiển thị dạng chọn file.
hidden type="hidden" Xác định loại hiển thị dạng ẩn.
image type="image" Xác định loại hiển thị dạng hình.
password type="password" Xác định loại hiển thị dạng password.
radio type="radio" Xác định loại hiển thị dạng chọn lựa.
reset type="reset" Xác định loại hiển thị dạng phục hồi.
submit type="submit" Xác định loại hiển thị dạng submit.
text type="text" Xác định loại hiển thị dạng text..
value Giá trị value="Gửi" Xác định giá trị của <input />.

Thuộc tính tổng quát (xem thêm)

Thuộc tính Giá trị Ví dụ Mô tả
accesskey Ký tự accesskey="g" Xác định một phím tắc để truy cập vào một thành phần.
class Tên class class="section" Tên class
dir rtl
ltr		 dir="rtl" Xác định hướng văn bản cho các nội dung trong một thành phần.
id Tên id id="layout" Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
lang Mã ngôn ngữ lang="vi" Xác định mã ngôn ngữ cho nội dung trong một thành phần.
style Kiểu định dạng style="color: red" Xác định một định dạng cho một thành phần.
tabindex Số tabindex="5" Xác định thứ tự tab của một thành phần.
title Text title="Đây là title" Xác định thêm thông tin cho thành phần.
xml:lang Mã ngôn ngữ lang="vi" Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

Thuộc tính sự kiện

Không được hỗ trợ trong DTD Strict

Thuộc tính Giá trị Ví dụ Mô tả
onclick Code script onclick="code" Script chạy khi click chuột.
ondblclick Code script ondblclick="code" Script chạy khi double click chuột.
onmousedown Code script onmousedown="code" Script chạy khi button chuột được nhấn.
onmousemove Code script onmousemove="code" Script chạy khi di chuyển con trỏ chuột.
onmouseout Code script onmouseout="code" Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
onmouseover Code script onmouseover="code" Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
onmouseup Code script onmouseup="code" Script chạy khi button chuột được thả ra.
onkeydown Code script onkeydown="code" Script chạy khi nút trên bàn phím được nhấn.
onkeypress Code script onkeypress="code" Script chạy khi nút trên bàn phím được nhấn và thả ra.
onkeyup Code script onkeyup="code" Script chạy khi nút trên bàn phím được thả ra.

Link liên quan


vncoder logo

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!

Chia sẻ bài viết