飲食店検索

検索条件

<form method="get" action="" id="searchForm">

       <label class="toggle">
           <input type="checkbox" name="reservable" value="1">
           
       </label>
       予約できる店だけ
       <input type="submit" value="検索" class="search-btn" />

   <input class="form-row" type="text" name="検索" placeholder="店名" style="width:300px;" id="searchText" />

       <label>ジャンル</label>
       <select name="ジャンル" style="margin-left:8px;" id="genre">
           <option value="">すべてのジャンル</option>
           <option value="居酒屋">居酒屋</option>
           <option value="ダイニングバー・バル">ダイニングバー・バル</option>
           <option value="創作料理">創作料理</option>
           <option value="和食">和食</option>
           <option value="洋食">洋食</option>
           <option value="イタリアン・フレンチ">イタリアン・フレンチ</option>
           <option value="中華">中華</option>
           <option value="焼肉・ホルモン">焼肉・ホルモン</option>
           <option value="韓国料理">韓国料理</option>
           <option value="アジア・エスニック料理">アジア・エスニック料理</option>
           <option value="各国料理">各国料理</option>
           <option value="カラオケ・パーティ">カラオケ・パーティ</option>
           <option value="バー・カクテル">バー・カクテル</option>
           <option value="ラーメン">ラーメン</option>
           <option value=" お好み焼き・もんじゃ"> お好み焼き・もんじゃ</option>
           <option value="カフェ・スイーツ">カフェ・スイーツ</option>
           <option value="その他グルメ">その他グルメ</option>
       </select>

       <label>最寄り</label>
       <select name="station">
           <option value="">指定なし</option>
           <option value="川西能勢口">川西能勢口</option>
           <option value="雲雀丘花屋敷">雲雀丘花屋敷</option>
           <option value="川西池田">川西池田</option>
           <option value="北伊丹">北伊丹</option>
           <option value="絹延橋">絹延橋</option>
           <option value="滝山">滝山</option>
           <option value="鴬の森">鴬の森</option>
           <option value="鼓滝">鼓滝</option>
           <option value="多田">多田</option>
           <option value="平野">平野</option>
           <option value="一の鳥居">一の鳥居</option>
           <option value="畦野">畦野</option>
           <option value="山下">山下</option>
           <option value="笹部">笹部</option>
       </select>

       <label>予算</label>

           <input type="radio" name="lanch-dinner"><label>昼</label>
           <input type="radio" name="lanch-dinner"><label>夜</label>

           <label>下限</label>
           <select name="lunch_min">
               <option value="">指定なし</option>
               <option value="1000">1,000円</option>
               <option value="2000">2,000円</option>
               <option value="3000">3,000円</option>
           </select>

           〜

           <label>上限</label>
           <select name="lunch_max">
               <option value="">指定なし</option>
               <option value="2000">2,000円</option>
               <option value="3000">3,000円</option>
               <option value="5000">5,000円</option>
           </select>

   <details class="accordion">
       <summary>こだわり条件</summary>

       <fieldset>
           <legend>支払い方法</legend>
           <label><input type="checkbox" name="payment[]" value="cash"> 現金</label>
           <label><input type="checkbox" name="payment[]" value="credit"> カード</label>
           <label><input type="checkbox" name="payment[]" value="emoney"> 電子マネー</label>
           <label><input type="checkbox" name="payment[]" value="qr"> QR</label>
       </fieldset>

       <fieldset>
           <legend>禁煙 / 喫煙</legend>
           <label><input type="radio" name="smoking" value=""> 指定なし</label>
           <label><input type="radio" name="smoking" value="non"> 禁煙のみ</label>
           <label><input type="radio" name="smoking" value="allow"> 喫煙可</label>
       </fieldset>

       <fieldset>
           <legend>メニュー</legend>
           <label><input type="checkbox" name="menu[]" value="tabehodai"> 食べ放題</label>
           <label><input type="checkbox" name="menu[]" value="nomihodai"> 飲み放題</label>
           <label><input type="checkbox" name="menu[]" value="takeout"> テイクアウト</label>
       </fieldset>

       <fieldset>
           <legend>設備・サービス</legend>
           <label><input type="checkbox" name="equipment[]" value="parking"> 駐車場</label>
           <label><input type="checkbox" name="equipment[]" value="private"> 個室</label>
           <label><input type="checkbox" name="equipment[]" value="wifi"> Wi-Fi</label>
           <label><input type="checkbox" name="equipment[]" value="barrierfree"> バリアフリー</label>
           <label><input type="checkbox" name="equipment[]" value="kids"> お子様連れOK</label>
           <label><input type="checkbox" name="equipment[]" value="reserve"> 貸切</label>
       </fieldset>
   </details>

</form>

<style>

   .search-form {
       max-width: 700px;
       margin: 1em auto;
       font-size: 14px;
   }

   .form-row {
       display: flex;
       align-items: center;
       margin: 0.5em 0;
       gap: 1em;
   }

   /* トグルスイッチ */
   .toggle {
       position: relative;
       width: 40px;
       height: 22px;
       display: inline-block;
   }

   .toggle input {
       display: none;
   }

   .slider {
       position: absolute;
       cursor: pointer;
       inset: 0;
       background: #ccc;
       border-radius: 22px;
   }

   .slider::before {
       content: "";
       position: absolute;
       height: 18px;
       width: 18px;
       left: 2px;
       top: 2px;
       background: white;
       border-radius: 50%;
       transition: .3s;
   }

   .toggle input:checked+.slider {
       background: #4caf50;
   }

   .toggle input:checked+.slider::before {
       transform: translateX(18px);
   }

   /* アコーディオン */
   details {
       margin-top: 1em;
       border: 1px solid #ccc;
       padding: 1em;
       border-radius: 6px;
   }

   details summary {
       cursor: pointer;
       font-weight: bold;
   }

   fieldset {
       border: none;
       margin: 1em 0;
   }

   legend {
       font-weight: bold;
   }

.search-card {

 border: 1px solid #ddd;
 border-radius: 8px;
 padding: 10px;
 margin-bottom: 12px;
 max-width: 600px;
 transition: box-shadow 0.2s;
 max-height: 332px;

} .search-card:hover {

 box-shadow: 0 2px 8px rgba(0,0,0,0.2);

} .card-header {

 margin-bottom: 5px;

} .card-title {

 margin: 0;

} .card-genre {

 margin: 0;
 font-size: calc(1em - 3px);

} .img-crop {

 height: 200px;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;

} .img-crop p, .img-crop > div {

 height: 100%;
 margin: 0;
 display: flex;
 flex-direction: row;
 width: max-content;

} .crop-img img {

 width: 200px;
 height: 200px;
 object-fit: cover;
 border-radius: 4px;
 display: inline-block;
 margin-right: 2px;

} .card-info {

 margin-top: 10px;

} .card-cost, .card-address {

 margin: 0;
 font-size: calc(1em - 3px);

} </style> <script> document.getElementById('searchForm').addEventListener('submit', function(e) {

 const searchText = document.getElementById('searchText');
 const genre = document.getElementById('genre');
 if (searchText.value === ) {
   searchText.removeAttribute('name'); // 空のとき name属性を削除
 }
 if (genre.value === ) {
   genre.removeAttribute('name'); // 空のとき name属性を削除
 }

}); </script> </html>