Can A HTML Input Element Have Multiple Types?

Question

This is such a simple question, but I can't find an answer to it here or anywhere else.

Is there a way to give an HTML Input element multiple types? I want to make a form with various inputs, some text and some select. But I want the user to be able to pick which of these fields gets passed on when the form is submitted. Is there a way to do this purely in HTML (it feels like it should be a simple task), or do I have to resort to scripting?

Answer 1

An input can't have multiple types, but you don't have to resort to scripting either. You can use CSS:

body{font-family:sans-serif}
#inp,#sel{display:block}
#cb{margin-bottom:20px}

#sel{
    display:none
}

#cb:checked ~ #inp{
    display:none
}

#cb:checked ~ #sel{
    display:block
}

<label for="cb">View as dropdown</label>
<input id="cb" type="checkbox">

<label id="inp">Car Model
<input type="text" name="carmodel">
</label>

<label id="sel">Car Model
<select name="carmodel">
    <option value="mazda">Mazda</option>
    <option value="ford">Ford</option>
    <option value="audi">Audi</option>
</select>
</label>