html - Bootstrap 表单,如何与 POST 一起使用

标签 html twitter-bootstrap twitter-bootstrap-3

我正在做一个类项目,我有一个网页可以进行搜索: 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

看起来很酷,但我不知道如何编辑它... 有人可以共享必要的代码以使用 Bootstrap 在我的网页中拥有我所拥有的确切内容吗?

谢谢。

最佳答案

通读并按照 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>

关于html - Bootstrap 表单,如何与 POST 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23331646/

相关文章:

css - 滑出控件 UI 中的问题

javascript - 无论如何,在 Navbar 中保持 Bootstrap Dropdown 打开

html - 为什么网格元素堆放在 Angular 落里?

html - 带有外部填充的 CSS 边框/轮廓

html - 如何在页面上水平对齐 bootstrap div?

css - 如何在不破坏 col-.. 属性的情况下固定行位置?

javascript - Bootstrap Popover 中按钮的单击和警报问题

javascript - Z-index 不工作嵌套绝对 div

html - 保留 li :before top align on two lines

php - Twitter Bootstrap 导航栏 - 表单输入之间的空间