html ملئ كيفية تشغيل ميزة الملء التلقائي في Google Chrome؟




حفظ البيانات في المتصفح (8)

يلزمك تسمية العناصر بشكل مناسب حتى يقوم المتصفح تلقائيًا بالتصفيق عليها.

إليك مواصفات IETF لهذا:

http://www.ietf.org/rfc/rfc3106.txt http://www.ietf.org/rfc/rfc3106.txt

أرغب في معرفة ما إذا كان هناك نوع من الترميز الخاص لتمكين ميزة الملء التلقائي على Chrome لنموذج معين. لم أجد سوى أسئلة حول كيفية تعطيلها ، ولكن أود أن أعرف ما إذا كان يمكنني إضافة نوع من الترميز إلى كود html من أجل معرفة المتصفح "هذا هو مدخلات العنوان" أو "هذا هو الرمز البريدي الحقل "لملئه بشكل صحيح (يفترض أن المستخدم قام بتفعيل هذه الميزة).


من الاختبار ، لا تفعل علامة x-autocomplete أي شيء. بدلاً من ذلك استخدم علامات autocomplete على علامات الإدخال الخاصة بك ، وقم بتعيين قيمها وفقًا لمواصفات HTML هنا http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofill-field .

مثال:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

تحتاج علامة النموذج الأصل إلى الإكمال التلقائي = "on" و method = "POST".


هذا السؤال قديم جدًا ولكن لديّ إجابة محدثة لعام 2017 !

في ما يلي رابط إلى وثائق WHATWG لتمكين الإكمال التلقائي.

كتب Google دليلًا رائعًا لتطوير تطبيقات الويب الملائمة للأجهزة المحمولة. لديهم قسم حول كيفية تسمية المدخلات في النماذج لاستخدام الملء التلقائي بسهولة. على الرغم من أنه مكتوب للجوال ، فإن هذا ينطبق على كل من أجهزة الكمبيوتر المكتبية والمحمول!

كيفية تمكين الإكمال التلقائي على نماذج HTML الخاصة بك

إليك بعض النقاط الأساسية حول كيفية تمكين الإكمال التلقائي:

  • استخدم <label> لكافة الحقول <input> الخاصة بك
  • أضف سمة autocomplete إلى علامات <input> واملأها باستخدام هذا الدليل .
  • اسم name وخصائص autocomplete بشكل صحيح لجميع العلامات <input>
  • مثال :

    <label for="frmNameA">Name</label>
    <input type="text" name="name" id="frmNameA"
    placeholder="Full name" required autocomplete="name">
    
    <label for="frmEmailA">Email</label>
    <input type="email" name="email" id="frmEmailA"
    placeholder="[email protected]" required autocomplete="email">
    
    <!-- note that "emailC" will not be autocompleted -->
    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
    placeholder="[email protected]" required autocomplete="email">
    
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
    placeholder="+1-555-555-1212" required autocomplete="tel">
    

كيفية تسمية علامات <input> الخاصة بك

لتشغيل الإكمال التلقائي ، تأكد من تسمية name وخصائص autocomplete بشكل صحيح في علامات <input> الخاصة بك. سيسمح هذا تلقائيًا بالإكمال التلقائي في النماذج. تأكد أيضًا من وجود <label> ! هذه المعلومات يمكن العثور عليها هنا .

فيما يلي كيفية تسمية المدخلات الخاصة بك:

  • اسم
    • استخدم أيًا من هذه name : name fname mname lname
    • استخدم أيًا من هذه autocomplete :
      • name (للاسم الكامل)
      • given-name (للاسم الأول)
      • additional-name (للاسم الأوسط)
      • family-name (لاسم العائلة)
    • مثال: <input type="text" name="fname" autocomplete="given-name">
  • البريد الإلكتروني
    • استخدم أيًا من هذه name : email
    • استخدم أيًا من هذه autocomplete : email
    • مثال: <input type="text" name="email" autocomplete="email">
  • عنوان
    • استخدام أي من هذه name : address city region province state zip zip2 postal country
    • استخدم أيًا من هذه autocomplete :
      • لإدخال عنوان واحد:
        • street-address
      • لإدخالات العنوان اثنين:
        • address-line1
        • address-line2
      • address-level1 (الولاية أو المقاطعة)
      • address-level2 (المدينة)
      • postal-code البريدي (الرمز البريدي)
      • country
  • هاتف
    • استخدم أيًا من هذه name : phone mobile country-code area-code exchange suffix ext
    • استخدم أيًا من هذه autocomplete : tel
  • بطاقة ائتمان
    • استخدام أي من هذه name : ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • استخدم أيًا من هذه autocomplete :
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • أسماء المستخدمين
    • استخدم أيًا من هذه name : username
    • استخدم أيًا من هذه autocomplete : username
  • كلمات السر
    • استخدم أيًا من هذه name : password
    • استخدم أيًا من هذه autocomplete :
      • current-password (لنماذج تسجيل الدخول)
      • new-password (لنماذج التسجيل وتغيير كلمة المرور)

مصادر


هنا هو الجواب الحقيقي:

والفرق الوحيد هو في التسمية نفسها. أسماء "Nom" من "الاسم" أو "Nome" باللغة البرتغالية.

لذلك هنا ما تحتاجه:

  • غلاف النموذج
  • A <label for="id_of_field">Name</label>
  • <input id="id_of_field"></input>

لا شيء آخر.


يبدو أننا سنحصل على مزيد من التحكم في ميزة الملء التلقائي هذه ، فهناك واجهة برمجة تطبيقات تجريبية جديدة قادمة إلى Chrome Canary ، والتي يمكن استخدامها للوصول إلى البيانات بعد طلب المستخدم منها:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

معلومات جديدة من جوجل:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete


أنا فقط لعبت arround مع المواصفات وحصلت على مثال عمل لطيف - بما في ذلك بضعة حقول أخرى.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

يحتوي على منطقتي عناوين منفصلتين وكذلك أنواع عناوين مختلفة. تم اختباره أيضًا على نظام التشغيل iOS 8.1.0 ويبدو أنه دائمًا ما يملأ جميع الحقول في وقت واحد ، بينما يعمل عنوان الملء التلقائي على سطح المكتب chrome حسب العنوان.


في ما يلي القائمة الجديدة لأسماء "الملء التلقائي" من Google. هناك جميع الأسماء المدعومة في أي lenguaje المسموح به.

autofill_regex_constants.cc


استكمال لعام 2017: يبدو أن الجواب من Kayvar لديه معلومات أكثر حداثة من لي. القراء المستقبليين: اعطوا أصواتك لأعلى لتلك الإجابة .

هذا سؤال رائع وواحد من الصعب التوثيق بشأنه. في الواقع ، ستجد في كثير من الحالات أن وظيفة الملء التلقائي على Chrome "يعمل فقط". على سبيل المثال ، ينتج مقتطف html التالي نموذجًا ، على الأقل بالنسبة لي (Chrome v. 18) ، يتم تعبئته تلقائيًا بعد النقر في الحقل الأول:

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

ومع ذلك ، فإن هذه الإجابة غير مرضية ، لأنها تترك الحل في عالم "السحر". التعمق في عملية الحفر علمت أن Chrome (والمتصفحات الأخرى التي تدعم ميزة الملء التلقائي) تعتمد في المقام الأول على أدلة سياقية لتحديد نوع البيانات التي يجب ملؤها في عناصر النموذج. تتضمن أمثلة هذه القرائن السياقية name عنصر الإدخال والنص المحيط بالعنصر وأي نص موضع مؤقت.

ومع ذلك ، أقر فريق Chrome مؤخرًا بأن هذا الحل غير مرضٍ ، وقد بدأوا في الضغط من أجل التوحيد القياسي في هذه المسألة. ناقشت هذه المقالة ذات الأهمية الإعلامية جدًا من مجموعة مشرفي المواقع من Google هذه المشكلة مؤخرًا:

للأسف ، صعب على مشرفي المواقع حتى الآن التأكد من أن Chrome وغيره من مزودي ملء النماذج يمكنهم تحليل نموذجهم بشكل صحيح. توجد بعض المعايير لكنهم وضعوا أعباء مرهقة على تنفيذ الموقع ، لذا فهم لا يستخدمون كثيراً في الممارسة العملية.

(تشير "المعايير" التي يشيرون إليها إلى مقالة أحدث من المواصفات المذكورة في جواب أفالانشيس أعلاه).

تعمل Google Post على وصف الحل المقترح لها (والذي يقابله انتقادات كبيرة في تعليقات المنشور). يقترحون استخدام سمة جديدة لهذا الغرض:

ما عليك سوى إضافة سمة لعنصر الإدخال ، على سبيل المثال ، قد يبدو حقل عنوان البريد الإلكتروني على الشكل التالي:

<input type=”text” name=”field1” x-autocompletetype=”email” />

... حيث يشير x- إلى "تجريبي" وسيتم إزالته إذا وعندما يصبح هذا معيارًا. اقرأ المنشور لمزيد من التفاصيل ، أو إذا كنت تريد التعمق أكثر ، ستجد شرحًا أكثر اكتمالًا للاقتراح على موقع www .

UPDATE: كما هو موضح في هذه answers insightful ، يمكن العثور على جميع التعبيرات العادية التي يستخدمها Chrome لتحديد / التعرف على الحقول المشتركة في autofill_regex_constants.cc.utf8 . لذا ، للرد على السؤال الأصلي ، تأكد من مطابقة أسماء حقول HTML مع هذه التعبيرات. بعض الأمثلة تشمل:

  • الاسم الأول: "first.*name|initials|fname|first$"
  • الاسم الأخير: "last.*name|lname|surname|last$|secondname|family.*name"
  • email: "e.?mail"
  • العنوان (السطر 1): "address.*line|address1|addr1|street"
  • zipcode: "zip|postal|post.*code|pcode|^1z$"




autofill