... back


Good news, everyone



A friendly gender select menu


Why this?

In spring 2014 Facebook published new gender select options for their users. Now, about two years later having a choice like this is still a rarity on most websites. Yesterday I had to book a train trip; on the website I had to specify my gender and the only possible exclusive options were male and female.

Some months ago I built a website for a customer of mine which included a registration form. The website owner wanted to know their customers' genders. So I implemented a range of possible options which was definitely too much for my customer. I was told to reduce the list to male and female again. I did never get a proper answer why this should be necessary, but I think they were confused or overchallenged by all these terms.

I will not explain the exact meanings here, because one could write a whole book about them. Slate.com has nice and short overview about some of them:
slate.com: gender_facebook_now_has_56_categories_to_choose_from_including_cisgender.
If you are interested in this important topic I suggest to read a book like 'Middlesex' or 'Making Sex Revisited'.


Actually there is no sense in asking people what gender they are. When you register somewhere as a customer, you are also not asked which color your skin has, what your religion is or what type of people you usually fall in love with.
Many of non-cis, non-binary people feel offended by not even being recognized, so as long as website owners want to know about their visitors' gender, I think there should be as many options as possible. Every website coder should at least think about using more than the well-known two options male or female.

Here is a suggestion (HTML code at the bottom of this document):



























































Here's the HTML Code:
<div style="float: left; width: 33%;">
    <input type="radio" name="gender" id="gender_" value="" />
    <label for="gender_"></label><br/>
    <input type="radio" name="gender" id="gender_agender" value="agender" />
    <label for="gender_agender">Agender</label><br/>
    <input type="radio" name="gender" id="gender_androgyne" value="androgyne" />
    <label for="gender_androgyne">Androgyne</label><br/>
    <input type="radio" name="gender" id="gender_androgynous" value="androgynous" />
    <label for="gender_androgynous">Androgynous</label><br/>
    <input type="radio" name="gender" id="gender_bigender" value="bigender" />
    <label for="gender_bigender">Bigender</label><br/>
    <input type="radio" name="gender" id="gender_cis" value="cis" />
    <label for="gender_cis">Cis</label><br/>
    <input type="radio" name="gender" id="gender_cisgender" value="cisgender" />
    <label for="gender_cisgender">Cisgender</label><br/>
    <input type="radio" name="gender" id="gender_cis_female" value="cis female" />
    <label for="gender_cis_female">Cis Female</label><br/>
    <input type="radio" name="gender" id="gender_cis_male" value="cis male" />
    <label for="gender_cis_male">Cis Male</label><br/>
    <input type="radio" name="gender" id="gender_cis_man" value="cis man" />
    <label for="gender_cis_man">Cis Man</label><br/>
    <input type="radio" name="gender" id="gender_cis_woman" value="cis woman" />
    <label for="gender_cis_woman">Cis Woman</label><br/>
    <input type="radio" name="gender" id="gender_cisgender_female" value="cisgender female" />
    <label for="gender_cisgender_female">Cisgender Female</label><br/>
    <input type="radio" name="gender" id="gender_cisgender_male" value="cisgender male" />
    <label for="gender_cisgender_male">Cisgender Male</label><br/>
    <input type="radio" name="gender" id="gender_cisgender_man" value="cisgender man" />
    <label for="gender_cisgender_man">Cisgender Man</label><br/>
    <input type="radio" name="gender" id="gender_cisgender_woman" value="cisgender woman" />
    <label for="gender_cisgender_woman">Cisgender Woman</label><br/>
    <input type="radio" name="gender" id="gender_female_to_male" value="female to male" />
    <label for="gender_female_to_male">Female to Male</label><br/>
    <input type="radio" name="gender" id="gender_ftm" value="ftm" />
    <label for="gender_ftm">FTM</label><br/>
    <input type="radio" name="gender" id="gender_gender_fluid" value="gender fluid" />
    <label for="gender_gender_fluid">Gender Fluid</label><br/>
    <input type="radio" name="gender" id="gender_gender_nonconforming" value="gender nonconforming" />
    <label for="gender_gender_nonconforming">Gender Nonconforming</label><br/>
  </div>
  <div style="display: inline-block; width: 33%;">
    <input type="radio" name="gender" id="gender_gender_questioning" value="gender questioning" />
    <label for="gender_gender_questioning">Gender Questioning</label><br/>
    <input type="radio" name="gender" id="gender_gender_variant" value="gender variant" />
    <label for="gender_gender_variant">Gender Variant</label><br/>
    <input type="radio" name="gender" id="gender_genderqueer" value="genderqueer" />
    <label for="gender_genderqueer">Genderqueer</label><br/>
    <input type="radio" name="gender" id="gender_intersex" value="intersex" />
    <label for="gender_intersex">Intersex</label><br/>
    <input type="radio" name="gender" id="gender_male_to_female" value="male to female" />
    <label for="gender_male_to_female">Male to Female</label><br/>
    <input type="radio" name="gender" id="gender_mtf" value="mtf" />
    <label for="gender_mtf">MTF</label><br/>
    <input type="radio" name="gender" id="gender_neither" value="neither" />
    <label for="gender_neither">Neither</label><br/>
    <input type="radio" name="gender" id="gender_neutrois" value="neutrois" />
    <label for="gender_neutrois">Neutrois</label><br/>
    <input type="radio" name="gender" id="gender_non_binary" value="non_binary" />
    <label for="gender_non_binary">Non-binary</label><br/>
    <input type="radio" name="gender" id="gender_other" value="other" checked="checked" />
    <label for="gender_other">Other</label><br/>
    <input type="radio" name="gender" id="gender_pangender" value="pangender" />
    <label for="gender_pangender">Pangender</label><br/>
    <input type="radio" name="gender" id="gender_trans" value="trans" />
    <label for="gender_trans">Trans</label><br/>
    <input type="radio" name="gender" id="gender_trans*" value="trans*" />
    <label for="gender_trans*">Trans*</label><br/>
    <input type="radio" name="gender" id="gender_trans_female" value="trans female" />
    <label for="gender_trans_female">Trans Female</label><br/>
    <input type="radio" name="gender" id="gender_transX_female" value="trans* female" />
    <label for="gender_transX_female">Trans* Female</label><br/>
    <input type="radio" name="gender" id="gender_trans_male" value="trans male" />
    <label for="gender_trans_male">Trans Male</label><br/>
    <input type="radio" name="gender" id="gender_transX_male" value="trans* male" />
    <label for="gender_transX_male">Trans* Male</label><br/>
    <input type="radio" name="gender" id="gender_trans_man" value="trans man" />
    <label for="gender_trans_man">Trans Man</label><br/>
    <input type="radio" name="gender" id="gender_transX_man" value="trans* man" />
    <label for="gender_transX_man">Trans* Man</label><br/>
  </div>
  <div style="float: right; width: 33%;">
    <input type="radio" name="gender" id="gender_trans_person" value="trans person" />
    <label for="gender_trans_person">Trans Person</label><br/>
    <input type="radio" name="gender" id="gender_transX_person" value="trans* person" />
    <label for="gender_transX_person">Trans* Person</label><br/>
    <input type="radio" name="gender" id="gender_trans_woman" value="trans woman" />
    <label for="gender_trans_woman">Trans Woman</label><br/>
    <input type="radio" name="gender" id="gender_transX_woman" value="trans* woman" />
    <label for="gender_transX_woman">Trans* Woman</label><br/>
    <input type="radio" name="gender" id="gender_transfeminine" value="transfeminine" />
    <label for="gender_transfeminine">Transfeminine</label><br/>
    <input type="radio" name="gender" id="gender_transgender" value="transgender" />
    <label for="gender_transgender">Transgender</label><br/>
    <input type="radio" name="gender" id="gender_transgender_female" value="transgender_female" />
    <label for="gender_transgender_female">Transgender Female</label><br/>
    <input type="radio" name="gender" id="gender_transgender_male" value="transgender_male" />
    <label for="gender_transgender_male">Transgender Male</label><br/>
    <input type="radio" name="gender" id="gender_transgender_man" value="transgender_man" />
    <label for="gender_transgender_man">Transgender Man</label><br/>
    <input type="radio" name="gender" id="gender_transgender_person" value="transgender_person" />
    <label for="gender_transgender_person">Transgender Person</label><br/>
    <input type="radio" name="gender" id="gender_transgender_woman" value="transgender_woman" />
    <label for="gender_transgender_woman">Transgender Woman</label><br/>
    <input type="radio" name="gender" id="gender_transmasculine" value="transmasculine" />
    <label for="gender_transmasculine">Transmasculine</label><br/>
    <input type="radio" name="gender" id="gender_transsexual" value="transsexual" />
    <label for="gender_transsexual">Transsexual</label><br/>
    <input type="radio" name="gender" id="gender_transsexual_female" value="transsexual_female" />
    <label for="gender_transsexual_female">Transsexual Female</label><br/>
    <input type="radio" name="gender" id="gender_transsexual_male" value="transsexual_male" />
    <label for="gender_transsexual_male">Transsexual Male</label><br/>
    <input type="radio" name="gender" id="gender_transsexual_man" value="transsexual_man" />
    <label for="gender_transsexual_man">Transsexual Man</label><br/>
    <input type="radio" name="gender" id="gender_transsexual_person" value="transsexual_person" />
    <label for="gender_transsexual_person">Transsexual Person</label><br/>
    <input type="radio" name="gender" id="gender_transsexual_woman" value="transsexual_woman" />
    <label for="gender_transsexual_woman">Transsexual Woman</label><br/>
    <input type="radio" name="gender" id="gender_two_spirit" value="two_spirit" />
    <label for="gender_two_spirit">Two-Spirit</label><br/>
  </div>

Alternative: the HTML Code for a dropdown menu (select)

Dropdown:
Your Gender:


HTML:
Your Gender:
  <select name="gender">
    <option value=""></option>
    <option value="agender">Agender</option>
    <option value="androgyne">Androgyne</option>
    <option value="androgynous">Androgynous</option>
    <option value="bigender">Bigender</option>
    <option value="cis">Cis</option>
    <option value="cisgener">Cisgender</option>
    <option value="cis female">Cis Female</option>
    <option value="cis male">Cis Male</option>
    <option value="cis man">Cis Man</option>
    <option value="cis woman">Cis Woman</option>
    <option value="cisgender female">Cisgender Female</option>
    <option value="cisgener male">Cisgender Male</option>
    <option value="cisgender man">Cisgender Man</option>
    <option value="cisgender woman">Cisgender Woman</option>
    <option value="female to ale">Female to Male</option>
    <option value="ftm">FTM</option>
    <option value="gender fuild">Gender Fluid</option>
    <option value="gender nonconforming">Gender Nonconforming</option>
    <option value="gender questioning">Gender Questioning</option>
    <option value="gender variant">Gender Variant</option>
    <option value="genderqueer">Genderqueer</option>
    <option value="intersex">Intersex</option>
    <option value="male to female">Male to Female</option>
    <option value="mtf">MTF</option>
    <option value="neither">Neither</option>
    <option value="neutrois">Neutrois</option>
    <option value="non-binary">Non-binary</option>
    <option value="other" selected="selected">Other</option>
    <option value="pangender">Pangender</option>
    <option value="trans">Trans</option>
    <option value="trans*">Trans*</option>
    <option value="trans female">Trans Female</option>
    <option value="trans* female">Trans* Female</option>
    <option value="trans male">Trans Male</option>
    <option value="trans* male">Trans* Male</option>
    <option value="trans man">Trans Man</option>
    <option value="trans* man">Trans* Man</option>
    <option value="trans person">Trans Person</option>
    <option value="trans* person">Trans* Person</option>
    <option value="trans woman">Trans Woman</option>
    <option value="trans* woman">Trans* Woman</option>
    <option value="transfeminine">Transfeminine</option>
    <option value="transgender">Transgender</option>
    <option value="transgender female">Transgender Female</option>
    <option value="transgender male">Transgender Male</option>
    <option value="transgender man">Transgender Man</option>
    <option value="transgender person">Transgender Person</option>
    <option value="transgender woman">Transgender Woman</option>
    <option value="transmaculine">Transmasculine</option>
    <option value="transsexual">Transsexual</option>
    <option value="transsexual female">Transsexual Female</option>
    <option value="transsexual male">Transsexual Male</option>
    <option value="transsexual man">Transsexual Man</option>
    <option value="transsexual person">Transsexual Person</option>
    <option value="transsexual woman">Transsexual Woman</option>
    <option value="two-spirit">Two-Spirit</option>
  </select>


This list is not complete. If you have any suggestions for extending the list feel free to send me an email to info@int2byte.de.
Note: The syntax highlighting was made with tohtml.com.



Enjoy the code, have a good time and help others!