Loại đầu vào HTML

Chương này mô tả loại đầu vào của thẻ <input>.

Loại đầu vào: text

<input type="text"> Định nghĩa cung cấpNhập văn bảntrường nhập đơn dòng:

Ví dụ

<form>
 Tên:<br>
<input type="text" name="firstname">
<br>
 Họ:<br>
<input type="text" name="lastname">
</form>

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Tên:


Họ:

Loại đầu vào: password

<input type="password"> định nghĩaTrường mật khẩu：

Ví dụ

<form>
 Tên người dùng:<br>
<input type="text" name="username">
<br>
 Mật khẩu người dùng:<br>
<input type="password" name="psw">
</form>

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Tên người dùng:


Mật khẩu người dùng:

Chú ý:ký tự trong trường mật khẩu sẽ được xử lý mã hóa (hiển thị dưới dạng dấu sao hoặc hình tròn đầy).

Loại đầu vào: submit

<input type="submit"> định nghĩaGửidữ liệu biểu mẫu đếnChương trình xử lý biểu mẫunút.

Chương trình xử lý biểu mẫu (form-handler) thường là trang web máy chủ chứa các đoạn mã xử lý dữ liệu đầu vào.

Trong thuộc tính action của biểu mẫu quy định trình xử lý biểu mẫu (form-handler):

Ví dụ

<form action="action_page.php">
Tên:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Họ:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Tên:


Họ:


Nếu bạn bỏ qua thuộc tính value của nút gửi, nút sẽ nhận được văn bản mặc định:

Ví dụ

<form action="action_page.php">
Tên:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Họ:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Thử trực tiếp

Loại đầu vào: radio

<input type="radio"> Định nghĩa nút radio.

Các nút radio cho phép người dùng chọn CHỈ MỘT lựa chọn từ số lượng lựa chọn có hạn:

Ví dụ

<form>
<input type="radio" name="sex" value="male" checked>Nam
<br>
<input type="radio" name="sex" value="female">Nữ
</form>

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Nam

Nữ

Loại đầu vào: hộp kiểm

<input type="checkbox"> Định nghĩa hộp kiểm.

Hộp kiểm cho phép người dùng chọn từ số lượng lựa chọn có hạn một hoặc nhiều lựa chọn.

Ví dụ

<form>
<input type="checkbox" name="vehicle" value="Bike">Tôi có một xe đạp
<br>
<input type="checkbox" name="vehicle" value="Car">Tôi có một xe ô tô 
</form>

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Tôi có một xe đạp

Tôi có một xe ô tô

Loại đầu vào: nút

<input type="button"> định nghĩanút。

Ví dụ

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

Thử trực tiếp

Mã HTML trên sẽ trông như thế này trong trình duyệt:

Loại nhập liệu HTML5

HTML5 đã thêm nhiều loại nhập liệu mới:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Chú ý:Các loại nhập liệu cũ không được trình duyệt web cũ hỗ trợ sẽ được coi là loại nhập liệu text.

Loại nhập liệu: number

<input type="number"> Dùng cho trường nhập liệu cần chứa giá trị số.

Bạn có thể đặt giới hạn cho số.

Dựa trên hỗ trợ của trình duyệt, giới hạn có thể được áp dụng cho trường nhập liệu.

Ví dụ

<form>
  Số lượng (giữa 1 và 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Thử trực tiếp

Giới hạn nhập liệu

Dưới đây là một số giới hạn nhập liệu phổ biến (một số là mới thêm vào HTML5):

Thuộc tính Mô tả
disabled Đặt trường nhập liệu nên bị vô hiệu hóa.
max Đặt giá trị lớn nhất của trường nhập liệu.
maxlength Đặt số ký tự tối đa của trường nhập liệu.
min Đặt giá trị nhỏ nhất của trường nhập liệu.
pattern Đặt biểu thức chính quy kiểm tra giá trị nhập liệu.
readonly Đặt trường nhập liệu là chỉ đọc (không thể sửa đổi).
required Đặt trường nhập liệu là bắt buộc (phải điền).
size Đặt độ rộng của trường nhập liệu (theo ký tự).
step Đặt khoảng cách hợp lệ số cho trường nhập liệu.
value Đặt giá trị mặc định cho trường nhập liệu.

Bạn sẽ học thêm về các giới hạn nhập liệu trong chương tiếp theo.

Ví dụ

<form>
  Số lượng:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Thử trực tiếp

Loại nhập liệu: date

<input type="date"> Dùng cho trường nhập liệu cần chứa ngày.

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Ngày sinh:
  <input type="date" name="bday">
</form>

Thử trực tiếp

Bạn có thể thêm các giới hạn vào nhập liệu:

Ví dụ

<form>
  Nhập ngày trước 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Nhập ngày sau 2000-01-01:
  Enter a date after 2000-01-01:<br>
</form>

Thử trực tiếp

Loại đầu vào: color

<input type="color"> Dùng cho trường nhập nên chứa màu.

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn màu sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Chọn màu yêu thích của bạn:
  <input type="color" name="favcolor">
</form>

Thử trực tiếp

Loại đầu vào: range

<input type="range"> Dùng cho trường nhập nên chứa giá trị trong một khoảng nhất định.

Dựa trên khả năng hỗ trợ của trình duyệt, trường nhập có thể hiển thị như thanh trượt.

Ví dụ

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Thử trực tiếp

Bạn có thể sử dụng các thuộc tính sau để quy định giới hạn: min, max, step, value.

Loại đầu vào: month

<input type="month"> Cho phép người dùng chọn tháng và năm.

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Ngày sinh (tháng và năm):
  <input type="month" name="bdaymonth">
</form>

Thử trực tiếp

Loại đầu vào: week

<input type="week"> Cho phép người dùng chọn tuần và năm.

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Chọn một tuần:
  <input type="week" name="week_year">
</form>

Thử trực tiếp

Loại đầu vào: time

<input type="time"> Cho phép người dùng chọn giờ (không có múi giờ).

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn giờ sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Chọn một giờ:
  <input type="time" name="usr_time">
</form>

Thử trực tiếp

Loại đầu vào: datetime

<input type="datetime"> Cho phép người dùng chọn ngày và giờ (với múi giờ).

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Ngày sinh (ngày và giờ):
  <input type="datetime" name="bdaytime">
</form>

Thử trực tiếp

Loại đầu vào: datetime-local

<input type="datetime-local"> Cho phép người dùng chọn ngày và giờ (không có múi giờ).

Dựa trên khả năng hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập.

Ví dụ

<form>
  Ngày sinh (ngày và giờ):
  <input type="datetime-local" name="bdaytime">
</form>

Thử trực tiếp

Loại đầu vào: email

<input type="email"> Dùng cho trường đầu vào nên chứa địa chỉ email.

Dựa trên hỗ trợ trình duyệt, có thể tự động xác minh địa chỉ email khi submit.

Một số điện thoại thông minh sẽ nhận diện loại email và thêm ".com" vào bàn phím để khớp với đầu vào email.

Ví dụ

<form>
  Email:
  <input type="email" name="email">
</form>

Thử trực tiếp

Loại đầu vào: search

<input type="search"> Dùng cho trường tìm kiếm (trường tìm kiếm có biểu hiện tương tự như trường văn bản thông thường).

Ví dụ

<form>
  Tìm kiếm Google:
  <input type="search" name="googlesearch">
</form>

Thử trực tiếp

Loại đầu vào: tel

<input type="tel"> Dùng cho trường đầu vào nên chứa số điện thoại.

Chỉ có Safari 8 hỗ trợ loại tel.

Ví dụ

<form>
  Điện thoại:
  <input type="tel" name="usrtel">
</form>

Thử trực tiếp

Loại đầu vào: url

<input type="url"> Dùng cho trường đầu vào nên chứa địa chỉ URL.

Dựa trên hỗ trợ trình duyệt, có thể tự động xác minh trường URL khi submit.

Một số điện thoại thông minh nhận diện loại URL và thêm ".com" vào bàn phím để khớp với đầu vào URL.

Ví dụ

<form>
  Thêm trang chủ của bạn:
  <input type="url" name="homepage">
</form>

Thử trực tiếp