HTML 输入元素可以有多种类型吗？答案

【问题标题】：Can A HTML Input Element Have Multiple Types?HTML 输入元素可以有多种类型吗？
【发布时间】：2023-03-04 05:22:01
【问题描述】：

这是一个如此简单的问题，但我在这里或其他任何地方都找不到答案。

有没有办法给 HTML Input 元素提供多种类型？我想制作一个包含各种输入、一些文本和一些选择的表单。但我希望用户能够选择在提交表单时传递哪些字段。有没有办法纯粹在 HTML 中做到这一点（感觉这应该是一项简单的任务），还是我不得不求助于脚本？

【问题讨论】：

我想最简单的方法是编写脚本，因为 HTML 是一个标记，所以它不会呈现任何逻辑来确定用户选择了什么输入。
不，一个字段元素不能有多种类型。您应该留给用户的唯一事情是输入数据 - 您在设计表单时选择类型。用户将选择他们想要填写的内容 - 除非您要求填写。这一切都可以在 HTML 中完成，无需编写脚本。
附加复选框？我认为很简单，除非我不明白你的问题。或者您可以只填写输入内容。

标签： html input

【解决方案1】：

一个输入不能有多种类型，但您也不必求助于脚本。您可以使用 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>

【讨论】：