DEV Community

kaede
kaede

Posted on • Updated on

Next 基礎 Part 03 -- フォームを作る

why

フォームをしっかり全て作ったことがない。網羅したい。

AI の ChatGPT にきいた。

1. テキスト入力欄の作成
最も基本的なフォーム要素であるテキスト入力欄を作成します。
2. パスワード入力欄の作成
パスワードを入力するためのフォーム要素であるパスワード入力欄を作成します。
3. メールアドレス入力欄の作成
メールアドレスを入力するためのフォーム要素であるメールアドレス入力欄を作成します。
4. 数字入力欄の作成
数値を入力するためのフォーム要素である数字入力欄を作成します。
5. テキストエリアの作成
複数行のテキストを入力するためのフォーム要素であるテキストエリアを作成します。
6. チェックボックスの作成
複数の選択肢から一つ以上を選ぶためのフォーム要素であるチェックボックスを作成します。
7. ラジオボタンの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるラジオボタンを作成します。
8. セレクトボックスの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるセレクトボックスを作成します。
9. マルチセレクトボックスの作成
複数の選択肢から複数選ぶためのフォーム要素であるマルチセレクトボックスを作成します。
10. スライダーの作成
数値を範囲で選択するためのフォーム要素であるスライダーを作成します。
11. スイッチの作成
オン・オフを選択するためのフォーム要素であるスイッチを作成します。
12. 日付入力欄の作成
日付を選択するためのフォーム要素である日付入力欄を作成します。
13. 時刻入力欄の作成
時刻を選択するためのフォーム要素である時刻入力欄を作成します。
14. ファイルアップロード機能の作成
ファイルをアップロードするためのフォーム要素
Enter fullscreen mode Exit fullscreen mode

このように返してくれた。

この通りに作っていく。


0. 共通のスタイリング

見やすいように作る。

<div className={styles.container}>
  <h1>person-web</h1>
  <input 
    type="text" 
    className={styles.item}
  />
  <input 
    type="text" 
    className={styles.item}
  />
</div>
Enter fullscreen mode Exit fullscreen mode

このように

コンテナの中にアイテムを並べる想定。

Home.modules.css

ここに

.container {
  padding: 6rem; 
  /* ないと上に詰まる */
  flex-direction: column;
  display: flex;
  align-items: center;
  /* 横方向に中央に揃える、かつ長さを短くしている */
}
.item {
  margin-top: 1rem;
  min-height: 1.5rem;
  font-size: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

このように並べ方とサイズを決めた。

Image description

すると、このように見た目を作れる。


1. テキスト

const [text, setText] = useState<String>("")
Enter fullscreen mode Exit fullscreen mode

text, setText のステートを用意する。

  const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
    setText(e.target.value)
  }
Enter fullscreen mode Exit fullscreen mode

受け取った入力イベントの値をログに出して、
Text ステートに入れるハンドラ関数を作成する。

<input 
  type="text" 
  onInput={handleInputText} 
  value={String(text)}
  className={styles.item}
/>
Enter fullscreen mode Exit fullscreen mode

input に組み込む。
中身を String にして受け取らないとエラーになる。

Image description

これでテキストが入力できる。


2. パスワード

<input 
  type="password" 
  onInput={handleInputPassword} 
  value={String(password)}
  className={styles.item}
/>
Enter fullscreen mode Exit fullscreen mode

テキストとほぼ同じ。
タイプだけパスワードにする。

Image description

これで、ショルダーハック防止仕様のテキストフォームが作れる。

また、Chrome がパスワードをサジェストもしてくれる。


Top comments (0)