facebook twitter hatena line email

Html/bootstrap/bootstrap3/検索ボックス

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

通常検索ボックス

 <form class="form-group navbar-form navbar-left form-inline" action="/tag">
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </span>
        <input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
        <span class="input-group-btn">
        <input class="btn btn-default" type="submit" value="Go">
        </span>
    </div><!-- /input-group -->
 </form>

種類を選択できる検索ボックス

 <form class="form-group navbar-form navbar-left form-inline" action="/tag">
    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </span>
        <input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
        <span class="input-group-addon" style="margin:0;padding:0">
        </span>
        <select name="filter" class="form-control">
          <option value="video">動画</option>
          <option value="image">画像</option>
        </select>
        <span class="input-group-btn">
        <input class="btn btn-default" type="submit" value="Go">
        </span>
    </div><!-- /input-group -->
 </form>