追加提交按鈕輸入

我有一個輸入類型按鈕，用於驗證表單輸入的文本類型。追加提交按鈕輸入

我已經看到，例如，引導允許您附加一些值來輸入。我想知道如何將這個輸入類型按鈕附加到我的輸入文本類型。

我已經添加了我如何看待它的屏幕截圖，但我不確定我會選擇哪種CSS策略。

感謝

enter image description here

來源

2012-12-11 Hommer Smith

爲什麼不打開你的控制檯，看看bootstrap是如何做到的？ –

除非我真的誤解了，我認爲'button' * * input *旁邊，而不是*附加到* it（這意味着'button'在* input元素中，*不能）。 –

這只不過是一個提交按鈕與文本字段

Demo

HTML

<div class="wrap"> 
    <input type="text" /> 
    <input type="button" value="Demo" /> 
</div>

CSS

.wrap { 
    display: inline-block; 
    position: relative; 
} 

input[type=text] { 
    padding: 10px; 
    width: 300px; 
    padding-right: 60px; 
} 

input[type=button] { 
    padding: 2px; 
    position: absolute; 
    right: 5px; 
    top: 5px; 
}

來源

2012-12-11 16:49:32

下面是一個示例代碼。這應該有所幫助。

<form class="form-search pull-right"> 
     <div class="input-append"> 
      <input type="text" class="span2 search-query"> 
      <button type="submit" class="btn">Validate</button> 
     </div> 
</form>

Bootstrap還有兩個功能。追加和前置。 Prepend在文本字段之前添加按鈕，並在文本字段之後添加按鈕。都加入了！

您只需加載引導文件並將上面的代碼添加到您的html/php文件即可。你完成了！

來源

2012-12-11 16:50:22 trollster

對不起，如果我是粗魯的，但誰downvoted這個答案，請檢查自舉網站的代碼。 http://twitter.github.com/bootstrap/base-css.html#forms – trollster

我低估了它，因爲你建議安裝bootstrap，這不是一個答案。他想知道如何在他的CSS中模擬bootstrap的功能。 –

他談到了爲bootstrap附加值，並想知道如何將一個按鈕添加到輸入字段，因此我給了他答案。他所要做的就是檢查bootstrap文件，必要的類，從那裏開始獲取值，在他自己定製的css文件中開始使用它，如果他不能這樣做，那麼直接使用bootstrap本身。猜猜我也被誤解了。沒關係。抱歉。但是，他有責任去查找事情並找出答案。 – trollster

追加提交按鈕輸入

回答

相關問題