Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Otomatik doldurma etkinliği, kaynak denemesi aşamasındadır.

Jeremy Wagner

Yayınlanma tarihi: 10 Haziran 2026

Formlar, web'de sıkça kullanılan bir etkileşim noktasıdır ancak kullanıcılar için önemli bir sürtünmeye neden olurlar. Tarayıcılar, bu sürtünmeyi azaltmak için uzun süredir otomatik doldurma özellikleri sunuyor. Bu özellikler, kullanıcıları kredi kartı numaraları, adresler ve giriş bilgileri girme gibi tekrarlayan görevlerden kurtarıyor.

Geliştiriciler için formların otomatik doldurulmasıyla ilgili sorunları çözmek zordur. Geliştiriciler <form> öğelerinde input veya change etkinliklerini dinleyebilir ancak bu etkinlikler, verilerin alana nasıl ulaştığını göstermez. Bu netlik eksikliği, formun otomatik olarak doldurulduğu anda belirli bir mantığı (ör. düzen ayarlamaları) tetiklemeyi zorlaştırır. Yeni autofill etkinliği—artık Chrome kaynak denemesi olarak kullanılabilir

Chrome 147'den itibaren, tarayıcı otomatik doldurma konusunda kullanıcıya yardımcı olurken geliştiriciler için yararlı bir sinyal sağlar.

`autofill`: `input` ve `change`'nin çözemediği sorunları çözme

input ve change etkinlikleri, kullanıcının bir form alanını manuel olarak doldurması ile otomatik doldurma özelliğinin kullanılması arasında ayrım yapmayan genel sinyallerdir. Formların otomatik doldurulması için özel bir etkinliğin olmaması, geliştiricilerin form doldururken faydalı olan kullanıcı arayüzü güncellemelerini güvenilir bir şekilde yapmasını zorlaştırır. Örneğin, bir kullanıcı ikamet ettiği ülkeyi belirtir ve yakındaki bir alan, yaşadığı eyaleti veya bölgeyi belirtmek için görünür. Bu alan, ülkeye göre değişir. Bu güncellemenin otomatik doldurma isteğine yanıt olarak tetiklenmesi, geliştiriciler için daha öngörülebilir ve kullanıcılar için daha faydalıdır. autofill etkinliği bu sorunu çözüyor.

autofill etkinliği, tarayıcı bir formu otomatik olarak doldurmadan hemen önce yürütülür. Etkinliğin dinleyicisi, doldurulacak bir autofillValues dizisi ve bir refill işlevi alır. İşleyici, örneğin içeriği değiştirdiyse tarayıcının formu yeniden doldurmasını istemek için refill işlevini çağırabilir. Bu örnek form işaretlemesini ele alalım:

<form>
  <div>
    <label for="country">Country</label>
    <select id="country" name="country" autocomplete="country">
      <!-- ... -->
    </select>
  </div>
  <div>
    <label for="address-line-1">Address Line 1</label>
    <input type="text" name="address-line-1" id="address-line-1" autocomplete="address-line1">
  </div>
  <div>
    <label for="city">City</label>
    <input type="text" name="city" id="city" autocomplete="address-level2">
  </div>
  <div>
    <div class="state">
      <!-- This section gets populated based on the
           value provided in the country field -->
    </div>
  </div>
  <div>
    <input type="submit" value="Calculate">
  </div>
</form>

Bu JavaScript, document üzerindeki autofill etkinliğini bağlar:

document.addEventListener('autofill', async event => {
  // A null check here is a good idea, as
  // refills are not available in a WebView.
  if (event.refill == null) {
    /* Apply legacy logic */
    return;
  }

  // Walk the fields
  for (const {field, value} of event.autofillValues) {
    if (field.name === 'country') {
      if (value === 'Germany') {
        document.querySelector('.state').innerHTML = `
        <label for="state">State:</label>
        <select name="state" id="state" autocomplete="address-level1">
          <option selected="selected"></option>
          <option value="BW">Baden-Württemberg</option>
          <option value="BY">Bavaria</option>
          <!-- Other states omitted -->
        </select>
      `;
      } else {
        /* Logic for other countries */
      }
    }
  }

  await event.refill();
});

Bu örnek, tipik bir adres formudur. Kullanıcı, otomatik doldurma ipucunu tetiklemek için bir form alanını tıklayabilir veya alana dokunabilir. Otomatik doldurulan bir adres seçildiğinde şunlar olur:

autofill etkinlik işleyici, form alanı otomatik olarak doldurulmadan hemen önce yürütülür.
event.autofillValues, önerilen otomatik doldurma verilerini iki özellikli bir nesnede sağlar:
- field: Otomatik doldurulacak DOM öğesine yapılan referans.
- value: Alan için önerilen otomatik doldurma değeri.
Ülke alanı adı algılandığında mantık, ülkeyi (bu örnekte Almanya) algılar ve eyalet açılır listesini ülke için uygun seçeneklerle doldurur.
event.refill(), tarayıcıya formu yeniden doldurması için talimat vermek üzere çağrılır. Bu işlem, değiştirilen formda otomatik doldurma işlemini tekrarlar.

Daha karmaşık autofill kullanım alanlarıyla ilgileniyorsanız Shopify'dan Yoav Weiss iki demo oluşturdu:

Bu yayındaki örneğe benzeyen ancak autofill etkinliğinin temel bir gösteriminin ötesine geçen bir kişisel bilgi formu.
Kartı veren kuruluşu algılamak ve DOM'u zengin görsellerle önemli ölçüde güncellemek için autofill etkinliğinin kullanıldığı bir kredi kartı otomatik doldurma demosu.

Kredi kartı otomatik doldurma demosu, autofill etkinliğinin özelliklerini gösterir. Bu tür deneyimler autofill etkinliğinden önce de mümkündü ancak form otomatik doldurma için özel bir etkinliğin olması geliştirici deneyimini iyileştirir.

`autofill` etkinliği ve `:autofill` CSS sözde sınıfı

:autofill CSS sözde sınıfı otomatik olarak doldurulan form öğeleriyle eşleşir ve autofill etkinliği bunu tamamlayabilir.

Örneğin, :autofill etkinliği sırasında değiştirilen alanlarla yeni otomatik doldurulan alanları ayırt etmek için :autofill kullanmak isteyebilirsiniz.autofill Bu, alanın önceden doldurulduğu konusunda kullanıcıya faydalı bir sinyal olabilir ancak verilerin düzenlenebilir bir form denetiminde bulunması, kullanıcının gerekirse verileri değiştirebileceğini gösterir.

document.addEventListener('autofill', async event => {
  if (event.refill !== null) {
    // Walk the fields to be autofilled:
    for (const {field, value} of event.autofillValues) {
      let cardIssuer;

      // If this field is the credit card number,
      // use its value to get the card issuer.
      if (field.name === 'card-number') {
        cardIssuer = getCardIssuerFromNumber(value);
      }

      // Populate the card issuer field with
      // the data we got from the card number
      if (field.name === 'card-issuer') {
        field.value = cardIssuer;
        field.classList.add('modified-by-event');
      }
    }
  }
});

Önceki kod bloğunda, kredi kartı numarası alanı bulunana kadar otomatik olarak doldurulmuş alanlar incelenir. Alanın verileri, kartın kart sağlayıcısını almak için kullanılır. Kart sağlayıcı, alana doldurulur ve .modified-by-event sınıfı verilir. Bu alanın otomatik doldurma stili, autofill etkinliği tarafından değiştirilmeyen diğer otomatik doldurulmuş alanlardan farklı olacak şekilde ayarlanabilir:

/* Standard autofill style: */
input:autofill {
  border: 0.25rem solid #cc0;
}

/* Autofill style for `autofill` event-modified data: */
input.modified-by-event-autofill:autofill {
  border-color: #0cc;
}

Bu sayede, otomatik olarak doldurulan form alanları için stil oluşturma semantiğini koruyabilir, :autofill stillerini devralabilir ve form alanının farklı bir şekilde otomatik olarak doldurulduğunu kullanıcıya anlamlı bir şekilde sunmaya devam edebilirsiniz.

`autofill` etkinliği ve `field-sizing` CSS özelliği

field-sizing CSS özelliği content değerine sahipse <textarea> öğesi gibi alanlar, içeriklerine uyacak şekilde otomatik olarak yeniden boyutlandırılır. Bu sayede küçük alanlarda garip kaydırma çubukları kullanma ihtiyacı ortadan kalkar:

textarea {
  /* The field grows to fit the content automatically: */
  field-sizing: content;
  min-height: 3lh;
  transition: min-height 0.2s ease-out;
}

Bu, iyi bir kullanıcı deneyimi olsa da düzen kaymalarına neden olabilir. Kullanıcı yazarken giriş alanının genişlemesi kademeli olur. Ancak bir tarayıcı çok satırlı bir adresi <textarea> öğesine otomatik olarak doldurduğunda alan bir anda önemli ölçüde genişleyebilir. autofill etkinliğiyle bu geçişleri daha etkili bir şekilde yönetebilirsiniz. Örneğin, kapsayıcıyı canlandırabilir veya kullanıcının bağlamı kaybetmesini önlemek için kaydırma konumunu ayarlayabilirsiniz.

document.addEventListener('autofill', event => {
  // Assumes a single field for the purpose of a quick
  // demonstration, such as a multiline address field:
  const [addressDetails] = event.autofillValues;

  // Since field-sizing: content causes an immediate jump,
  // we can use the event to ensure the UI remains stable:
  requestAnimationFrame(() => {
    addressDetails.scrollIntoView({behavior: 'smooth', block: 'nearest'});
  });

  if (event.refill !== null) {
    await event.refill();
  }
});

Her uygulamanın gereksinimleri farklıdır. Bu nedenle, bunun kullanmaya değer bir kalıp olup olmadığını belirlemeniz gerekir. Ancak bu, CSS ve autofill etkinliğinin bir kombinasyonu kullanılarak nelerin yapılabileceğini gösteren bir örnektir.

Form otomatik doldurma işlemlerini algılama ve ölçme

Form otomatik doldurma işlemlerinin Analytics verileri işletmeler için değerlidir ancak formlardaki otomatik doldurma işlemlerini ölçmek mevcut web özellikleri ile zordur. Örneğin, Baseline olmayan CSS :autofill sözde sınıfına güvenmek bu uygulamalardan biridir.

autofill etkinliği, formların otomatik doldurulmasını algılamaya yarayan bir araçtır. Etkinlik yalnızca gerçek bir otomatik doldurma denemesinde tetiklendiği ve herhangi bir girişte tetiklenmediği için, event.autofillValues özelliği yalnızca otomatik doldurulan alanları içerir. Bu nedenle, otomatik doldurulan verileri şu şekilde izleyebilirsiniz:

document.addEventListener('autofill', event => {
  // Get autofilled data
  const autofillData = {
    // Assumes the form has an ID for simplicity:
    form: event.target.id,
    autofilled: true
  };

  // Send to analytics endpoint
  const body = JSON.stringify(autofillData);
  navigator.sendBeacon('/analytics', body);
});

Bu örnek basitleştirilmiştir ancak bu bilgilerin ne kadar daha kolay yakalanabileceğini gösterir. Otomatik doldurma analiz verilerini, uygulanması zor ve güvenilir olmayan geçici çözümler olmadan, size uygun şekilde yapılandırıp toplayabilirsiniz.

Kaynak denemesine kaydolma

autofill etkinliği, Chrome'da bir kaynak denemesi olarak sunulmaktadır ve katılımınız, Chrome'un bu etkinliği daha iyi hale getirmesine yardımcı olabilir. Kaynak denemeleri, deneysel özellikleri gerçek kullanıcılarla test etmenize ve API web platformunun bir parçası olmadan önce Chrome Ekibi'ne geri bildirim göndermenize olanak tanır.

Sitenizde autofill etkinliğini kullanmaya başlamak için buradan kaynak denemesine kaydolun. Chrome, bu özelliği nasıl kullandığınızı ve bunun, iyileştirme fırsatlarını bulmamıza nasıl yardımcı olabileceğini görmek için sabırsızlanıyor.

Otomatik doldurma etkinliği, kaynak denemesi aşamasındadır. Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

autofill: input ve change'nin çözemediği sorunları çözme

autofill etkinliği ve :autofill CSS sözde sınıfı

autofill etkinliği ve field-sizing CSS özelliği