why
フォームをしっかり全て作ったことがない。網羅したい。
AI の ChatGPT にきいた。
1. テキスト入力欄の作成
最も基本的なフォーム要素であるテキスト入力欄を作成します。
2. パスワード入力欄の作成
パスワードを入力するためのフォーム要素であるパスワード入力欄を作成します。
3. メールアドレス入力欄の作成
メールアドレスを入力するためのフォーム要素であるメールアドレス入力欄を作成します。
4. 数字入力欄の作成
数値を入力するためのフォーム要素である数字入力欄を作成します。
5. テキストエリアの作成
複数行のテキストを入力するためのフォーム要素であるテキストエリアを作成します。
6. チェックボックスの作成
複数の選択肢から一つ以上を選ぶためのフォーム要素であるチェックボックスを作成します。
7. ラジオボタンの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるラジオボタンを作成します。
8. セレクトボックスの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるセレクトボックスを作成します。
9. マルチセレクトボックスの作成
複数の選択肢から複数選ぶためのフォーム要素であるマルチセレクトボックスを作成します。
10. スライダーの作成
数値を範囲で選択するためのフォーム要素であるスライダーを作成します。
11. スイッチの作成
オン・オフを選択するためのフォーム要素であるスイッチを作成します。
12. 日付入力欄の作成
日付を選択するためのフォーム要素である日付入力欄を作成します。
13. 時刻入力欄の作成
時刻を選択するためのフォーム要素である時刻入力欄を作成します。
14. ファイルアップロード機能の作成
ファイルをアップロードするためのフォーム要素
このように返してくれた。
この通りに作っていく。
0. 共通のスタイリング
見やすいように作る。
<div className={styles.container}>
<h1>person-web</h1>
<input
type="text"
className={styles.item}
/>
<input
type="text"
className={styles.item}
/>
</div>
このように
コンテナの中にアイテムを並べる想定。
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;
}
このように並べ方とサイズを決めた。
すると、このように見た目を作れる。
1. テキスト
const [text, setText] = useState<String>("")
text, setText のステートを用意する。
const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value);
setText(e.target.value)
}
受け取った入力イベントの値をログに出して、
Text ステートに入れるハンドラ関数を作成する。
<input
type="text"
onInput={handleInputText}
value={String(text)}
className={styles.item}
/>
input に組み込む。
中身を String にして受け取らないとエラーになる。
これでテキストが入力できる。
2. パスワード
<input
type="password"
onInput={handleInputPassword}
value={String(password)}
className={styles.item}
/>
テキストとほぼ同じ。
タイプだけパスワードにする。
これで、ショルダーハック防止仕様のテキストフォームが作れる。
また、Chrome がパスワードをサジェストもしてくれる。
Top comments (0)