I would like to know how to write HTML code to specify gender and pronouns, where users can select 'Other,' and a textbox appears for them to specify their gend

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey for family planning</title>
</head>
<body>
    <h1>Survey form</h1>
    <p><big><bold>Please fill out this form with genuine information:</bold></big></p>
    <h2>Personal Information:</h2>
    <fieldset>
        <label for="name">Full name:<input type="Full name" id="name" placeholder="eg: Jack Daniels"</label>
        <label for="age">Age:</label>
        <select id="age" name="age">
            <option value="">(Select one)</option>
            <option value="1">18-24</option>
            <option value="2">25-34</option>
            <option value="3">35-44</option>
            <option value="4">45 or older</option>
        </select>
        <label for="gender">Gender:</label>
        <select id="gender" name="gender">
            <option value="(s.o)">(Select one)</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>

    </fieldset>
</body>
</html>
2

Hi there!

For the functionality you want, you need to write JavaScript code.

<script>
        function showOtherGenderField() {
            let genderSelect = document.getElementById("gender");
            let otherGenderField = document.getElementById("other-gender-field");

            if (genderSelect.value === "other") {
                otherGenderField.style.display = "block";
            } else {
                otherGenderField.style.display = "none";
            }
        }
    </script>

Add the above script in before the closing body tag.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.