HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転
日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassing interactive constraint validation and without firing a submit event. https://html.spec.whatwg.org/multipage/forms.html#htmlformelement つまり、例えば下のような HTML form の場合、
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる
一昨日のエントリ『書籍「気づけばプロ並みPHP」にリモートスクリプト実行の脆弱性』にて、ファイル送信フォームに対するCSRF攻撃の文脈で、私は以下のように書きました。 通常のHTMLフォームを使ったCSRF攻撃では、Content-Typeをmultipart/form-dataにすることまでは可能ですが、ファイルの中身とファイル名を指定する方法がありません。従って、HTMLフォームによる攻撃経路はありません。 大半の方は、「ああ、そうだよね」という感じでお読みいただいたように思いますが、昨日サイバーディフェンス研究所の福森大喜さんから、「それIE8以前ならできるよ」と教えていただきました。福森さんの許可を得て、以下にPoCを公開します。 <form enctype="multipart/form-data" action="pro_add_check.php" method="POST"
AngularJSで「メールアドレス（確認のためもう一度入力）」のバリデーションを実装する - ブログ - ワルブリックス株式会社
フォームには「メールアドレス」と「メールアドレス（確認）」欄があり、いずれも必須項目とする。フォームは入力内容が全て正しい時のみ submitできる。 AngularJSに項目が入力必須であることを伝えるには、input要素に required 属性を付ける。要件を満たしていない時に表示するメッセージの表示/非表示は、ng-show属性に フォームのname.input要素のname.$error.required を指定することで制御する。 フォーム全体の入力内容が要件を満たしている時のみ submitボタンを有効にするには、submitボタンの ng-disabled属性に !フォームのname.$validを指定する。 入力内容はメールアドレスとして相応しい文字列でなければならないものとする。 項目がメールアドレスとして正しい文字列であることを AngularJSにバリデーションさせ
Web Application の validation はどのレイヤーでかけるべきか - tokuhirom's blog
数年前にも同じことかいた気がするけど、最近の状況にあわせてかいてみる。 途中で面倒になってきて説明が雑になっている点をご容赦ください。 言いたいことは「結局、昔はサーバサイドで懇切丁寧なエラーメッセージを出すためにModelではなくControllerでバリデーションに関する知識が必要だったけど 今はJavaScriptでやるから不要だよね１１１」ってことです。 この表題は、よく話題にあがるところなのだが、理想論としては Model, Controller, Client side のいずれにおいてもきっちりと validation を行うことがのぞましい。 しかし、実際にはなかなか面倒である。ということで、どこをはぶくかというと Controller における Validation であろう。 ユーザーに対する親切なメッセージは JS の側でだすのが理想的。model の validat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
