Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
22 Input Type HTML5

22 Input Type HTML5


Ngày 24 Tháng 11 Năm 2021

Trong bài viết hôm nay mình sẽ giới thiệu đến bạn một số loại input được giới thiệu trong phiên bản HTML dành cho thiết kế và phát triển website nha.

Input Trong Website Là Gì?

Thẻ <input> là một trong những phần tử quan trọng nhất của phiên bản HTML5. Nó được sử dụng nhiều nhất trong quá trình thu nhận dữ liệu từ người dùng và thường kết hợp với element form. Trong bài viết hôm nay mình sẽ giới thiệu đến bạn hơn 20 input type html cho website nha.

1)Type=Text

Là kiểu định dạng mặc định thường sử dụng trong ô input với cú pháp như sau:

<input type="text">

Ô input này có các thuộc tính đi kèm là :

  • placeholder: Chữ hiển thị khi ô input trống.
  • size: Xác định chiều rộng của ô input.
  • spellcheck: Kiểm tra lỗi chính tả (giá trị là true hoặc false).
  • minlength: Xác định số ký tự tối thiểu.
  • maxlength: Xác định số ký tự tối đa.
  • readonly: Nếu true thì ô input chỉ đọc không cho phếp chỉnh sửa.
  • pattern: Dùng để áp dụng regular expression.

2)Type=password

Dùng để xác định mật khẩu và sẽ không hiển thị chữ ra ngoài ô input mà sẽ bị che bởi các dấu chấm tròn. Nó có đầy đử thuộc tính gần giống như ô input text chỉ khác là không sử dụng được với attribute spellcheck.

<input type="password">

3)Type=email

Dùng để xác định email. Nó có chức năng giúp bạn kiểm tra email của người dùng có hợp lệ hay không. Ngoài ra nếu như bạn dùng thuộc tính multiple thì sẽ cho phép người dùng nhập nhiều email cùng một lúc và ngăn cách nhau bằng dấu phẩy.

<input type="email">

4)Type=number

Chỉ cho phép nhập số vào ô input.

<input type="number">

Ngoài cung cấp các thuộc tính cơ bản thì nó còn có các điểm đặc biệt khác như là:

  • min: Xác định giá trị nhỏ nhất.
  • max: Xác định giá trị lớn nhất.
  • step: Thông thường khi sử dụng input này thì các trình duyệt sẽ cung cấp cho người dùng thêm nút mũi tên lên(tăng giá trị) và mũi tên xuống(giảm giá trị). Step chính là giá trị cộng thêm hay trừ đi khi nhấp vào các mũi tên đó.

5)Type=search

Nó cũng giống như dạng input text thông thường. Điểm khác biệt chính của nó là cung cấp thêm chức năng xoá văn bản.

<input type="search">

6)Type=color

Sẽ hiển thị bảng màu cho phép người dùng có thể chọn màu mình yêu thích.

<input type="color">

7)Type=date

Cho phép người dùng nhập ngày tháng năm với kiểu định dạng mặc định là CCYY-MM-DD(Năm-Tháng-Ngày).

<input type="date">

8)Type=tel

Xác định số điện thoại của người dùng. Sẽ hiển thị bàn phím điện thoại trong các thiết bị cung cấp bàn phím động. Nó không có chức năng xác định sô diện thoại hợp lệ hay không như type=email. Do đó bạn cần sử dụng thuộc tính pattern trông input để kiểm tra nhé.

<input type="tel">

9)Type=file

Cho phép người dùng tải lên các file từ máy tính.

<input type="file">

Nó có các thuộc tính chính sau:

  • multiple: Cho phép người dùng có thể tải lên nhièu file cùng một lúc.
  • accept: Xác định loại file có thể tải lên.
  • capture: Cho phép sử dụng camera để chụp và tải hình ảnh lên.

10)Type=range

Cho phép người dùng có thể chọn giá trị trong phạm vi nào đó bằng thanh trượt.

<input type="range">

11)Type=url

Xác định url nhập từ người dùng. Nó sẽ tự động kiểm tra xem url có hợp lệ hay không.

<input type="url">

12)Type=checkbox

Cho phép người dùng có thể chọn một hay nhiều lựa chọn trong danh sách được cung cấp.

<input type="checkbox">

13)Type=radio

Chỉ cho phép người dùng chọn một giá trị trong danh sách được cung cấp. Thường được sử dụng thay thế cho submit button.

<input type="radio">

14)Type=button

Giúp tạo giao diện cho ô input giống với button và không có chức năng nào cả.

<input type="button">

15)Type=submit

Có chức năng gủi dữ liệu trong form đến server để xử lý.

<input type="submit">

16)Type=reset

Có chức năng sẽ trả về giá trị mặc dịnh của form.

<input type="reset">

17)Type=image

Giúp bạn thiết kế button dưới dạng hình ảnh.

<input type="image">

Nó có các thuộc tính chính sau:

  • height: xác định chiều cao hình ảnh.
  • width: xác định chiều rộng hình ảnh.
  • src: xác định nguồn lưu trữ hình ảnh.
  • alt: xác định văn bản khi không thể hiển thị hình ảnh.

18)Type=week

Chỉ cho phép người dùng chọn tuần nhất định trong date picker của HTML5.

<input type="week">

19)Type=month

Chỉ cho phép người dùng chọn tháng nhất định trong date picker của HTML5.

<input type="month">

20)Type=datetime-local

Chỉ cho phép người dùng nhập giá trị ngày tháng năm giờ trong ô input.

<input type="datetime-local">

21)Type=time

Chỉ cho phép người dùng nhập giá trị giờ và phút.

<input type="time">

22)Type=hidden

Thiết lập ô input sẽ không hiển thị khi người dùng sử dụng form.

<input type="hidden">

Mình có một số thuộc tính mà bạn cần lưu ý khi sử dụng cho ô input trong HTML:

  • autocomplete: cho phép chữ năng tự động hoàn thành.
  • autofocus: tự động focus ô input khi load trang.
  • name: tên của ô input.
  • required: yêu cầu ô input phải được nhập dữ liệu trước khi submit.
  • value: giá trị hiện tại của ô input.

Nếu bạn muốn xem các ví dụ chi tiết thì truy cập trang MDN.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những loại input type HTML5 cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.