Gender Selection Tools: HTML, JavaScript, and PHP

This page lets you specify your gender identity and age range for your profile. We respect all gender expressions and provide a broad selection of age groups. Additionally, we provide translated versions for gender options to support multilingual applications.

You can make your selections from dropdown menus for both gender identity and age. These menus are implemented using three methods: plain HTML, JavaScript arrays, and PHP arrays.

Create Custom Gender Selection for Your Needs

Customize your preferred gender by choosing from the options listed in the table. You can include these selected gender in a dropdown menu, a JavaScript array, or a PHP array. The selected codes will be displayed below.

Languages

#	Gender	Select
1	Male
2	Female
3	Non-Binary
4	Transgender
5	Genderqueer
6	Agender
7	Bigender
8	Genderfluid
9	Two-Spirit
10	Prefer not to say
11	Other
12	I prefer to self-describe

HTML Drop Down

This part has a code snippet that offers choices for different gender identities. The code is explained in detail, so it is simple to understand and change to fit what you want.

HTML

<select id="gender" name="gender" aria-label="Select your gender identity">
    <option value="">Please select</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="non-binary">Non-Binary</option>
    <option value="transgender">Transgender</option>
    <option value="genderqueer">Genderqueer</option>
    <option value="agender">Agender</option>
    <option value="bigender">Bigender</option>
    <option value="genderfluid">Genderfluid</option>
    <option value="two-spirit">Two-Spirit</option>
    <option value="prefer-not-to-say">Prefer not to say</option>
    <option value="other">Other</option>
    <option value="self-describe">I prefer to self-describe</option>
</select>

Run code Edit Code Download

JavaScript Array

JavaScript Array of Gender Selection. Use to dynamically generate Gender selections. The example code and detailed explanation guide you through creating and managing the dropdown options efficiently

JavaScript

const genderOptions = [
    { value: "male", label: "Male" },
    { value: "female", label: "Female" },
    { value: "non-binary", label: "Non-Binary" },
    { value: "transgender", label: "Transgender" },
    { value: "genderqueer", label: "Genderqueer" },
    { value: "agender", label: "Agender" },
    { value: "bigender", label: "Bigender" },
    { value: "genderfluid", label: "Genderfluid" },
    { value: "two-spirit", label: "Two-Spirit" },
    { value: "prefer-not-to-say", label: "Prefer not to say" },
    { value: "other", label: "Other" },
    { value: "self-describe", label: "I prefer to self-describe" }
];

Usage Example

Use this array to create a dropdown menu

HTML

<select id="gender">
  <option value="">Select gender</option>
</select>

javaScripr

const genderSelect = document.getElementById("gender");

genderOptions.forEach(group => {
    const optionElement = document.createElement("option");
    optionElement.value = group.value;
    optionElement.textContent = group.label;
    genderSelect.appendChild(optionElement);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

PHP Array of gender selection

PHP

<?php
$genderOptions = [
    [ 'value' => 'male', 'label' => 'Male' ],
    [ 'value' => 'female', 'label' => 'Female' ],
    [ 'value' => 'non-binary', 'label' => 'Non-Binary' ],
    [ 'value' => 'transgender', 'label' => 'Transgender' ],
    [ 'value' => 'genderqueer', 'label' => 'Genderqueer' ],
    [ 'value' => 'agender', 'label' => 'Agender' ],
    [ 'value' => 'bigender', 'label' => 'Bigender' ],
    [ 'value' => 'genderfluid', 'label' => 'Genderfluid' ],
    [ 'value' => 'two-spirit', 'label' => 'Two-Spirit' ],
    [ 'value' => 'prefer-not-to-say', 'label' => 'Prefer not to say' ],
    [ 'value' => 'other', 'label' => 'Other' ],
    [ 'value' => 'self-describe', 'label' => 'I prefer to self-describe' ]
];
?>

Usage Example PHP Array

Here is a simple example of using this array to create an HTML select option.

PHP

<?php
$html = '';
foreach ($genderOptions as $group) {
    $value = strtolower($group['value']);
    $text = htmlspecialchars($group['label']);
    $html .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
}
?>

<select id="gender">
  <option value="">Select gender</option>
	<?php echo $html ?>
</select>

Download

Customization Tips

Add or Remove Options: Modify the list of gender options based on your target audience and cultural context.
Localization: If your site is multilingual, ensure all gender options are correctly translated and culturally appropriate for each language

Use Cases

Social Media Platforms
Healthcare Applications
Educational Institutions
Dating Applications
Market Research Surveys

Report Problem