Çalıştırılabilir HTML Dokümanları: mailto linki

Q: HTML'de e-posta linki nasıl oluşturulur?

href değeri mailto: ve ardından adresle başlayan bir link kullan: hello@example.com . Tıklamak, okurun varsayılan e-posta uygulamasında yeni bir mesaj açar.

Q: Bir mailto linkine konu nasıl eklenir?

Onu ? işaretinden sonra bir sorgu parametresi olarak ekle: mailto:hello@example.com?subject=Order%20question. Boşlukları %20 olarak kodla, daha fazla parametreyi & ile birleştir, örneğin ?subject=Hi&body=Hello.

Q: Bir mailto linki birden fazla alıcıya nasıl gönderilir?

Adresleri virgülle ayır: mailto:ana@example.com,bob@example.com. Kopyalar için cc= ve bcc= parametrelerini kullan: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: HTML'de bir telefon numarası nasıl tıklanabilir yapılır?

Numarayı uluslararası biçimde yazan bir tel: linki kullan: +1 555 123 4567 . Telefonlarda arama başlatır; masaüstünde, kuruluysa bir arama uygulamasını açar.

E-posta linki nasıl yapılır

Linkin href değerini mailto: ve adresle başlat. Tıklamak, okurun e-posta uygulamasında o adrese yeni bir mesaj açar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

Önizleme başka uygulamaları açmaz: oradaki linklerden birine tıkladığında, linkin açacağı adresi gösterir. Gerçek bir sayfada ilki yeni bir e-posta açar, ikincisi telefonda bir arama başlatır.

Link metni olarak adresin kendisini kullan. Kurulu bir e-posta uygulaması olmayan bir okur (tarayıcıda webmail kullanan masaüstlerinde yaygındır) onu yine de kopyalayabilir; sadece "Bize yazın" diyen bir link ise onu çaresiz bırakır.

Konu, gövde, cc ve bcc

Bir mailto linki mesajın daha fazlasını doldurabilir. Parametreleri bir ? işaretinden sonra ekle ve bir URL sorgu dizesindeki gibi & ile birleştir:

Parametre	Doldurduğu alan	Örnek
`subject`	Konu satırı	`?subject=Order%20question`
`body`	Mesaj metni	`&body=Hi%20there`
`cc`	Kopya alıcıları	`&cc=sales@example.com`
`bcc`	Gizli kopya alıcıları	`&bcc=log@example.com`

Birden fazla alıcı, virgülle ayrılarak adres kısmına yazılır: mailto:ana@example.com,bob@example.com.

Değerler URL kodlanmış olmalıdır: boşluk %20, satır sonu %0D%0A, & işareti %26, ? işareti %3F olur. Bu örnekteki script, e-posta uygulamasının neyi aldığını görebilesin diye her linki çözer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

Order #123 konusu Order%20%23123 olarak yazılmalı: kodlanmamış bir # URL'yi orada bitirir ve gövde kaybolur. Boşluklar için + da kullanma. Bir mailto linkinde + gerçek bir artı işaretidir ve birçok e-posta uygulaması onu öyle gösterir.

JavaScript ile mailto linki oluşturmak

Elle kodlamak hataya açıktır. encodeURIComponent bunu senin yerine yapar. Alanlara yaz, aşağıdaki link güncellenir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent, & işaretini %26, satır sonunu %0A yapar; replace ise satır sonlarını e-postanın beklediği %0D%0A çiftine çevirir. Adres kısmını yazıldığı gibi bırak: @ ve , orada kodlanmadan kullanılabilir.

tel: ve sms: ile telefon linkleri

tel: tıklayınca arayan bir link yapar. href içinde numarayı ülke koduyla ve boşluksuz yaz; görünen metni istediğin gibi biçimlendirebilirsin.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 her ülkeden çalışır. tel:02079460958 gibi yerel bir numara yalnızca o ülkenin içinden arayanlar için çalışır.
Ayırıcı olarak tireye izin verilir (tel:+1-555-123-4567); boşluklar biçimin parçası değildir, bu yüzden onları href dışında tut.
sms: mesajlaşma uygulamasını açar. ?body= ile mesaj eklemek birçok uygulamada çalışır, ama destek farklıdır, bu yüzden buna güvenme.
Masaüstünde tel:, kuruluysa bir arama uygulamasını (FaceTime ya da bir softphone gibi) açar, değilse hiçbir şey yapmaz.

iPhone'daki Safari düz metindeki telefon numaralarını kendiliğinden linke çevirir. Bu, bir sipariş numarası gibi bir şeyi bozuyorsa, onu <meta name="format-detection" content="telephone=no"> ile kapat.

Spam ve e-posta adresleri

Bir mailto linkindeki adresi, sayfayı indiren her bot okuyabilir. Adresi hello [at] example [dot] com şeklinde yazmak ya da JavaScript ile birleştirmek gibi hileler bazı basit kazıyıcıları durdurur, ama linki kullanmayı da zorlaştırır. HTML formlar sayfasında anlatılan bir iletişim formu, adresi sayfanın tamamen dışında tutar. Çoğu site için gelen kutusundaki iyi bir spam filtresi daha basit bir çözümdür.

<form action="mailto:..."> kullanmaktan kaçın. Okurun e-posta uygulamasına bağlıdır, alanları URL kodlanmış ve okunması zor şekilde gönderir ve bir şeyin gönderildiğine dair sana hiçbir onay vermez.

Sık yapılan hatalar

mailto: yazmayı unutmak. href="hello@example.com", adın o adres olduğu bir sayfaya giden göreli bir linktir.
Konu ya da gövdede kodlanmamış boşluklar ya da #. Değerleri %20, %23 ya da encodeURIComponent ile kodla.
Boşluk için + kullanmak. Artı işareti olarak görünür.
& yerine ikinci bir ?. ? işaretinden sonra yalnızca ilk parametre gelir; diğerleri & ile birleştirilir.
Tek metin olarak "Bize yazın", bu da webmail kullananlara kopyalayacak hiçbir şey bırakmaz.
tel: içinde yerel telefon numaraları. Ülke kodunu ekle.

Sıkça Sorulan Sorular

HTML'de e-posta linki nasıl oluşturulur?

href değeri mailto: ve ardından adresle başlayan bir link kullan: <a href="mailto:hello@example.com">hello@example.com</a>. Tıklamak, okurun varsayılan e-posta uygulamasında yeni bir mesaj açar.

Bir mailto linkine konu nasıl eklenir?

Onu ? işaretinden sonra bir sorgu parametresi olarak ekle: mailto:hello@example.com?subject=Order%20question. Boşlukları %20 olarak kodla, daha fazla parametreyi & ile birleştir, örneğin ?subject=Hi&body=Hello.

Bir mailto linki birden fazla alıcıya nasıl gönderilir?

Adresleri virgülle ayır: mailto:ana@example.com,bob@example.com. Kopyalar için cc= ve bcc= parametrelerini kullan: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

HTML'de bir telefon numarası nasıl tıklanabilir yapılır?

Numarayı uluslararası biçimde yazan bir tel: linki kullan: <a href="tel:+15551234567">+1 555 123 4567</a>. Telefonlarda arama başlatır; masaüstünde, kuruluysa bir arama uygulamasını açar.

mailto linkim neden hiçbir şey yapmıyor?

Link adresi yalnızca varsayılan e-posta uygulamasına iletir. Okurun kurulu bir uygulaması yoksa, ki webmail kullanan masaüstlerinde bu yaygındır, işe yarar hiçbir şey olmaz. Kopyalanabilsin diye adresi link metni olarak göster.

İlgili kavramlar