フォーム基礎知識

Posted by : Izumikawa Fukumi 2013年9月5日木曜日

フォームと言っても様々なフォームがあります。「お問い合わせフォーム」や「ログインフォーム」など様々なサイトにフォームと言う物が使われていますが、そもそも初心者さんには難しい課題なのでは?と思ったので今回フォームについてあまり理解出来てない初心者さんの為に講座を開きます。

フォームとは何か?

主にフォームは値をPHPファイルやCGIファイルに送信したりします。他にもJavaScriptでユーザーの入力を受け取り処理する為に使います。フォーム自体はHTMLで作る事が可能ですが、処理はHTML以外の言語を使う事になります。

初心者さんはよくフォームだけ書いて動くと勘違いしている方が多いですが、フォームだけでは何も動きませんので覚えておいて下さい。

実用例...

フォームと言えば様々あるので以下に簡単なフォームの実用例を集めてみました。

■パスワード認証(php)

HTML
<form action="index.php" method="post">
<table>
<tr>
<th>パスワード</th>
<td><input type="text" name="pass" size="20"></td>
<td><input type="submit" value="認証"></td>
</tr>
</table>
</form>

PHP

<?php
$pass = '12345';
if($_POST['pass'] == $pass) {
    print 'パスワード一致';
}else{
    print 'パスワード認証に失敗しました。';
}
?>

■足し算(JavaScript)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

HTML　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<form name="txt" id="txt">
<table>
 <tr>
  <td><input type="text" name="txtbox1" size="20"></td>
  <td>+</td>
  <td><input type="text" name="txtbox2" size="20">=</td>
  <td><input type="button" value="計算" onmousedown="sample()"></td>
 </tr>
</table>
</form>

JavaScript　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<script type="text/ecmascript">
    function sample()
    {
        var txtbox1 = document.txt.txtbox1.value;
        var txtbox2 = document.txt.txtbox2.value;
        var txtdocument = txtbox1 * txtbox2;
        alert(txtdocument);
    }
</script>

フォームの作り方

フォームの作り方は簡単です。

フォームタグ	<form action="#" name="#"></form>	このタグではフォーム情報の送信先など指定出来ます。
テキストボックス	<input type="text" name="#" size="20">
テキスト入力フィールド	<textarea name="#" rows="2" cols="20" tabindex="0"></textarea>
ドロップダウン	<select name="#" size="1" tabindex="0"></select>
チェックボックス
ラジオボタン	<input type="radio" name="#" value="">
送信・リセットボタン	<input type="button" name="#" value="">

現在ではHTML5で便利なフォームタグが増えました。

I aim to creator.