Autofill Practice Form

Install Chrome extension Install Firefox add-on


This is a sample web form to help you practice creating autofill rules for all the different types of form fields that 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 = TOM SMITH
First name:
<input name="firstname" placeholder="First name"> Type = Text  Name = ^firstname$  Value = TOM
Last name:
<input name="lastname" placeholder="Last name"> Type = Text  Name = ^lastname$  Value = SMITH
Email:
<input type="email" name="email"> Type = Text  Name = ^email$  Value = tom@smith.com
<input type="text" id="uname" name="username"> Type = Text  Name = ^username$  Value = tsmith
<input type="text" id="user" title="Enter your ID"> Type = Text  Name = ^user$  Value = tomsmith
<input type="text" id="userID"> Type = Text  Name = ^userID$  Value = tom.smith
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. Smith
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="state"> Type = Text  Name = ^state$  Value = California
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" onchange="console.log('Quantity changed.')">…</select>
<select name="stars" onchange="console.log('Quality changed.')">…</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 onclick="console.log('Red toggled.')">
<input type="checkbox" id="g" name="green" onclick="console.log('Green toggled.')">
<input type="checkbox" id="b" name="blue" checked onclick="console.log('Blue toggled.')">
Type = Checkbox/Radio  Name = ^green$  Value = 1
Type = Checkbox/Radio  Name = ^blue$  Value = 0
Gender:
<input type="radio" id="f" name="gender" value="Female" onclick="console.log('Female selected.')">
<input type="radio" id="m" name="gender" value="Male" onclick="console.log('Male selected.')">
Type = Checkbox/Radio  Name = ^gender$  Value = 01
or
Type = Checkbox/Radio  Name = ^Male$  Value = 1
<input type="button" name="test1" value="Test 1" onclick="console.log('\'Test 1\' button clicked.')"> Type = JavaScript  Value = document.querySelector('input[name="test1"]').click();
<button type="button" name="test2" onclick="console.log('\'Test 2\' button clicked.')">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="http://www.123contactform.com/my-simple-html-contact-form.php"></iframe> Type = Text  Name = ^name$  Value = Tom S.  Site = 123formbuilder.com
Type = Text  Name = ^email$  Value = tom@gmail.com  Site = 123formbuilder.com
Type = Text  Name = ^message$  Value = Hello, world.  Site = 123formbuilder.com
<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>
CKEditor 4 Type = Text  Name = ^Rich Text Editor, ckeditor4$  Value = <h1>This field was autofilled!</h1>
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>
TinyMCE Type = Text  Name = ^tinymce_ifr$  Value = <pre>This field was autofilled!</pre>
WYMeditor Type = Text  Name = ^http://www\.tohodo\.com/autofill/wymeditor/iframe/default/wymiframe\.html$  Value = <ol><li>This field was autofilled!<br></li></ol>
YUI 2 Rich Text Editor Type = Text  Name = ^yui2rte_editor$  Value = <b>This field was autofilled!</b>
YUI 2 Rich Text Editor Type = Text  Name = ^yui2rte-iframe_editor$  Value = <i>This field was autofilled!</i>