登録フォーム

このチュートリアルでは、メールアドレスとパスワードの入力や長さの確認、メールアドレスの形式の有効性などを含むサインアップフォームを作成する方法について説明します。すべてのステップを行う必要はないので試したいプロセスまでスキップしても大丈夫です。

デザインの設定

<aside> 💡 ヒント フォームの入力をタブで確認するために、Layers Panel（レイヤーパネル）でレイヤー（上から下へ）に移動させることで、表示が変わります。

</aside>

ここでは、メールアドレス（Email）とパスワード（Password）の各inputにステートを作成する方法をご紹介します。State 1 - Base（ベースのステート）とEmpty（空欄時のステート）を準備します。

入力ラベルとテキストラベルを選択し、トップバーのAdd State(ステートの追加)をクリックします。 States 1 - Base（ベースのステートには旗アイコンが表示される）は自動生成されます。
Add Stateから新しくステートを追加し、ステート名をEmptyにしてEnterを押して作成します。
EmptyステートのグループにText（テキスト要素）を追加します。
Emptyステートのすべての要素を赤色に変更します。これにより入力エラーの表示がわかりやすくなります。
上記の手順をパスワードのinputにも行います。