Question

我正在研究一个班级项目，我有一个网页要做搜索： 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获取我在网页中的确切内容吗？

感谢。

Answer 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>

Bootstrap表单，如何使用POST

1 个答案: