facebook twitter hatena line email

「Html/bootstrap/bootstrap3/検索ボックス」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
 
行1: 行1:
 
==通常検索ボックス==
 
==通常検索ボックス==
<<wiki />form class="form-group navbar-form navbar-left form-inline" action="/tag">
+
<pre>
     <<wiki />div class="input-group">
+
<form class="form-group navbar-form navbar-left form-inline" action="/tag">
         <<wiki />span class="input-group-addon">
+
     <div class="input-group">
             <<wiki />span class="glyphicon glyphicon-search" aria-hidden="true"><<wiki />/span>
+
         <span class="input-group-addon">
         <<wiki />/span>
+
             <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
         <<wiki />input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
+
         </span>
         <<wiki />span class="input-group-btn">
+
         <input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
         <<wiki />input class="btn btn-default" type="submit" value="Go">
+
         <span class="input-group-btn">
         <<wiki />/span>
+
         <input class="btn btn-default" type="submit" value="Go">
     <<wiki />/div><<wiki />!-- /input-group -->
+
         </span>
  <<wiki />/form>
+
     </div><!-- /input-group -->
 +
  </form>
 +
</pre>
  
 
==種類を選択できる検索ボックス==
 
==種類を選択できる検索ボックス==
  <<wiki />form class="form-group navbar-form navbar-left form-inline" action="/tag">
+
<pre>
     <<wiki />div class="input-group">
+
  <form class="form-group navbar-form navbar-left form-inline" action="/tag">
         <<wiki />span class="input-group-addon">
+
     <div class="input-group">
             <<wiki />span class="glyphicon glyphicon-search" aria-hidden="true"><<wiki />/span>
+
         <span class="input-group-addon">
         <<wiki />/span>
+
             <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
         <<wiki />input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
+
         </span>
         <<wiki />span class="input-group-addon" style="margin:0;padding:0">
+
         <input type="text" class="form-control" placeholder="人気動画を見つける" size="20px" name="tag" value="{{$request.tag|escape}}" />
         <<wiki />/span>
+
         <span class="input-group-addon" style="margin:0;padding:0">
         <<wiki />select name="filter" class="form-control">
+
         </span>
           <<wiki />option value="video">動画<<wiki />/option>
+
         <select name="filter" class="form-control">
           <<wiki />option value="image">画像<<wiki />/option>
+
           <option value="video">動画</option>
         <<wiki />/select>
+
           <option value="image">画像</option>
         <<wiki />span class="input-group-btn">
+
         </select>
         <<wiki />input class="btn btn-default" type="submit" value="Go">
+
         <span class="input-group-btn">
         <<wiki />/span>
+
         <input class="btn btn-default" type="submit" value="Go">
     <<wiki />/div><<wiki />!-- /input-group -->
+
         </span>
  <<wiki />/form>
+
     </div><!-- /input-group -->
 +
  </form>
 +
</pre>

2015年11月8日 (日) 15:02時点における最新版

通常検索ボックス

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