HTML選擇和文本輸入

我們都看到了無數的表單實例，其中一個選擇下拉菜單中有一個選項爲「其他」，在選擇該選項時，我們看到一個輸入文本框（它始終隱藏）要求我們輸入我們的意見。HTML選擇和文本輸入

有沒有更好的實現方法？有沒有插件可以讓我做得更好？或者是標準的HTML元素就足夠了（有些設置爲選擇標籤，可能是）？

來源

2010-03-23 Vijay Dev

一個可編輯的組合框可能是一個很好的選擇。我們面臨的挑戰是如何設計風格，以便用戶清楚他可以實際編輯控件的內容，而不是隻選擇提供的默認內容。

來源

2010-03-23 09:32:07 Daan

我不希望用戶編輯下拉菜單中的可用選項。 – 2010-03-23 10:16:02

這不是我'可編輯組合框'的意思。該控件確實會顯示帶有選項的下拉菜單，例如常規組合框，但在最上面的部分中，在「下拉箭頭」旁邊，用戶可以填寫自定義值。 – Daan 2010-03-23 10:19:54

你能解釋一個例子嗎？ – 2010-03-23 10:21:58

這是在紙上和網頁上設計表單的一種相當常見的方式。我不太確定你的意思是用更好的方式來做到這一點......

如果你擔心隱藏的領域沒有出現，如果用戶禁用JavaScript，我會建議你隱藏使用JavaScript或有重複「如果其他請註明」文本區域在noscript模塊區：

<select><!-- implemented something like rahul showed --> 
<noscript> 
    <label for="ifOtherInput">If other please specify</label> 
    <input type="text" name="ifOtherInput" id="ifOtherInput"> 
</noscript> 
<!-- This is initially hidden and shown by when the user selects the other option --> 
<div id="divOther" class="dispnone"> 
    <!-- Here we know the user selected other so we can just have this label: --> 
    <label for="ifOtherInputJs">Please specify</label> 
    <input type="text" name="ifOtherInputJs" id="ifOtherInputJs"> 
</div>

後端必須處理，在無腳本塊的輸入可能會丟失。或者你可以使用JavaScript（這樣既不可能出現同時放，讓他們可以有相同的名字輸入的JavaScript版本添加到輸入的頁面

來源

2010-03-23 09:53:41

你可以使用datalist例：

<input list="cookies" placeholder="Type of Cookie"/> 

<datalist id="cookies"> 
    <option value="Chocolate Chip"/> 
    <option value="Peanut Butter"/> 
    <option value="Raisin Oatmeal"/> 
</datalist>

小提琴：http://jsfiddle.net/joshpauljohnson/Uv5Wk/

這爲用戶提供了從cookie列表的選擇，如果他們尋求cookie的類型列表中沒有找到，輸入自己的能力

我僅有b在你的情況下使用它，它可能不會立即顯現給用戶，他們可以用它作爲下拉菜單。但是，這可以通過一點點的CSS輕鬆修復。

來源

2013-01-27 19:00:40

謝謝，這正是需要的 – 2015-12-02 16:03:55

HTML選擇和文本輸入

回答

相關問題