Lightning Autofill Practice Form

Install Chrome extension Install Firefox add-on Install Edge extension

This is a sample web form to help you practice creating autofill rules for all the different types of form fields that Lightning Autofill supports. You can identify the field to automatically fill by entering a supported attribute's value into the Name column; in cases where the field is linked to a label using the for attribute, you can also enter the label text. With dropdown menus, you can autoselect by entering the text of the menu item you would like to select into the Value column in double quotes; alternatively, you can also specify the index number of the menu item to select (for multi-select menus, separate each selection with a "|" symbol). For more information, please refer to the online documentation.

Form Field HTML Code Sample Rule
Full name:
<input type="text" name="fullname" autocomplete="off"> Type = Text  Name = ^fullname$  Value = Test User
First name:
<input name="firstname" placeholder="First name"> Type = Text  Name = ^firstname$  Value = Test
Last name:
<input name="lastname" placeholder="Last name"> Type = Text  Name = ^lastname$  Value = User
Email:
<input type="email" name="email"> Type = Text  Name = ^email$  Value = test@user.com
<input type="text" id="uname" name="username"> Type = Text  Name = ^username$  Value = testuser
<input type="text" id="user" title="Enter your ID"> Type = Text  Name = ^user$  Value = test_user
<input type="text" id="userID"> Type = Text  Name = ^userID$  Value = test.user
Account:
<input type="text" name="ctl00_Content_bank"> Type = Text  Name = ^ctl00_Content_bank$  Value = 0123456789
Account #:
<input type="number" name="ctl00_Content_bank_nr" min="0"> Type = Text  Name = ^ctl00_Content_bank_nr$  Value = 9876543210
Passenger:
<input type="text" name="passengers[0].passengerName"> Type = Text  Name = ^passengers\[0\]\.passengerName$  Value = T. User
Color picker:
<input id="colorpicker" type="color"> Type = Text  Name = ^colorpicker$  Value = #0080c0
Date:
<input id="calendar" type="date"> Type = Text  Name = ^calendar$  Value = 1984-04-01
Ranged slider:
<input id="slider" type="range" min="0" max="5" step="0.5"> Type = Text  Name = ^slider$  Value = 4.5
Search:
<input type="search" name="q" placeholder="Search for something"> Type = Text  Name = ^q$  Value = autofill
Time:
<input id="clock" type="time"> Type = Text  Name = ^clock$  Value = 12:00
Editable div:
Edit something here...
<div id="editDiv" contenteditable="true"></div> Type = Text  Name = ^editDiv$  Value = This field was autofilled!
Current value: ""
<input type="hidden" id="secret"> Type = Text  Name = ^secret$  Value = shhh
Click button to insert <input name="newly-added"> Type = Text  Name = ^newly-added$  Value = TEST
Password:
<input type="password" name="pass"> Type = Password  Name = ^pass$  Value = blahblahblah
Confirm:
<input type="password" name="pass2"> Type = Password  Name = ^pass2$  Value = blahblahblah
Birthday:
<select name="month">...</select>
<select name="day">...</select>
<select name="year">...</select>
Type = Select  Name = ^month$  Value = "apr" or 3
Type = Select  Name = ^year$  Value = "1984" or 84
Quantity:
Quality:
<select name="qty">...</select>
<select name="stars">...</select>
Type = Select  Name = ^qty$  Value = "5 apples" or 2
Type = Select  Name = ^stars$  Value = "*****" or 5
Answers:
<select id="multi" multiple>...</select> Type = Select  Name = ^multi$  Value = "B"|"D" or 1|3
Fruit:
Bootstrap-select Type = Select  Name = ^fruit$  Value = "Blueberry" or 3
Colors:

<input type="checkbox" id="r" name="red" checked>
<input type="checkbox" id="g" name="green">
<input type="checkbox" id="b" name="blue" checked>
Type = Checkbox/Radio  Name = ^green$  Value = 1
Type = Checkbox/Radio  Name = ^blue$  Value = 0
Gender:
<input type="radio" id="f" name="gender" value="Female">
<input type="radio" id="m" name="gender" value="Male">
Type = Checkbox/Radio  Name = ^gender$  Value = 01
or
Type = Checkbox/Radio  Name = ^Male$  Value = 1
 
<input type="button" name="test1" value="Test 1"> Type = JavaScript  Value = document.querySelector('input[name="test1"]').click();
 
<button type="button" name="test2">Test 2</button> Type = JavaScript  Value = document.querySelector('button[name="test2"]').click();
 
<input type="submit"> Type = JavaScript  Value = document.querySelector('input[type="submit"]').click();
<iframe src="https://tohodo.neocities.org/"></iframe> Type = Text  Name = ^message_name$  Value = Test User  Site = tohodo.neocities.org
Type = Text  Name = ^message_email$  Value = test@user.com  Site = tohodo.neocities.org
Type = Text  Name = ^message_body$  Value = Hello, world.  Site = tohodo.neocities.org
<textarea name="desc" rows="2"></textarea> Type = Text  Name = ^desc$  Value = This field was autofilled!
CKEditor 3 Type = Text  Name = ^Rich text editor, ckeditor3$  Value = <p style="text-align: center;">This field was autofilled!</p>
Rich Text Editor, ckeditor4
CKEditor 4 Type = Text  Name = ^Rich Text Editor, ckeditor4$  Value = <h1>This field was autofilled!</h1>
CKEditor 5 Type = Text  Name = ^Rich Text Editor, main$  Value = <blockquote><p>This field was autofilled!</p></blockquote>
Editor.js default text (contentEditable).
Nothing found
Text
Heading
Editor.js Type = Text  Name = \bce-paragraph cdx-block\b  Value = <b><i>This field was autofilled!</i></b>
NicEdit default text (contentEditable).
NicEdit Type = Text  Name = \bnicEdit-main\b  Value = <ul><li>This field was autofilled!<br></li></ul>

Quill default text (contentEditable).

Quill Type = Text  Name = \bql-editor\b  Value = <h2>This field was autofilled!</h2>
Summernote default text (contentEditable).
Summernote Type = Text  Name = \bnote-editable\b  Value = <span style="background-color: rgb(255, 255, 0);">This field was autofilled!</span>
WYMeditor Type = Text  Name = www\.tohodo\.com/autofill/wymeditor/iframe/default/wymiframe\.html  Value = <ol><li>This field was autofilled!<br></li></ol>

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Shift + Escape to place focus on the toolbar and navigate between options with your arrow keys. To exit this text editor use the Escape key and continue tabbing.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift L adds an HTML link

You have left the Rich Text Editor.

YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte_editor$  Value = <b>This field was autofilled!</b>
YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte-iframe_editor$  Value = <i>This field was autofilled!</i>
YUI 3 Rich Text Editor Type = Text  Name = \[height="99%"\]  Value = <u>This field was autofilled!</u>