HTMLのフォームについての勉強

HTMLのフォームについての勉強をしましょう。

さて、今回はHTMLのフォームについて勉強していきましょう。

以前にも勉強したことはありましたが、丁寧な説明とは言えませんでしたので笑

今回は、自分のHTMLの勉強のためにも、少し丁寧にお伝えできればと思います。

それでは、HTMLのフォームについて勉強していきましょう。

フォームの要素

<formaction="CGIまたはPHP" methad="postまたはget">
</form>

action属性…データを受け取るプログラム
　　　　　　（現在は、CGIよりPHPを使います）
method属性…データの送信方法
　　　　　　（お客様の情報を得る時は「post」を使います）

inputの要素

・フォームを構成する様々な入力部品を作成する
・終了タグはありません
・<p>で囲んでブロックレベルにする

<inputtype="値"name="名前" valru="文字列">

・type属性…フォーム部品の種類を指定
　　　　　　・text
　　　　　　・radio
　　　　　　・checkbox
　　　　　　・submit
　　　　　　・password
　　　　　　・reset
　　　　　　・button
　　　　　　・image
　　　　　　・file
　　　　　　・hidden
・name属性…データベースに格納するためのセルの名前
・value属性…配列（文字列）を指定して値を取得する

type属性

text

・1行テキスト領域

<inputtype="text"name="name"size="20"maxlength="10"value="お名前">

・1行テキストボックス
・2行以上にわたる長い文章を入力させたい場合には、<texrea>～</texrea>を使用する

radio

・ラジオボタン

<inputtype="radio"name="sex"value="male"checked>男性
<inputtype="radio"name="sex"value="female">女性

・複数の選択肢の中から一つしか選択できない
・複数を一つのグループとして認識させるには、name属性で同じ名前を付ける
・checked属性…その項目はあらかじめチェックの付いた状態になる

checkbox

・チェックボックス

<inputtype="checkbox"name="mobile"value="1"checked>iphone
<inputtype="checkbox"name="mobile"value="2">Android
<inputtype="checkbox"name="mobile"value="3">その他

・複数選択が可能
・checked属性…その項目はあらかじめチェックの付いた状態になる

submit

・送信ボタン

<inputtype="submit"value="送信">

・ボタンで入力情報を送信するものは全て「submit」
・value…送信ボタンの名前

password

・パスワード用領域

<inputtype="password"value="password">

reset

・リセットボタン

<inputtype="reset"value="リセット">

・value…リセットボタンの名前

button

・汎用ボタン

<inputtype="button"value="ボタン">

・value…汎用ボタンの名前

image

・画像を使用した送信ボタン

<inputtype="image"src="img/img01.jpg"name="button"alt="送信する"align="middle">

src…ボタンに使用する画像のURL
alt…画像の代わりになるテキスト
align…画像に並ぶテキストの位置
　　　 (top、middle、bottom、left、right)
　　　 ※このalign属性は、HTML 4.01では非推奨です