-
Notifications
You must be signed in to change notification settings - Fork 5
/
dom-inspector.html
63 lines (60 loc) · 4.56 KB
/
dom-inspector.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>The Mx Thing - DOM Inspector</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<a href="index.html">Home Page</a>
<h1>Messing with the DOM Inspector</h1>
<h2>SUBbing out the titles</h2>
<p>Here's a dropdown list I'm sure you're all familiar with:</p>
<select>
<option value="">Select a title</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
</select>
<p>Notice how there's no Mx option in there. Well, sometimes, it's possible to add your own title in here and actually be successful with the form submission. I'm going to explain how to do it, but first, the caveats:</p>
<p style='font-weight:bold; color:red;'>This isn't always going to work and you may experience issues further down the line if it does.</p>
<p>If it does work:</p>
<ul>
<li>company staff might think it's a mistake and change it to their perception of your gender</li>
<li>it might revert itself to a default value (usually "Mr", because of course it is -_-) after submission</li>
<li>it might break other systems the company uses or parts of the website</li>
<li>it might show a warning asking you to pick one of the original options</li>
</ul>
<p>All of the above has happened to me in the past, and it's by far not a comprehensive list, so please remember that your mileage may vary</p>
<p>So, without further ado, let's learn how this works.</p>
<ul>
<li>I want you to go to that dropdown list, right click it and then click "Inspect" or "Inspect Element" (depending on your browser) on the menu that pops up.
<li>You'll now have either a section of your browser taken up by a load of computer code, or another window. Both work the same.
<li>You will see code like this:<br>
<code>
<select><br>
<option value="">Select a title</option><br>
<option value="Mr">Mr</option><br>
<option value="Ms">Ms</option><br>
<option value="Miss">Miss</option><br>
<option value="Mrs">Mrs</option><br>
<option value="Dr">Dr</option><br>
</select><br>
</code>
<li>This is what powers the dropdown list of titles. Each title appears twice. Once next to value, and once between the triangle brackets.
<li><code>value='Mr'</code> means that "Mr" is what's sent to the website if this is selected. This is what you will need to change in order to send "Mx" or another title. Change this by double clicking it to enable text entry and then type in, making sure all the speech marks and/or quotes are the same as they originally were.
<li>You will now see <code><option value="Mx">Mr</option></code>
<li><code>>Mr<option></code> means that "Mr" is what appears in the dropdown list <strong>visually</strong> and is nothing to do with what is sent with the rest of the form. You can change this as well if you want to, as it lets you see which option you've actually changed.
<li>You will then see <code><option value="Mx">Mx</option></code>
</ul>
<p>And that's it. Try it out on the dropdown list at the top of this page. There's no page to submit to, but you can try out messing with the code.</p>
<p>Some websites do weird things with their dropdown boxes with span tags or div tags, etc. If it's not a simple form, use the search function in the DOM Inspector to find one of the titles (I recommend "Mrs" as that string of letters in that order doesn't come up very often in typical web pages) and then replace every one you find in the code. Sometimes that works, sometimes not.</p>
<p>I will link to this page elsewhere on this website when I come across sites where the form can be modified in this way and if it's successful, along with any warnings. However, you can attempt to use this anywhere and see what happens. Please let me know if you're successful with any site using this method and I'll add it here and credit you (if you wish). Please email <a href="mailto:please@dontgender.me">please@dontgender.me</a></p>
<p>Good luck</p>
<hr>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
</body>
</html>