HTML/CSS | Phương thức tel, mailto

Học HTML, CSS từ Zero Tới Hero

• Liên kết tới số điện thoại
• Liên kết tới địa chỉ email

Ngoài việc được dùng để liên kết tới một URL thì thẻ <a> cũng có thể liên kết tới một số điện thoại, một địa chỉ email.

Sử dụng 2 phương thức trong thuộc tính href để làm điều này:

• mailto để liên kết tới một email. Ví dụ: mailto:example@gmail.com
• tel để liên kết tới một số điện thoại. Ví dụ: tel:0999999999 hoặc tel:+84999999999

Ví dụ:

Điều này thường bắt gặp trong các trang web bán hàng hoặc các phần thông tin liên hệ.

# Liên kết tới số điện thoại

Cách sử dụng:

<a href="tel:0999999999">0999999999</a><br />
<a href="tel:+84999999999">0999999999</a><br />
<a href="tel:0999999999">Gọi cho tôi</a>

Bản chất, trình duyệt vẫn sẽ truy cập tel:0999999999 khi nhấn vào thẻ <a> (giải thích rõ hơn trong video).

# Liên kết tới địa chỉ email

Sử dụng thẻ <a> với mailto giúp bạn có thể mở cửa sổ soạn email với các thông tin được điền sẵn như email nhận, cc, bcc, v.v.

Cách sử dụng:

<a href="mailto:example@gmail.com">example@gmail.com</a><br />
<a href="mailto:example@gmail.com">Gửi email cho tôi</a>

Với mailto, bạn có thêm một danh sách các tham sau:

• cc: danh sách email sẽ nhận được bản sao của thư (không bắt buộc).
• bcc: danh sách email ẩn sẽ nhận được bản sao của thư (không bắt buộc).
• subject: chủ đề của thư (không bắt buộc).
• body: nội dung của mail (không bắt buộc).
• ?: dấu phân cách giữa phần mailto và tham số (không bắt buộc).
• &: dấu phân cách tham số (không bắt buộc).

Ví dụ:

<a href="mailto:example@gmail.com?cc=ccexample@gmail.com&bcc=bccexample@gmail.com&subject=Request Support&body=Body of Request Support">Liên hệ với chúng tôi</a>

Điều này khá tiện dụng trong những tình huống biết trước một số thông tin, thay vì để người dùng tự nhập hoàn toàn thì ta sẽ “nhập” sẵn cho họ thông qua các tham số như subject, cc, bcc, v.v.

Tóm tắt

• Ngoài việc được dùng để liên kết tới một URL thì thẻ <a> cũng có thể liên kết tới một số điện thoại, một địa chỉ email. Sử dụng 2 phương thức trong thuộc tính href để làm điều này:
  • mailto để liên kết tới một email. Ví dụ: mailto:example@gmail.com
  • tel để liên kết tới một số điện thoại. Ví dụ: tel:0999999999 hoặc tel:+0999999999
• Sử dụng thẻ <a> với mailto giúp bạn có thể mở cửa sổ soạn email với các thông tin được điền sẵn như email nhận, subject, cc, bcc, v.v.