Loại đầu vào HTML

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

Loại đầu vào: text

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

Mô hình

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

Thử ngay

Mã HTML trên sẽ xuất hiện như sau 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：

Mô hình

<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ử ngay

Mã HTML trên sẽ xuất hiện như sau trong trình duyệt:

Tên người dùng:


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

Ghi 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 điểm tròn).

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ẫucủa nú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 vân bản 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):

Mô hình

<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ử ngay

Mã HTML trên sẽ xuất hiện như sau 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:

Mô hình

<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ử ngay

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 trong số các lựa chọn có sẵn:

Mô hình

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

Thử ngay

Mã HTML trên sẽ xuất hiện như sau trong trình duyệt:

Nam

Nữ

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

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

Các hộp kiểm tra cho phép người dùng chọn từ không có đến nhiều hơn một trong số các tùy chọn có sẵn.

Mô hình

<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ử ngay

Mã HTML trên sẽ xuất hiện như sau 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。

Mô hình

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

Thử ngay

Mã HTML trên sẽ xuất hiện như sau 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:

  • màu sắc
  • date
  • datetime
  • datetime-local
  • email
  • tháng
  • số
  • phạm vi
  • tìm kiếm
  • số điện thoại
  • thời gian
  • đường dẫn
  • tuần

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

Loại nhập liệu: number

<input type="number"> Để sử dụng trong trường nhập liệu nên chứa giá trị số.

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

Dựa trên khả năng 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.

Mô hình

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

Thử ngay

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 (certainly một số được thêm vào HTML5):

Thuộc tính Mô tả
Vô hiệu hóa Đặt trường nhập liệu nên bị vô hiệu hóa.
Lớn nhất Đặt giá trị lớn nhất của trường nhập liệu.
Tối đa ký tự Đặt số ký tự tối đa của trường nhập liệu.
Nhỏ nhất Đặt giá trị nhỏ nhất của trường nhập liệu.
Biểu thức chính quy Đặt biểu thức chính quy để kiểm tra giá trị nhập liệu.
Chỉ đọc Đặt trường nhập liệu là chỉ đọc (không thể thay đổi).
Bắt buộc Đặt trường nhập liệu là bắt buộc (phải điền).
Kích thước Đặt độ rộng của trường nhập liệu (theo ký tự).
Bước Đặt khoảng cách hợp lệ số của trường nhập liệu.
Giá trị Đặ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.

Mô hình

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

Thử ngay

Loại nhập liệu: date

<input type="date"> Để sử dụng trong trường nhập liệu nên chứa ngày.

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

Mô hình

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

Thử ngay

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

Mô hình

<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ử ngay

Loại nhập liệu: color

<input type="color"> Sử dụng cho trường nhập liệu cần chứa màu.

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

Mô hình

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

Thử ngay

Loại nhập liệu: range

<input type="range"> Sử dụng cho trường nhập liệu cần chứa giá trị trong một phạm vi nhất định.

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

Mô hình

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

Thử ngay

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

Loại nhập liệu: month

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

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

Mô hình

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

Thử ngay

Loại nhập liệu: week

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

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

Mô hình

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

Thử ngay

Loại nhập liệu: time

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

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

Mô hình

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

Thử ngay

Loại nhập liệu: 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 hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập liệu.

Mô hình

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

Thử ngay

Loại nhập liệu: 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 hỗ trợ của trình duyệt, trình chọn ngày sẽ xuất hiện trong trường nhập liệu.

Mô hình

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

Thử ngay

Loại đầu vào: email

<input type="email"> Dành 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 gửi.

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.

Mô hình

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

Thử ngay

Loại đầu vào: search

<input type="search"> Dành 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).

Mô hình

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

Thử ngay

Loại đầu vào: tel

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

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

Mô hình

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

Thử ngay

Loại đầu vào: url

<input type="url"> Dành 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 gửi.

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.

Mô hình

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

Thử ngay