Форма Bootstrap, как использовать с POST

Я работаю над проектом класса, и у меня есть веб-страница для поиска: 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>

Теперь я хочу сделать это "красивым" с помощью загрузочного буфера 3. Я хочу, чтобы именно то, что у меня было на моей веб-странице, но, честно говоря, я не понимаю формы бутстрапа (я новичок в веб-страницах), в основном, как сказать, что это POST и как поместить имена переменных. Я искал это на сайтах вроде: http://bootsnipp.com/forms?version=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>