buttonタグでdivタグ全体をボタンにし、フォームでPOSTしたい！

こんにちは、JeffTechです。

この記事で実現できること

buttonタグを親要素のdivタグ全体に広げて、ボタン(リンク)を作成し、フォームでPOSTできるようにします。
aタグで紹介している記事は多数あったのですが、buttonタグで紹介している記事が見当たらなかったので、書いていきます！

開発環境

OS：macOS Catalina
テキストエディタ：VSCode
ブラウザ：Chrome
使用言語：HTML, CSS

実装

HTML

index.html

<form action="送信先" method="POST" name="form_post">
  <div class="linkbox">
    <p>タイトル</p>
    <p>これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文これは本文</p>
    <input name="user_id" type="hidden" value="ここに送りたい値を記述">
    <button type="submit"></button>
  </div>
</form>

これで親要素のdivタグの中に、buttonタグを配置して準備は完了しました。
formタグ→divタグ→buttonタグの順番でコーディングしてください。

CSS

style.css

.linkbox {
    position: relative;

    /* ここはボタン位置がわかりやすいように設定しています */
    background-color: aqua;
    height: 200px;
    width: 500px;
}
.linkbox button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    /* buttonのスタイル削除 */
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

まずはポジションを使用して、buttonタグを浮き上がらせて、buttonタグのスタイルをすべて削除することで、スケスケのbuttonタグが出来上がるというイメージです。

最後に

少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku