フォームの基本

form要素の書き方

<form action="プログラムの場所・ファイル名" method="送信方法">
フォームの内容
</form>

フォームの入力形式を定義する「input」要素

<form action="program.php" method="post">
<input type="入力する形式属性値" name="名前">
<!--セキュリティに配慮したpost/配慮しないget-->

type属性に設定できる値

type="text"<!--１行のテキストボックス/複数の場合はtextarea-->
type=password"<!--伏せ字で表示される-->
type="checkbox"<!--入力時に複数選択が可能-->
type="radio"<!--一つしか選択できない-->
type="file"<!--ファイルの添付-->
type="hidden"<!--画面上に表示せずデータを送信(プログラム処理のために使用)-->
type="submit"<!--送信ボタン-->
type="reset"<!--入力した値を初期値に戻す-->
type="button"<!--汎用のボタン-->
type="image"<!--画像を使用したボタン-->
type="search"<!--検索キーワード-->
type="tel"<!--電話番号-->
type="url"<!--URL-->
type="email"<!--メールアドレス-->
type="date"<!--日付の入力-->

その他の主な属性

checked属性<!--ラジオやチェックボックスをあらかじめチェック済みにする-->
maxlength属性<!--入力できる最大文字数を指定する-->
size属性<!--入力欄の幅を文字数で指定する-->
src属性<!--type属性の値が「image」である場合に画像ファイルのurlを指定する-->
reqired属性<!--入力が必ず必要な項目に指定することで未入力時にエラーを表示させる-->
name属性<!--要素の名前を指定する-->
value属性<!--初期値を指定する/ラジオ&チェックボックスで必須-->

メニューを作成するselect要素/option要素

select要素に指定できる属性

name属性<!--入力項目をプログラムで処理するための名前を指定する-->
size属性<!--同時に表示するメニュー項目の数を指定する-->
required属性<!--入力が必ず必要な項目に指定することで。未入力時にエラーメッセージを表示させる-->

option要素に指定できる属性

value属性<!--あらかじめwebサーバーに送信する値を指定しておき、ユーザーに選択肢の中から選ばせる-->
serected属性<!--選択肢をあらかじめ選択済みにする-->

select要素・option要素の書き方

<form action="program.php" method="post">
<select name="名前">
<option value="選択肢の値１つ目" selected>選択肢１つ目</option>
<option value="選択肢の値２つ目" >選択肢２つ目</option>
<option value="選択肢の値３つ目" >選択肢３つ目</option>
</select>
</form>

複数行の文字データtextarea要素

<form action="program.php" method="post">
<textarea name="名前"></textarea>
</form>

textarea要素に指定できる属性

cols属性<!--1行あたりの最大文字数を指定-->
rows属性<!--入力欄の高さを行数で指定-->
wrap属性<!--入力した文字の自動折返しルールを指定--><!--値にはsoft,hard,offを指定する。softはサーバーには影響せずhardは影響する-->
maxlength属性<!--入力可能な最大文字数を指定-->
minlength属性<!--設定した文字数よりも下回る場合は入力不可に指定する-->
name属性<!--入力項目の名前を指定する-->
placeholder属性<!--入力する内容のヒントとなる言葉や例文を指定-->
required属性<!--入力が必ず必要とされる項目に指定することで、未入力時にエラーを表示させる-->

ボタンを作成するbutton要素

button要素のtype属性に指定できる値
submit<!--フォームに入力しｔ内容を送信するボタン(初期値)-->
reset<!--フォームに入力した内容をリセットするボタン-->
button<!--何もしない汎用的なボタン-->

button要素の書き方

<form acrion="program.php" method="post">
<button type="ボタンの種類" name="名前">ボタンに表示するテキスト</button>
</form>

label要素を使って入力しやすいフォーム

<form action="program.php" method="post">
<label>項目名 入力名</label></form>

例
<form action="program.php" method="post">
<label>お名前<input type="text" name="your-name"> </label>
</form>

label要素のfor属性を使う<!--for属性の値はinput要素のidであるyour-nameを指定>

<label>お名前<input type="text" name="your-name"> </label>
</form>
<form action="program.php" method="post">
<dl>
<dt><label for="your-name">お名前</label></dt>
<dd><input type="text" id="your-name"> </label>
</dl>
</form>