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

Posted 2023-02-22

【中文标题】HTML 输入元素可以有多种类型吗？

【英文标题】：Can A HTML Input Element Have Multiple Types?

【发布时间】：2013-09-13 16:10:41

【问题描述】：

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

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

【问题讨论】：

我想最简单的方法是编写脚本，因为 HTML 是一个标记，所以它不会呈现任何逻辑来确定用户选择了什么输入。

不，一个字段元素不能有多种类型。您应该留给用户的唯一事情是输入数据 - 您 在设计表单时选择类型。用户将选择他们想要填写的内容 - 除非您要求填写。这一切都可以在 HTML 中完成，无需编写脚本。

附加复选框？我认为很简单，除非我不明白你的问题。或者您可以只填写输入内容。

【参考方案1】：

一个输入不能有多种类型，但您也不必求助于脚本。您可以使用 CSS：

bodyfont-family:sans-serif
#inp,#seldisplay:block
#cbmargin-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>