引导表单，如何与 POST 一起使用答案

【问题标题】：Bootstrap form, how to use with POST引导表单，如何与 POST 一起使用
【发布时间】：2014-04-28 11:05:45
【问题描述】：

我正在做一个课堂项目，我有一个网页可以搜索： http://ada.uprrp.edu/~ehazim/hpcf_proj/basicsearch.html

这是基本代码：

<html>
<head> <title>Search HPCF Inventory</title>
</head>

<body>
    <h1> Search </h1>

    <form action="results.php" method="POST">
    Choose Search Type: <br />
    <select name="searchtype">
        <option value="ip"> IP Adress </option>
        <option value="ss_name"> Software Services </option>
        <option value="IS"> ISBN </option>
    </select>
    <br />
    Enter Search Term:<br />
    <input name="searchterm" type="text">
    <br />
    <input type="submit" value="Search">
    </form>

</body>
</html>

现在，我想使用 bootstrap 3 让它“漂亮”。我想要我的网页中的内容，但老实说，我不了解 bootstrap 的形式（我是网页新手），主要是如何说它是通过 POST 以及如何放置变量名。我一直在这样的网站上寻找这个：http://bootsnipp.com/forms?version=3

这看起来很酷，但我不明白如何编辑它...... 有人可以分享必要的代码以使用引导程序在我的网页中拥有我的确切内容吗？

谢谢。

【问题讨论】：

我了解我拥有的 html 是如何工作的，并且我正在使用 php 来获取数据。 php部分没有实现。如您所见，我想要的只是使用引导程序，这样看起来更好。
我完全误解了你的问题。
getbootstrap.com/css/#forms
谢谢，但是我如何在引导表单中放置例如
？还有选择变量？
BS 主要是一个带有一些额外 JavaScript 的 CSS 框架。因此，假设您的表单的 HTML 是
而 BS HTML 是

，请将 BS 类添加到您现有的代码中。即

。 BS 经常添加额外的跨度，例如
为了获得最佳效果，也复制这些跨度，因为它们通常用于一致的跨浏览器样式或可访问性或只是良好的实践。

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

通读并按照http://getbootstrap.com/css/#forms上的示例进行操作

所以，最终会成为

<form action="results.php" method="POST" role="form" class="form-horizontal">
  <div class="form-group">
    <label for="searchterm" class="col-sm-2 control-label">Choose Search Type</label>
    <select name="searchtype" class="form-control">
      <option value="ip"> IP Adress </option>
      <option value="ss_name"> Software Services </option>
      <option value="IS"> ISBN </option>
    </select>
  </div>
  <div class="form-group">
    <label for="searchterm" class="col-sm-2 control-label">Choose Search Term</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="searchterm" name="searchterm">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

【讨论】：

嗨，本，谢谢。看起来是这样的：ada.uprrp.edu/~ehazim/hpcf_proj/newej.html我怎样才能让下拉栏和搜索栏变小？
将 col-sm-10 更改为 col-sm-8 / 您也可以将整个内容包装在

好的，谢谢。现在看起来像这样：ada.uprrp.edu/~ehazim/hpcf_proj/newej.html 最后一个请求：有没有办法强制“搜索类型”出现在栏的左侧，就像在搜索词栏中一样？
也将
我忘了在选择标签中加入名称属性。谢谢。