HTML | 性別選択フォームのサンプルコード（ジェンダーナチュラル対応バージョンも）
性別入力フォームのHTMLサンプルコードを紹介しています。
また、ジェンダーナチュラル（gender-neutral）、ジェンダーフリー（gender-free）に考慮した性別選択フォームのHTMLサンプルコードも合わせて紹介しています。
性別選択フォームサンプル（セレクトタイプ）
<select>要素を使った性別選択フォームのHTMLサンプルになります。
選択肢を「男性」「女性」「その他」としたタイプになります。
※ 「その他」という言葉に優劣の意味は含まれていないものの、これを問題視する声をあるようですので注意が必要です。
<p>
<select name="sex">
<option value="men">男性</option>
<option value="women">女性</option>
<option value="others">その他</option>
</select>
</p>以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
性別選択フォームサンプル（datalistタイプ）
HTML5から利用可能になっている<datalist>要素を使った性別選択フォームのHTMLサンプルになります。
<datalist>要素は選択肢からの選択と同時に値の入力もできるフォームパーツになりますので、ジェンダーフリーによる性別選択フォームにおいては、ある意味うってつけなフォームパーツになります。
セレクトフォームと同様に<option>要素を使いますが、閉じタグは必要ありません。
しかしWordpressやコードエディタで文法エラーとなるケースもあるので閉じタグを記述しておいても良いかと思います。
<input>の属性「list」と<datalist>の「id」を紐付けて利用します。
<p>
<input list="sex1" name="sex">
<datalist id="sex1">
<option value="男性"></option>
<option value="女性"></option>
</datalist>
</p>以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
推奨された使い方ではないかもしれませんが、<option>の閉じタグを使う事でvalueと表示を混在させる事も可能です。
<p>
<input list="sex2" name="sex">
<datalist id="sex2">
<option value="男性">men</option>
<option value="女性">women</option>
</datalist>
</p>ジェンダーナチュラル対応版性別選択フォームサンプル（datalist版）
入力による絞り込みを可能にする事で、「RGBA」または「LGBTQ」または「LGBTQ+」または「LGBTQIA」で定義されている性別から可能なだけ提示しておいいても利便性を維持します。
絞り込みは、サンプルでいうところの英語でも可能となっています。
この操作は、Microsoft Edge、Google Chromeにて動作確認をしました。
<p>
<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>
</p>