フォームを構成するHTMLタグformとinputで送信してみよう!

HTML

HTML上で使われるフォームとは、
ログインやお問い合わせなどでよく使われる
入力や選択をして送信することができる
機能のことです。

FORMタグとは

form タグは、入力フォームを作成するタグです。
例:<form></form>

フォームでは、各入力部品に値を入力した後、
サブミットボタンを押して送信します。

その転送方法は、method 属性で指定し、
どの様なアクションをするかを、
action 属性で指定します。

form タグで指定できる主な属性

form タグで指定できる主な属性は

・action:送信先プログラムを指定
・method:送信形式をpostかgetで指定
・enctype:送信時のデータ形式を指定
・accept-charset:文字コードを指定
・accept:MIMEタイプを指定
・name:名前を指定
・target:結果を表示するターゲットを指定

があります。

このform タグを使うことで、アンケートや
お問い合わせなどのメール送信ができます。

ここでの送信先プログラムは「CGI」
「PHP」などを指します。

INPUTタグとは

input タグは <form></form>を構成する部品を
作成するタグです。

input タグで指定できる主な属性

input タグで指定できる主な属性は、

・type:フォーム部品の種類を指定
・name:フォーム部品の名前
・value:値を指定
・size:表示文字数を指定
・maxlength:最大文字数を指定
・checked:初期値をチェック状態に(値は省略)
・disabled:入力、選択の無効化(値は省略)
・readonly:書き換え禁止(値は省略)

があります。

その中のtype属性の値により、
テキストボックスや送信ボタンなどの部品
を作成します。

type属性の値で指定できる主な属性

type属性の値で指定できる主な属性は、

・text:一行テキストボックス
・password:パスワード入力ボックス
・radio:ラジオボタン
・checkbox:チェックボックス
・submit:送信ボタン
・reset:リセットボタン
・button:汎用ボタン
・image:画像ボタン
・file:ファイルを選択する
・hidden:隠しデータ

例:<input type=”button”>
※ input タグは終了タグがありません。

また、type属性の値がimageの時に有効な属性として

・src:画像ファイルの指定(値は画像ファイル名)
・alt:画像の代替テキスト(値はテキスト)
・align:画像を揃える(値はtop[上]、middle[中央]、
    bottom[下]、left[左]、right[右])

があります。

それでは、input タグの例をあげます。

例1:テキストボックス、パスワード

・text:一行テキストボックス
・password:パスワード入力ボックス

<記述例>

<form>
  ログインID:<input type="text"><br>
  パスワード:<input type="password">
</form>

<表示例>

ログインID:
パスワード:

例2:ラジオボタン

・radio:ラジオボタン

<記述例>

<form>
  <input type="radio" name="level" value="1">level1 
  <input type="radio" name="level" value="2">level2 
  <input type="radio" name="level" value="3">level3
</form>

※name属性で level と名前を付け、value属性で番号指定。

<表示例>

level1  level2  level3

例3:チェックボックス

・checkbox:チェックボックス

<記述例>

<form>
  <input type="checkbox" name="obj" value="text">text 
  <input type="checkbox" name="obj" value="password">password 
  <input type="checkbox" name="obj" value="radio">radio
</form>

※name属性で obj と名前を付け、value属性で種類指定。

<表示例>

text  password  radio

例4:送信ボタン、リセットボタン、汎用ボタン

・submit:送信ボタン
・reset:リセットボタン
・button:汎用ボタン

<記述例>

<form>
  <input type="submit" value="送信">  
  <input type="reset" value="リセット">  
  <input type="button" value="汎用ボタン">
</form>

※value属性でボタン名指定。

<表示例>

     

例5:画像ボタン

・image:画像ボタン

<記述例>

<form>
  <input type="image" src="img/sky1.jpg">
</form>

※src属性で画像ファイルの指定。

<表示例>

送信ボタンやリセットボタンは、
formタグの中の項目について有効になります。

例6:form タグでのリセットボタン

form タグのリセットボタンの動作確認の例です。
「ログインID」「パスワード」に何か入力した後
「リセット」を押すと入力内容が消えます。

<記述例>

<form action="#" method="post">
  ログインID:<input type="text"><br>
  パスワード:<input type="password"><br>
  <input type="submit" value="送信">  
  <input type="reset" value="リセット">  
</form>

<表示例>

ログインID:
パスワード:
     

これで、formタグとinputタグについて
理解できたと思います。

コメント

タイトルとURLをコピーしました