Text Field in Drop-down Menu Survey form Project

Hello everyone, today I need your help with a Html problem primarily.

I’m creating the Survey Form for the challenge and I wanted to add a text field to the end of the drop-down menu.

As you can see In the survey I’m asking users if they use any of the major computer OS’es and I wanted the user to be able to name their specific OS in a text field at the end of the drop-down menu.

Please mind that the code is not even close to being done and CSS development has not started (I work on Html first and then add CSS after all the main content has been made).

<!DOCTYPE html>
<!--
    this is how you comment
-->
<html>
    <!--this is the link to the CSS for the form and main element
    8/21/2020-->
      <!--The name attribute specifies the name of an <input> element.
         The name attribute is used to reference elements in a JavaScript, 
        or to reference form data after a form is submitted. 8/28/2020-->
<link rel="stylesheet" href="Surveyform.css">
<!--This is the link to the JS for Testing-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<main id="main">
<div class="container">

    <header class="header">

    <h1 id="title" class="text-center">What are your Technology preferences?</h1>
    <p id="description" class="description text-center">Thank you for taking this survey! This survey improves the content of the blog to accommodate all users.</p>
</header>
<!--The form is below this line-->
<form id="survey-form">
    <div class="form-group">
        <label id="name-label" for="name">Name</label>
        <input
        type="text"
        name="name"
        id="name"
        class="form-control"
        placeholder="Enter Name Here"
        required
        />
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter Your Email Please"
required/>

</div>
<div class="form-group">

    <label id="number-label" for="number"
    >Age<span class="clue">(optional)</span></label
  >

  <input
    type="number"
    name="age"
    id="number"
    min="10"
    max="99"
    class="form-control"
    placeholder="Age"
  />
</div>
<div class="form-group"></div>
<p>What OS do you use as your main computer Operating system?</p>
<select name="Computer OS Dropdown" id="dropdown" class="form-control" required>

<option disabled selected value>Select OS</option>
<option value="Windows 10">Windows 10</option>
<option value="Windows 7">Windows 7</option>
<option value="Mac OS">Mac OS</option>
<option value=Linux>Linux</option>
<Option value="Other"></Option>



</select>


</div>

</form>





</main>

</html>

Think you can help?

Thanks in advance, Ben

Usually the way to do this would be for the last option to say “Other” and then have a separate input box that is only shown if “Other” is selected.

can you please include a code description of that?

If you are going to conditionally hide the input field, then you will need to use JavaScript. Without JavaScript, your best option is to have an input field that is always visible and has a “If you selected ‘Other’, please tell us what operating system you use” description.

ok I’ll see what I can do but if you can include any more code examples with real code, I would be incredibly grateful.

I’m happy to help you debug your code, but I’m not going to write code for you.

ok I didn’t mean it like that, i’m very sorry if I offended you in any way or form. I aprecciate all the help you’ve given me as a good memeber of the comunity.

Have a nice day!
:slight_smile: