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

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

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

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

const [text, setText] = useState<String>("")

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

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

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