フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
Cookie の性質を利用した攻撃と Same Site Cookie の効果 | blog.jxck.io
Intro Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。 この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、 CSRF や Timing Attack などが数多く知られており、個別に対策がなされてきた。 現在、提案実装されている SameSite Cookie は、そもそもの Cookie の挙動を変更し、こうした問題を根本的に解決すると期待されている。 Cookie の挙動とそれを用いた攻撃、そして Same Site Cookie について解説する。 Cookie の挙動 Cookie は、 Set-Cookie によって提供したドメインと紐づけてブラウザに保存され、同じドメインへのリクエストに自動的に付与される。 最も使われる場面は、ユーザの識別子となるランダムな値を SessionI
Introducing ngxErrors, declarative form errors for Angular - Ultimate Courses
What is ngxErrors? If you’re familiar with AngularJS (1.x) then you’ve likely stumbled across ngMessages. It’s a really tidy form errors module that allows you to declaratively add errors to your templates using a switch-statement style approach. ngxErrors is my stab at the beginning of achieving similar results using Angular (v2 and onwards), with a little more ease of use, less directives and ma
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Custom Form Controls in Angular
There are many things that Angular helps us out with when creating forms. We’ve covered several topics on Forms in Angular, like model-driven forms and template-driven forms. If you haven’t read those articles yet, we highly recommend you to do so as this one is based on them. Almero Steyn, one of our training students, who later on contributed to the official documentation as part of the Docs Aut
Angular Form Builder and Validation Management - Angular 17 | 16
This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions. Angular 1 has the handy ngMessages modules to help manage error messages and validation in forms. This post I’ll show how to build a custom messages component in Angular to easily manage validation similar to ng1’s ngMessages. Angular has a
How to Build Nested Model-driven Forms in Angular 2 | DigitalOcean
Introduction With the Angular 2’s new forms module, we can build complex forms with even more intuitive syntax. In this article, we will learn about how to build a nested model-driven form with validation using the latest forms module. If you are new to model-driven forms, please refer to How to Build Model-driven Forms in Angular 2](https://www.digitalocean.com/community/tutorials/using-angular-2
Custom Validators in Angular
Forms are part of almost every web application out there. Angular strives for making working with forms a breeze. While there are a couple of built-in validators provided by the framework, we often need to add some custom validation capabilities to our application’s form, in order to fulfill our needs. We can easily extend the browser vocabulary with additional custom validators and in this articl
The New Rules of Form Design | UX Booth
Every day, we use forms for essential online activity. We fill them out to complete purchases; to sign up for email lists, social networks, and more; to participate in discussions; and to describe that oh-so-delicious looking photo of our lunch. It’s hardly hyperbole to say they’re the lifeblood of digital information sharing. For many years, however, with few improvements to be found, forms have
Google Apps Script 実践メモ（Form Submit） - Qiita
先日、仕事で必要に迫られ、Googleフォームからスプレッドシート周りをごにょごにょGoogle Apps Scriptで開発しました。 基本的にはExcel VBAと同じようなものなのですが、パフォーマンスを出すための工夫や、なんだかよくわからないけどクリアしてきた問題などを忘れないうちにメモしようと思います。 （まずはForm Submitから。SpreadSheet、Driveと追加していきます） フォーム Submit時（送信ボタン押した時）に何か処理をしたい やりたかったのは、Googleフォームをみんなに展開して、スプレッドシートの回答シートにレコードが入って来る度に、そのレコードに対して処理をする、ということです。（処理の過程で気づいたことも今後いろいろ追記していく予定です） まずはトリガとイベントを知る トリガは大きく2種類に分類されていて、まずSimple Trigger
HTML5 Forms: JavaScript and the Constraint Validation API — SitePoint
May 23, 2014HTML5 Forms: JavaScript and the Constraint Validation API For the final article in this three-part series about HTML5 web forms we’ll discuss JavaScript integration and the Constraint Validation API. If you’ve not done so already, please read The Markup and CSS articles to ensure you’re familiar with the concepts. HTML5 allows us to implement client-side form validation without any Jav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn Forms | web.dev
Focus on newly added input element
Angular
Reactive FormGroup validation with AbstractControl in Angular 2 - Ultimate Courses
Web Fundamentals — Google Developers
Angular
Angular: Empty Fiddle - JSFiddle - Code Playground