Autofill Produktivitätsboost Web Formular

Amazon lebt davon, es dem Kunden so einfach wie möglich zu machen. Eine tägliche Qual ist das ausfüllen von Formularen im Web, Name, Strasse, PLZ usw. Das muss nicht sein, mit Autofill.

Zunächst kann der Benutzer (ja das bist Du) in seinem Browser der Wahl Daten hinterlegen.

Für Chrome Einstellungen – Erweitert (unten) –Passwörter und Formulare- Autofill. Dort hinterlegt man seine Adressdaten oder Kreditkarten.

image

Autovervollständigen bei Microsoft EDGE – Einstellungen. Erweiterte Einstellungen –Formulareinträge speichern. Edge lernt die Daten aus der Nutzung und bietet keine Möglichkeit diese manuell zu ändern.

image

Der Website Entwickler kann einfach die ID Name Werte der HTML Page passend eintragen oder besser er deklariert sie per Autocomplete Attribut. Das klappt auch mit ASP.NET Webforms, hier mit Bootstrap hervorragend.

   1:  <div class="form-group">
   2:       <asp:Label runat="server" AssociatedControlID="email">Email</asp:Label>
   3:       <asp:TextBox runat="server" ClientIDMode="Static" ID="email" 
TextMode="email" CssClass="form-control" AutoComplete="email" />
   4:      <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" 
Display="Dynamic"
   5:                      CssClass="text-danger" ErrorMessage="Email ist erforderlich." />
   6:  </div>

 

Die dabei wichtigsten Werte sind für Name und Email

email tel name fname mname

Für Adressdaten

address city state zip country

und für mutige die Kreditkartendaten

cc-name  cc-number cc-csc cc-exp-month cc-exp-year cc-exp cc-type

Demosite für einen Test https://greenido.github.io/Product-Site-101/form-cc-example.html

Dabei kann man auch in eine beliebige Zeile des Formulars springen und Autfill entdeckt ob es einen passenden Datensatz gibt und fügt diese auf Benutzerwunsch ein. Die farbliche Markierung der automatischen gefüllten Felder in gelb ist dann noch Herausforderung für einen Designer.

autofill 

Der Unterschied zu Edge ist, das die ausgefüllten Felder blau hinterlegt werden.

Kommentare sind geschlossen