登录 | 注册 | FAQ
Anonymous

How to create a form with checkboxes/hoverable dropdown

+ 发表回复

2 篇帖子 分页: 1 / 1


How to create a form with checkboxes/hoverable dropdown

raymond_55 » 周四 7月 06, 2017 3:56 pm

Hi. I also psoted this question here: https://stackoverflow.com/questions/44912472/how-to-create-a-form-with-checkboxes-and-a-hoverable-dropdown-menu-to-chose-acti

I would like to implement the following. A table with a checkbox in a cell for every row. To submit the form a dropdown menu offers the different actions to take (move, delete, etc).

It would look like:
图片

The submit button would be a hoverable dropdown with different actions:
图片

The working code for the table:
代码: 全选
    <form action="/action_page.php" method="get">
       <input type="submit" value="Submit">      
       <table>
         @foreach ($tags as $tag)
         <tr>
           <td>
              <br>{{$tag->title}}</br>
           </td>                
           <td>
               <input type="checkbox" name={{$tag->title}} value="true"><br>
           </td>
         </tr>      
         @endforeach
       </table>
      </form>


source: https://www.w3schools.com/tags/att_input_checked.asp

Potential code for the hoverable menu:
代码: 全选
    <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>


source: https://www.w3schools.com/howto/howto_css_dropdown.asp

How could this be achieved? A form has only one action for the button and how to make the submit button into a hoverable dropdown?

Thank you.
头像

raymond_55

  • 帖子: 1
  • 注册: 周四 7月 06, 2017 3:47 pm

Re: How to create a form with checkboxes/hoverable dropdown

frickarolos » 周五 8月 25, 2017 10:49 am

Use an input field with type="checkbox"
Or use this form generator http://html-css-js.com/html/generator/form/
Find some examples here http://html-css-js.com/html/tags/#input
头像

frickarolos

  • 帖子: 2
  • 注册: 周五 8月 25, 2017 10:43 am


+ 发表回复

分页: 1 / 1