継続は力なり＃３２

2020年3月31日 23:56

フォームとテーブル

フォーム関連の要素

フォーム全体を囲む要素

「Form要素」は、その要素内に含んでいるフォーム関連要素で入力・選択したデータの送信や送信方法を指定する要素

テキスト入力欄やメニューなどは必ずしもこの要素の中に入れて使用する必要がないが、データをサーバーなどに送信するのであればform要素内に入れる必要がある

form要素に指定できる属性

・action="送信先のURL"
データの送信先のURLを指定

・method="送信方法"
データの送信先の指定
「get（初期値）」または「post」が指定できる
「get」はURLの後ろにデータをつけ加えて送信する方法
「port」はURLとは別に（HTTPリクエストとは別のデータ本体として）データを送信する

・enctype="MINEタイプ"
method属性の値が「port」の時の、データを送信する際のMIMEタイプを指定
「application/x-www-form-urlencoded（初期値）」「multipart/form-data」「text/plain」のいずれかが指定できる
データとしてファイルを送信する場合、「multipart/form-data」を指定する必要がある

・name="フォームの名前"
フォームを参照するための名前をしてする

入力欄やボタンを生成する要素

フォームで使用されるテキスト入力欄や各種ボタン類の多くは、「input要素」というたった一種類の空要素によって生成される

input要素をどのフォーム部品にするのかは、「type属性」で指定する

フォーム部品の種類によって、使用する属性とその機能は違ってくる

ユーザーによって入力・選択されたデータは、「name属性」で指定した名前とペアで送信される

input要素に指定できる属性

・type="フォーム部品の種類"
このinput要素を、どのフォーム部品にするのかを次のキーワードで指定

・name="部品の名前"
このフォーム部品の名前を指定する
入力・選択されたデータは、この名前とペアで送信される
同じ選択項目内でのチェックボックスまたはラジオボタンには同じ名前をつける必要がある

・value="初期値 / ラベル / 送信値"
テキスト入力欄の場合は、そこに最初から入力されている初期値になる
ボタンの場合は、そのボタンのラベルとなる
チェックボックスまたはラジオボタンの場合は、その項目を選択した時にサーバーに送信される値となる

・size="文字数"
テキスト入力欄の文字数を指定
この属性に指定した値によってテキスト入力欄の幅が変化する
初期値は「２０」

・maxlength="最大文字数"
テキスト入力欄に入力できる最大の文字数を指定する

・checked
チェクボックスまたはラジオボタンを選択した状態にする

・readonly
このフォーム部品を変更不可（選択は可能）の状態にする

・disabled
このフォーム部品を変更・選択不可の状態にする

・scr="画像のURL"
画像の送信ボタンにする際の「画像のURL」を指定する

・width="幅"
画像の送信ボタンの画像の幅（実際の幅ではなく表示される値）をピクセル数で指定する

・hight="高さ"
画像の送信ボタンの画像の高さ（実際の高さではなく表示される高さ）をピクセル数で指定する

・alt="代替テキスト"
画像の送信ボタンの画像が表示できない場合に、その代わりとして使用するテキストを指定する

input要素の使用例

HTML

<form action="sample.cgi" method="port">
<p>
text:<input type="text" name="type01">
</p>
<p>
password:<input type="password" name="type02">
</p>
<p>
checkbox:
<input type="checkbox"name="type03" value="c1"checked>項目１
<input type="checkbox"name="type03" value="c2">項目２
<input type="checkbox"name="type03" value="c3">項目３
</p>
<p>
radio:
<input type="radio"name="type04" value="r1"checked>項目１
<input type="radio"name="type04" value="r2">項目２
<input type="radio"name="type04" value="r3">項目３
</p>
<p>
file:<input type"file" name="type05">
</p>
<p>
hidden:<input type="hidden" value="h1"name="type06"
</p>
<p>
submit:<input type="submit">
</p>
<p>
reset:<input type="reset">
</p>
<p>
button:<input type="button" value="ボタン">
</p>
<p>
image:<input type="image" src="stone.png" alt="送信">
</form>