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 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  Site = tohodo.com/autofill/form.html
First name:
<input name="firstname" placeholder="First name"> Type = Text  Name = ^firstname$  Value = TOM  Site = tohodo.com/autofill/form.html
Last name:
<input name="lastname" placeholder="Last name"> Type = Text  Name = ^lastname$  Value = SMITH  Site = tohodo.com/autofill/form.html
Email:
<input type="email" name="email"> Type = Text  Name = ^email$  Value = tom@smith.com  Site = tohodo.com/autofill/form.html
<input type="text" id="uname" name="username"> Type = Text  Name = ^username$  Value = tsmith  Site = tohodo.com/autofill/form.html
<input type="text" id="user" title="Enter your ID"> Type = Text  Name = ^user$  Value = tomsmith  Site = tohodo.com/autofill/form.html
<input type="text" id="userID"> Type = Text  Name = ^userID$  Value = tom.smith  Site = tohodo.com/autofill/form.html
Account:
<input type="text" name="ctl00_Content_bank"> Type = Text  Name = ^ctl00_Content_bank$  Value = 0123456789  Site = tohodo.com/autofill/form.html
Account #:
<input type="number" name="ctl00_Content_bank_nr" min="0"> Type = Text  Name = ^ctl00_Content_bank_nr$  Value = 9876543210  Site = tohodo.com/autofill/form.html
Passenger:
<input type="text" name="passengers[0].passengerName"> Type = Text  Name = ^passengers\[0\]\.passengerName$  Value = T. Smith  Site = tohodo.com/autofill/form.html
Color picker:
<input id="colorpicker" type="color"> Type = Text  Name = ^colorpicker$  Value = #0080c0  Site = tohodo.com/autofill/form.html
Date:
<input id="calendar" type="date"> Type = Text  Name = ^calendar$  Value = 1984-04-01  Site = tohodo.com/autofill/form.html
Ranged slider:
<input id="slider" type="range" min="0" max="5" step="0.5"> Type = Text  Name = ^slider$  Value = 4.5  Site = tohodo.com/autofill/form.html
Search:
<input type="search" name="q" placeholder="Search for something"> Type = Text  Name = ^q$  Value = autofill  Site = tohodo.com/autofill/form.html
Time:
<input id="clock" type="time"> Type = Text  Name = ^clock$  Value = 12:00  Site = tohodo.com/autofill/form.html
Editable div:
Edit something here...
<div id="editDiv" contenteditable="true"></div> Type = Text  Name = ^editDiv$  Value = This field was autofilled!  Site = tohodo.com/autofill/form.html
Current value: ""
<input type="hidden" id="secret"> Type = Text  Name = ^secret$  Value = shhh  Site = tohodo.com/autofill/form.html
Click button to insert <input name="state"> Type = Text  Name = ^state$  Value = California  Site = tohodo.com/autofill/form.html
Password:
<input type="password" name="pass"> Type = Password  Name = ^pass$  Value = blahblahblah  Site = tohodo.com/autofill/form.html
Confirm:
<input type="password" name="pass2"> Type = Password  Name = ^pass2$  Value = blahblahblah  Site = tohodo.com/autofill/form.html
Birthday:
<select name="month">…</select>
<select name="day">…</select>
<select name="year">…</select>
Type = Select  Name = ^month$  Value = "apr" or 3  Site = tohodo.com/autofill/form.html
Type = Select  Name = ^year$  Value = "1984" or 84  Site = tohodo.com/autofill/form.html
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  Site = tohodo.com/autofill/form.html
Type = Select  Name = ^stars$  Value = "*****" or 5  Site = tohodo.com/autofill/form.html
Answers:
<select id="multi" multiple>…</select> Type = Select  Name = ^multi$  Value = "B"|"D" or 1|3  Site = tohodo.com/autofill/form.html
Fruit:
Bootstrap-select Type = Select  Name = ^fruit$  Value = "Blueberry" or 3  Site = tohodo.com/autofill/form.html
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  Site = tohodo.com/autofill/form.html
or
Type = Checkbox/Radio  Name = ^Male$  Value = 1  Site = tohodo.com/autofill/form.html
<input type="button" name="test1" value="Test 1" onclick="console.log('\'Test 1\' button clicked.')"> Type = JavaScript  Value = document.querySelector('input[name="test1"]').click();  Site = tohodo.com/autofill/form.html
<button type="button" name="test2" onclick="console.log('\'Test 2\' button clicked.')">Test 2</button> Type = JavaScript  Value = document.querySelector('button[name="test2"]').click();  Site = tohodo.com/autofill/form.html
<input type="submit"> Type = JavaScript  Value = document.querySelector('input[type="submit"]').click();  Site = tohodo.com/autofill/form.html
<iframe src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Your_first_form/Example/_sample_.A_simple_form.html"></iframe> Type = Text  Name = ^user_name$  Value = Tom Smith  Site = yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Your_first_form/Example/_sample_.A_simple_form.html
Type = Text  Name = ^user_email$  Value = tom@smith.com  Site = yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Your_first_form/Example/_sample_.A_simple_form.html
Type = Text  Name = ^user_message$  Value = Hello, world.  Site = yari-demos.prod.mdn.mozit.cloud/en-US/docs/Learn/Forms/Your_first_form/Example/_sample_.A_simple_form.html
<textarea name="desc" rows="2"></textarea> Type = Text  Name = ^desc$  Value = This field was autofilled!  Site = tohodo.com/autofill/form.html
CKEditor 3 Type = Text  Name = ^Rich text editor, ckeditor3$  Value = <p style="text-align: center;">This field was autofilled!</p>  Site = tohodo.com/autofill/
CKEditor 4 Type = Text  Name = ^Rich Text Editor, ckeditor4$  Value = <h1>This field was autofilled!</h1>  Site = tohodo.com/autofill/form.html

CKEditor 5 default text (contentEditable).

CKEditor 5 Type = Text  Name = ^Rich Text Editor, main$  Value = <blockquote><p>This field was autofilled!</p></blockquote>  Site = tohodo.com/autofill/form.html
Editor.js Type = Text  Name = \bce-paragraph cdx-block\b  Value = <b><i>This field was autofilled!</i></b>  Site = tohodo.com/autofill/form.html
NicEdit Type = Text  Name = \bnicEdit-main\b  Value = <ul><li>This field was autofilled!<br></li></ul>  Site = tohodo.com/autofill/form.html
Quill default text (contentEditable).
Quill Type = Text  Name = \bql-editor\b  Value = <h2>This field was autofilled!</h2>  Site = tohodo.com/autofill/form.html
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>  Site = tohodo.com/autofill/form.html
TinyMCE Type = Text  Name = ^tinymce_ifr$  Value = <pre>This field was autofilled!</pre>  Site = tohodo.com/autofill/form.html
WYMeditor Type = Text  Name = www\.tohodo\.com/autofill/wymeditor/iframe/default/wymiframe\.html  Value = <ol><li>This field was autofilled!<br></li></ol>  Site = tohodo.com/autofill/form.html
YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte_editor$  Value = <b>This field was autofilled!</b>  Site = tohodo.com/autofill/form.html
YUI 2 Rich Text Editor (not supported in Firefox) Type = Text  Name = ^yui2rte-iframe_editor$  Value = <i>This field was autofilled!</i>  Site = tohodo.com/autofill/
YUI 3 Rich Text Editor Type = Text  Name = \[height="99%"\]  Value = <u>This field was autofilled!</u>  Site = tohodo.com/autofill/form.html