Wyręczanie użytkowników w wypełnianiu formularzy

Zwykle ograniczamy się tylko do walidowania poprawności danych wprowadzanych w formularze. A czy zastanawiałeś się kiedykolwiek, czy jesteś w stanie za użytkownika uzupełnić niektóre pola formularza? Nawet jeśli się zastanawiałeś, to rozmyślania pewnie zakończyły się stwierdzeniem, a skąd niby mam wyciągnąć dane użytkownika?! Niektórzy radzą sobie w ten sposób, że zapisują dane wpisane formularzach w ciasteczku i potem uzupełniają kolejne formularze tymi danymi. Jest to skuteczna metoda do czasu skasowania lub wygaśniecia ciasteczka. Tym wstępem chciałem zainteresować czytelników obiektem navigator.userProfile, który udostępnia nam AFAIK tylko Internet Explorer. Za jego pomocą możemy odczytać dane użytkownika z jego systemowej wizytówki vCard. Warunkiem powodzenia działania skryptu, który napiszemy będzie wcześniejsze utworzenie takiej wizytówki w systemie użytkownika.

Formularz

Pracę zaczniemy od utworzenia formularza, w którym będziemy oczekiwać podstawowych danych osobowych.

<form method="post" action="">
<p><label>Imię: <input type="text" name="imie" /></p>
<p><label>Nazwisko: <input type="text" name="nazwisko" /></p>
<p><label>e-mail: <input type="text" name="email" /></p>
<p><label>Telefon: <input type="text" name="tel" /></p>
<p><input type="submit" id="submit"></p>
</form>

Przymiarki do skryptu

Najpierw powinniśmy się zdecydować, czy chcemy, żeby pola zostały uzupełnione po załadowaniu się strony, czy dopiero po akcji użytkownika, np. po kliknięciu w przycisk. Kluczowym faktem, który pomoże podjąć decyzję jest, że użytkownik zawsze będzie proszony o zezwolenie (potwierdzenie) na pobranie danych osobowych. Dlatego uważam, że wypełnienie formularza powinno odbyć się dopiero po kliknięciu w przycisk.

Specyfikacja obiektu i jego metod

Obiekt navigator.userProfile posiada 4 metody

  • clearRequest()

    Metoda ta służy do czyszczenia kolejki rządań danych osobowych użytkownika. Prościej mówiąc, jeśli wcześniej wykonywaliśmy już odczyt danych z wizytówki i chcelibyśmy wykonać operację od nowa, musimy wyczyścić kolejkę z danych pobranych ostatnim razem.

    Metoda clearRequest nie oczekuje żadnych argumentów.

  • addReadRequest(name)

    Metoda ta dodaje do kolejki rządań kolejne nazwy pól wizytówek vCard, które mamy zamiar odczytać.

    Metoda oczekuje jednego argumentu - predefiniowanego zestawu nazw, tj. 'vCard.nazwa', np. 'vCard.FirstName'. Jeśli spróbujemy dodać do kolejki nieprawidłowy parametr, zostanie on zignorowany.

    Poniżej przedstawiam listę wszystkich dozwolonych nazw:

    • vCard.Business.City
    • vCard.Business.Country
    • vCard.Business.Fax
    • vCard.Business.Phone
    • vCard.Business.State
    • vCard.Business.StreetAddress
    • vCard.Business.URL
    • vCard.Business.Zipcode
    • vCard.Cellular
    • vCard.Company
    • vCard.Department
    • vCard.DisplayName
    • vCard.Email
    • vCard.FirstName
    • vCard.Gender
    • vCard.Home.City
    • vCard.Home.Country
    • vCard.Home.Fax
    • vCard.Home.Phone
    • vCard.Home.State
    • vCard.Home.StreetAddress
    • vCard.Home.Zipcode
    • vCard.Homepage
    • vCard.JobTitle
    • vCard.LastName
    • vCard.MiddleName
    • vCard.Notes
    • vCard.Office
    • vCard.Pager
  • doReadRequest(usageCode)

    Metoda ta dokonuje faktycznego pobrania danych z wizytówki. Użytkownik zostanie poproszony o zezwolenie na odczyt danych, chyba, że dana witryna posiada już prawa odczytu.

    Metoda oczekuje jednego obowiązkowego argumentu (tutaj nazwanego usageCode), który oznacza informację o tym, jak dana witryna zamierza użyć udostępnianych informacji.

    Dopuszczanymi wartościami są liczby całkowite od 0 do 12, które oznaczają kolejno

    1. - Używane wyłącznie do administrowania systemem i zasadami jego działania, jak np. rozpoznawanie problemów w witrynie
    2. - Używane do badań i projektowania produktów
    3. - Używane do ukończenia bieżącej transakcji, np. zakupu
    4. - Używane do dostosowania zawartości projektu witryny do Twoich potrzeb
    5. - Używane do ulepszenia zawartości witryny łącznie z ogłoszeniami
    6. - Używane do wysyłania do Ciebie uaktualnien witryny sieci Web
    7. - Używane do kontaktu z Tobą w sprawach marketingu usług lub produktów
    8. - Połączone z innymi informacjami o Tobie
    9. - Używane przez witrynę do innych celów
    10. - Udostępnianie innym w celu dostosowania lub ulepszenia zawartości projektu witryny
    11. - Udostępnianie innym dla umozliwienia kontaktu z Tobą w sprawach marketingu usług i/lub produktów
    12. - Udostępnianie innym dla umozliwienia kontaktu z Tobą w sprawach marketingu usług i/lub produktów. Istnieje możliwość wyłączenia udostępniania danych
    13. - Udostępnianie innym w dowolnym celu

    Pozostałe argumenty są opcjonalne, dlatego po szczegóły odsyłam do dokumentacji .

  • getAttribute(name)

    Metoda zwraca dane pobrane z wizytówki z pola o nazwie przekazanej jako argument lub null gdy dane dla danego parametru nie istnieją.

    Dozwolone wartości argumentu name zostały omówione wyżej, przy opisie metody addReadRequest.

Kod skryptu

if(window.navigator&&navigator.userProfile){
	var t=document.createElement('input')
	t.setAttribute('type','button')
	t.setAttribute('value','Wypełnij formularz')
	t.setAttribute('title','Po kliknięciu w przycisk poproszony zostaniesz o zezwolenie na odczyt danych osobowych z wizytówki vCard')
	t.onclick=function(t){
		t=navigator.userProfile;
		t.clearRequest();
		t.addReadRequest('vCard.FirstName');
		t.addReadRequest('vCard.LastName');
		t.addReadRequest('vCard.Email');
		t.addReadRequest('vCard.Business.Phone');
		// ...
		t.doReadRequest(3,'userProfile test');
		this.form.imie.value=t.getAttribute('vCard.FirstName');
		this.form.nazwisko.value=t.getAttribute('vCard.LastName');
		this.form.email.value=t.getAttribute('vCard.Email');
		this.form.tel.value=t.getAttribute('vCard.Business.Phone');
		// ...
		t.clearRequest();
	}
	document.getElementById('submit').parentNode.appendChild(t);
}

Skrypt w akcji

Skrypt można przetestować na przygotowanej stronie testowej.

Jakaś alternatywa?

Niektórych może zniechęcać okno dialogowe z koniecznością zezwolenia na odczyt danych. Istnieje pewna alternatywa, która pozwala wykorzystywać dane z wizytówek. Można wykorzystać funkcjonalność autouzupełniania formularzy, aby proponowała dane z wizytówki.

Jedyne co użytkownik musi zrobić to zaznaczyć opcję autouzupełniania dla formularzy w opcjach internetowych w zakładce Zawartość/Informacje osobiste.

Dla webmastera sprawa wygląda bardzo prosto. Wstawiamy do formularza pola tekstowe z dodatkowym atrubutem VCARD_NAME, np.

<input type="text" name="email" VCARD_NAME="vCard.Email">

którego wartości wymieniłem w momencie omawiania metody addReadRequest. W momencie, gdy użytkownik będzie wprowadzał dane do pola, przeglądarka wyświetli listę z propozycjami danych pobranymi z wizytówki.

Tutaj też przygotowałem prosty przykład.

Podsumowanie

Funkcjonalność jaką oferuje obiekt navigator.userProfile może i jest ciekawa. Nasuwa się pytanie, dlaczego jest to tak rzadko wykorzystywane na stronach? Strzelam, że powodem jest z jednej strony nieznajomość tego obiektu przez webmasterów, z drugiej strony niewielu użytkowników tworzy sobie taką systemową wizytówkę vCard. A szkoda!


Kategorie: JavaScript 18 lutego 2007, 10:30:44 1 komentarz

Komentarze dla notki “Wyręczanie użytkowników w wypełnianiu formularzy”

  1. forgems - 19 lutego 2007, 14:56:56

    Jak można się z panem skontaktować?
    Mój jid to forgems@gmail.com, prosiłbym o kontakt jeśli jest pan zainteresowany pracą.

Pozostaw komentarz

Copyright © 2003-2011 Rafał Kukawski. Powered by Jogger | RSS Subskrybuj