An introduction to HTML editing
For those forgotten by the gender binary


Editing binarist HTML is relatively easy. I hope. It's easy for me to say because I'm the sort of person who picks up new coding languages for fun and uses simple HTML on a semi-regular basis. Either way, I hope this shoddily put together guide will be helpful to someone. Any questions, comments, suggestions, or complaints are welcome via the contact link on my homepage.

Editing HTML will require an HTML editor for your browser. This isn't necessary for this page, but it is recommended so that you can follow the examples. I use Firebug for Firefox; others exist for Firefox and other browsers. I'm not sure about other editors, but using Firebug is as simple as right-clicking the part of a page I want to edit, clicking 'Inspect Element with Firebug', and clicking the 'Edit' button. It may be worth finding an online guide for your own editor. Firefox does have an editor built in (right click, 'Inspect Element', double click to edit), but I prefer Firebug. I'm informed that Chrome also has an editor built in - right click the element, select 'Inspect Element', and there should be an editor.

People with a basic understanding of HTML can skip from here to the examples.


For people new to HTML, the first point I'd like to make is this: thinking of HTML as a language, small edits require almost no knowledge of its vocabulary, only of its grammar. The most important piece of HTML grammar is tags - key letters or words inside < and > signs that tell a web browser how to construct the page.

To take a simple example, text can be made bold by putting a <b> tag before it and a </b> tag after it. 'b' stands for bold, <b> means "start bold", and </b> means "end bold". Most tags come in opening and closing pairs like this, but some don't. For the purposes of this page, this isn't particularly important.

More information about HTML in general terms can be found elsewhere on the internet. The rest of this page is going to focus on a few examples of adding non-binary gender and title options to web forms.


Examples: websites referenced here are not my property, external links are not my responsibility.

Disclaimer: the methods described here won't work for every site - sometimes you just have to give up - but they will work for a surprising majority, in my experience. A few people have pointed out that the methods described here can have unpredictable results. This is true; these methods could crash poorly designed databases. Personally, I've never seen serious unintended consequences.


Example 1: Facebook.

The full Facebook website is a bit too clever to modify simply, but the mobile site (m.facebook.com) is easy. I'm sure a lot of NB people have seen http://m0tei.co.uk/facebookgender/. What follows here is what that script is doing automatically.

First, the website: https://m.facebook.com/editprofile.php?type=basic&edit=gender, shown here with the relevant HTML selected in Firebug:

Next, that chunk of HTML, then a bit of dissecting it:

<tbody>
    <tr>
        <td>
            <label onclick="">
                <input type="radio" onclick="" value="1" name="new_info">
                    Female
            </label>
        </td>
    </tr>
    <tr>
        <td>
            <label onclick="">
                <input type="radio" onclick="" value="2" name="new_info">
                        Male
            </label>
        </td>
    </tr>
</tbody>

Everything starting with 't' - 'tbody', 'tr', 'td' - refers to a table, which is basically just used here for formatting. What we care about is the 'input' tags. The thing to notice here is the difference between the 'Female' 'input' and the 'Male' 'input', which is value=, with either "1" or "2" as the 'value'. The value of 'value' is the thing that is actually sent back to the server, and the thing that is stored in databases. All we need to do to set a non-binary gender is return a value of "0", rather than "1" or "2" (the choice of "0" is somewhat arbitrary, but it's known to work with this site). The fancy way to do this is to add a whole new row to the formatting table - this is what the m0tei script does. The quick and dirty way is to change one of the preset options to "0", select that option, and hit save.

NOTE: This method no longer works. It's still possible to edit the HTML, but the change won't actually be registered. On the other hand, there's now an official option for non-binary genders for people using Facebook in English (US).


Example 2: Go North East

Again, the website: https://www.simplygo.com/buy-tickets-online/register/, shown with the relevant HTML selected:

And the HTML and analysis:

<select style="width:122px" name="Title" id="nametitle">
    <option value="">Please select</option>
    <option value="Mr">Mr</option>
    <option value="Ms">Ms</option>
    <option value="Mrs">Mrs</option>
    <option value="Miss">Miss</option>
    <option value="Dr">Dr</option>
</select>

What's interesting - and useful - here is that the value returned for each option is the text itself, rather than a number. (Typically, forms of this sort will return a number, which will match a value in a database somewhere.) The fact that this form returns the text lets us add any title we want, by adding a line like:
    <option value="Mx">Mx</option>
Which returns any title we want - in this case, Mx.

To return no title, it's probably necessary to return a space (value=" "). If that doesn't work, a no-break space (type "&nbsp;") or a full stop should work instead.


More examples may be added in future. Any recommendations (or removal requests) should be directed to the site owner/admin. A contact link is given on the homepage of this site.