HTML | ジェンダーナチュラルに考慮した性別選択フォームのサンプルコード
ジェンダーナチュラル（gender-neutral）、ジェンダーフリー（gender-free）、ジェンダー平等に考慮した性別選択フォームのHTMLサンプルコードを紹介しています。
性別選択フォームを「RGBA」または「LGBTQ」または「LGBTQ+」または「LGBTQIA」にて数多くある性別の選択・入力に対応します。
ページ公開時にジェンダーフリー（gender-free、ジェンダー平等）と記述しましたが、正確にはジェンダーフリーとジェンダー平等は別の意味を持ちます。
日本国内では同じような用途で使われる事もありますが、ジェンダーフリーの語源、gender-freeはジェンダー平等の推進においてマイナス要素、否定的な言葉の意味も持って生まれた言葉とされています。
しかし、当ページではジェンダーフリーという言葉をジェンダー平等において否定的な意味で使っている訳ではない事をご了承ください。
ページの公開後、ジェンダーナチュラル（gender-neutral）を使うのが適切でしたのでタイトルを含め一部修正しました。
性別選択フォームサンプル（select版）
<select>要素を使った性別選択フォームのHTMLサンプルになります。
選択肢を男性・女性・その他としたタイプになります。
しかし「その他」という言葉に優劣の意味は含まれていないものの、これを問題視する声をあるようです。
<select name="sex">
<option value="men">男性</option>
<option value="women">女性</option>
<option value="others">その他</option>
</select>個人的には、ジェンダー平等の一部分が間違った方向に進む事で、嫌な思いをする事が増える、危険にさらされる可能性が高くなるのは、一般的な 普通の 人口比率が多い方の 女性です。
多くの性別を提示する状況下では、少なくとも女性だけははっきり性別を区別して女性として対応するべきです。
私も含め、多くの男性は「男性」を「その他」に含めたとしても、そもそも優劣の意味はないのですから、特には問題視しないでしょう。
そう考えると「女性」「その他」にする方法もアリなのでは、と思います。
結果的に性別を区別不可能にしていく事は、犯罪や違法行為の防止、あるいは調査や逮捕、取り締まりなどにおいて、限りなく悪影響を及ぼすとは思いますが。
男性も「その他」に含まれている事で、ジェンダーフリーによる不満もなくなるのではないでしょうか。
<select name="sex">
<option value="女性">女性</option>
<option value="その他">その他</option>
</select>性別選択フォームサンプル（datalist版）
HTML5から利用可能になっている<datalist>要素を使った性別選択フォームのHTMLサンプルになります。
<datalist>要素は選択肢からの選択と同時に値の入力もできるフォームパーツになりますので、ジェンダーフリーによる性別選択フォームにおいては、ある意味うってつけなフォームパーツになります。
セレクトフォームと同様に<option>要素を使いますが、閉じタグは必要ありません。
しかしWordpressやコードエディタで文法エラーとなるケースもあるので閉じタグを記述しておいても良いかと思います。
<input>の属性「list」と<datalist>の「id」を紐付けて利用します。
サンプルでは「男性」と「女性」を選択候補（考慮するなら入力例？）として指定していますが、このフォームは入力による絞り込みが可能ですので、LGBT+の数多い性別を可能なだけ提示しておいても良いかもしれません。
<input list="sex" name="sex">
<datalist id="sex">
<option value="男性"></option>
<option value="女性"></option>
</datalist>推奨された使い方ではないかもしれませんが、<option>の閉じタグを使う事でvalueと表示を混在させる事も可能です。
<input list="sex" name="sex">
<datalist id="sex">
<option value="男性">men</option>
<option value="女性">women</option>
</datalist>多様性の性別一覧も選択肢に入れたフォームサンプル（datalist版）
上記サンプルでは「男性」と「女性」を選択候補（考慮するなら入力例？）として指定していますが、このフォームは入力による絞り込みが可能ですので、「RGBA」または「LGBTQ」または「LGBTQ+」または「LGBTQIA」で定義されている性別から可能なだけ提示しておいても良いかもしれません。
絞り込みは、サンプルでいうところの英語でも可能となっています。（Edge、chrome、他 Chromium系ブラウザにて確認しました）
これだけ選択肢を提示しておいて入力も可能なのであれば、きっと大丈夫です。
<input list="sex" name="sex">
<datalist id="sex">
<option value="男性">Men</option>
<option value="女性">Women</option>
<option value="レズビアン">Lesbian</option>
<option value="ゲイ">Gay</option>
<option value="バイセクシュアル">Bisexual</option>
<option value="トランスジェンダー">Transgender</option>
<option value="FtMトランスジェンダー">FtM Transgender</option>
<option value="MtFトランスジェンダー">MtF Transgender</option>
<option value="パンセクシュアル">Pansexual</option>
<option value="アセクシュアル">Asexual</option>
<option value="ポリアモリー">Polyamory</option>
<option value="Xジェンダー">X Gender</option>
<option value="エイジェンダー">Agender</option>
<option value="アンドロジーヌ">Androgyne</option>
<option value="バイジェンダー">Bigender</option>
<option value="シスジェンダー">Cisgender</option>
<option value="ジェンダーフルード">Gender Fluid</option>
<option value="性別不適合">Gender Nonconforming</option>
<option value="インターセックス">Intersex</option>
<option value="非バイナリ">Non-binary</option>
<option value="性転換女性">Transsexual Female</option>
<option value="性転換男性">Transsexual Male</option>
<option value="トゥースピリット ">Two-spirit</option>
</datalist>