フォームの作成と入力欄の設定
9月 26th, 2023
フォームの作成と入力欄の設定
フォームの作成
フォームには少なくともformタグと、inputタグが必要です。formタグでフォームを定義し、inputタグでフォームの中の入力欄、送信ボタンなどの部品を定義します。
上記の例はとてもシンプルですが、送信ボタンと入力項目が一つでもあればデータを送ることができるので、立派なフォームといえます。
inputタグについて
inputタグにはテキストエリアやチェックボックスなどたくさんの種類が用意されています。よく使う項目は下記の7つです。
・text
1行のテキストを入力するエリア
・email
emailアドレスを入力するエリア
@マークを忘れるとエラーメッセージを表示
・password
パスワードを入力するエリア
入力値は、「***」と隠して表示される
・number
数値を入力するエリア
数値以外入力を受け付けない
・radio
ラジオボタンを表示
複数の選択肢から一つだけを選択できる
・checkbox
チェックボックスを表示
選択肢の中から複数選択できる
・submit
送信ボタンを表示
・reset
入力内容をリセットするボタンを表示
入力欄の設定
一行程度のテキストが入力できるエリアを表示します。typeにはtextを設定します。
inputタグの属性について
・name属性
データを送信した先で項目を区別するための名前です。区別できるように他のnameと重複してはいけません。
・value属性
項目の初期値として使われます。value=”テスト”とすると、入力する前から”テストと入力された状態になります。
・placeholder属性
設定した文字列が、入力欄にうすく表示されます。「このように入力してください」のように入力例として使われることが多いです。
・require属性
必ず入力して欲しい項目に「required」と指定します。これが設定されている項目が空欄だと注意が出力されます。
・maxlength
最大文字数を指定します。例えばmaxlength=”10″なら10文字より多い文字は入力できなくなります。