formについての自分用メモ


目的

割と良く使いそうな項目を、メモ的にまとめておく。

ダブルクリック防止

サーバー側でも対策はするが、いちいち画面遷移したりエラーメッセージ出てくるとユーザビリティが悪いので、クライアント側でも制御しておくと良いと思った。


$("form").submit(function() {
  $(":submit", this).prop("disabled", true);
});

エンターキーで送信を無効

入力フォームの数が多い場合は、エンターキーでの送信を無効化した方が使いやすいと思った。


<script>
    $(function(){
        $("input"). keydown(function(e) {
            if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
                return false;
            } else {
                return true;
            }
        });
    });
</script>

画像なども送信できるようにする

enctypeを指定する

<form method="post" action="test.html" enctype="multipart/form-data">

</form>

バリデーション

郵便番号とかで便利


郵便番号:<input type="text" name="post" pattern="\d{3}-\d{4}" title="郵便番号は、3桁の数字、ハイフン(-)、4桁の数字の順で記入してください。">

自動入力機能に対応

Chromeやsafariなどの自動入力機能の対応のさせ方