自舉標籤環繞複選框和輸入

Question

我正在製作一個與文本輸入內嵌複選框的表單。這是我做了，使它看起來漂亮與引導：

<label class="checkbox"> 
    <input type="checkbox" name="keywords" value="__option__"> 
    <input type="text" name="keywords_other_option" value="" placeholder="Other"> 
</label> 

它看起來不錯，但它不能正常工作。在Firefox中，用戶無法輸入文本框。是否有一個很好的引導方式可以將複選框和文本輸入內聯到一起？

Answer 1

不要把兩個input元素放在一個label元素中。

這裏是Twitter的引導的方式來解決這個問題：

<form class="form-inline"> 
    <label class="checkbox"> 
    <input type="checkbox" name="keywords" value="__option__"> 
    </label> 
    <input type="text" name="keywords_other_option" value="" placeholder="Other"> 
</form> 

這裏是DEMO。

查看更多示例從official documentation。