セマンティックHTML：フォームボタンを配置する場所は？

Question

は、次のフォームを考えてみましょう：

<form> 
    <h2>Form</h2> 

    <fieldset> 
     <legend>Simple list with Create/Delete</legend> 

     [...] 

     <footer> 
      <button>Add</button> 
      <button>Remove</button> 
      <button>Remove all</button> 
     </footer> 
    </fieldset> 

    <fieldset> 
     <legend>Single input</legend> 

     <input type="file" /> 

     <footer> 
      <button>Save as PDF</button> 
      <button>Save as XLS</button> 
      <button>Save as SVG</button> 
     </footer> 
    </fieldset> 

    <fieldset> 
     <legend>Dynamic wizard</legend> 

     [...] 

     <footer> 
      <button>Next</button> 
     </footer> 
    </fieldset> 

    [...] 

    <footer> 
     <button>Reset</button> 
     <button>Cancel</button> 
     <button>Save</button> 
    </footer> 
</form> 

私は<form>または<fieldset>内<footer>を使用しての考えと快適に感じるが、それが正しいかどうイムはわからない、それはフッター

私はで飽和ビットに見えます<footer>の代わりに<div>を使用することができますが、「意味的に不良」と感じ、<menu>は1つのボタンを使用すると厄介です。

おそらく解決策は、<form>または<fieldset>の直下に配置することです。

<form> 
    <h2>Form</h2> 

    [...] 

    <button>Reset</button> 
    <button>Cancel</button> 
    <button>Save</button> 
</form> 

¿何をお勧めしますか？

Answer 1

フォームフィールドとボタンを別々のsectionブロックに配置することができます。

<form> 
    <section class="fields"> 
     <fieldset> 
      <legend>Simple list with Create/Delete</legend> 
      ... 
     </fieldset> 
    </section> 
    <section class="fields"> 
     <fieldset> 
      <legend>Single input</legend> 
      ... 
     </fieldset> 
    </section> 
    <section class="buttons"> 
     <button type="button">Reset</button> 
     <button type="button">Cancel</button> 
     <button type="submit">Save</button> 
    </section> 
</form>