div要素をクリックしてformをsubmitする方法

Question

input type="submit"やbutton type="submit"ではなくdiv要素をクリックすることでformをsubmitしたいと考えております。

<form>
 <input type="text">
 <div>こちらから投稿してください</div>
</form>

調べたところdiv要素にonClick="this.form.submit();"を設定する等で対応はできることは分かったのですが、一般的にonClickを設定することは推奨されない(記事)ということも承知をしております。
div要素を利用したい理由としては、他のcssとの調整でbuttonやinput等を利用するとdefaultのcssをクリアして再度修飾するなど、煩雑であるため、divを活かすことができる方法があれば採用したいということが主になります。

div要素に属性を設定するなど、良い解決策はございますでしょうか？
よろしくお願いいたします。

Comments

[Lhankor_Mhy]

質問のご希望とは異なると思いますので回答欄ではなくここに書きますが、「他のcssとの調整でbuttonやinput等を利用するとdefaultのcssをクリアして再度修飾するなど、煩雑である」とのことですが、

all: unset;

で済むと思うので、それほど煩雑ではないのでは、と思っています。
https://developer.mozilla.org/ja/docs/Web/CSS/unset

---

また、Destyle.css を採用するのもいいかもしれないです。
https://webdesign-trends.net/entry/8137#destylecss

[m.ts10806]

>一般的にonClickを設定することは推奨されない

念の為、出典明示を

[SugiuraY]

ありがとうございます。
all: unset;存じ上げませんでした。ありがとうございます。さて一方で、unsetにより例えばbuttonのデフォルトのcss装飾を失った状態の要素ですが、divのデフォルト装飾を施そうと思った場合には、地道にひとつずつ加えていくことになるのでしょうか？それともunsetの反対のように、一括して特定要素のデフォルト装飾を施す術はあるのでしょうか？

[SugiuraY]

低評価をくださった方、ご指摘ありがとうございます。
後学のために質問の内容なのか、質問の方法なのか具体的なご指摘をいただけますと今後の利用に活かすことができますゆえ、わがままを承知ですがご協力いただくことができればうれしいです。　

よろしくお願い申し上げます。

[Lhankor_Mhy]

それはないです。

ただ、div のデフォルトスタイルはおおむね、

display: block;

だけなはずなので、それほど手間ではないのでは、と思っています。
https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html

[m.ts10806]

私は低評価してないですが、コメントしただけでは通知行かないように思います（質問したことないので推測）
質問を編集すれば通知行くはずなので、それで催促としては。　
※ついでに出典明示を

[SugiuraY]

m.ts10806様
ありがとうございます。MDNのDocsにおいて、公式に非推奨には分類されていないようですが、一般的な記事としてのものを出典として本文にアップさせていただきました。また、本サービス内においても、何度か利用は推奨しないというコメントをいただいた記憶はあるのですが、見つけ次第、参考としてアップさせていただくかもしれません。

[SugiuraY]

Lhankor_Mhy様
理解いたしました。ありがとうございます。

[SugiuraY]

m.ts10806様
コメントをくださった方には編集でメール通知は行きますが、マイナス評価はちょっと不明です。念のためにやってみますが、コメントをくださった方、通知がいくことをお許しください。

Answer 1

アクセシビリティへの配慮(role属性やキーボード操作可能にすること)があれば、<div> で送信しても問題はないと思います。

onClick="this.form.submit();"

一般的に「onclick= ではなく addEventListener('click', ...) を使え」というのはありますが、this.form は動きませんし、キーボードでも送信できるようにkeypress イベントも処理したほうが良いでしょう。

---

<button>のスタイルは -webkit-appearance:none だけでほぼリセットできるので、そんなに大変だとは思いませんです。

Comments

[SugiuraY]

コメントありがとうございます。
いずれも承知をいたしました。今回は他の方からもコメントがあった通り、cssをリセットして再装飾することを検討してみたいと思います。
少し、誤解があるかもしれませんが「keypress イベントも処理したほうが良い」のコメントについては、例えば、submit属性を持つ要素をなくすことで、エンターキーで直感的に実行できる操作ができなくなってしまうためこれに対応する方が望ましいという意味に受け止めましたが、如何でしょうか？

[int32_t]

「エンターキーで直感的に実行できる操作」がなんのことかわかりませんが、keypress はアクセシビリティの話です。マウスもタッチスクリーンも使えないがキーボードなら使えるというユーザも想定する必要があるので、TABキーで送信ボタンにフォーカスを移動して、ENTER やスペースキーで送信を実行できるべきです。
https://www.w3.org/WAI/fundamentals/accessibility-principles/#keyboard

[SugiuraY]

ありがとうございます。承知をいたしました。イメージと一致していたので、よかったです。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('form div').addEventListener('click',e=>{
    e.target.closest('form').submit();
  });
});
</script>
<form>
 <input type="text" name="hoge">
 <div>こちらから投稿してください</div>
</form>

Comments

[SugiuraY]

ありがとうございます。JS側でsubmit();自体ができるのですね。存じ上げませんでした。大変勉強になりました。

[yambejp]

ちなみにdivにthis.formとしてもdiv自体がformの送信可能要素ではないので参照されないとおもいます。やるなら自分から親要素に遡るthis.closest('form')のような書き方にしてください

[SugiuraY]

ありがとうございます。念のために動きを確認しました。おっしゃる通り、参照されずエラーとなりました。
一方closest()でform要素まで指定すると実行できることは確認できました。よろしくお願いいたします。