フォーム送信｜formオブジェクト｜JavaScript/DOM

フォーム送信時のチェック処理方法〔ボタンの種類でイベント・メソッドを使い分け〕
action/methodを指定してフォーム送信〔action/methodプロパティ指定〕
target先を指定してフォーム送信〔targetプロパティ指定〕
フォームデータのエンコード形式を取得・設定〔enctypeプロパティ〕
ラジオボタンの選択肢により送信先変更
送信時にフォームのエレメントを有効化する〔disabled〕
フォームをリセット（入力値をクリア）する〔resetメソッド〕
送信ボタン・クリアボタンを画像ボタンにする〔イメージボタン使用/スタイルシート使用の2サンプル〕
フォーム名を取得〔nameプロパティ〕
フォームのエレメント情報を取得〔elements[]〕
フォームのエレメント数を取得〔lengthプロパティ〕
フォーム、エレメントのタイプや名前を取得

フォーム送信時のチェック処理方法
ボタンの種類でイベント・メソッドを使い分け

unknown

フォーム送信前に入力チェック処理を入れ、その処理の判定結果によってフォームを送信するかしないかを操作する場合、ボタンの種類によって方法が異なります。

1. 送信ボタン（input type='submit'）を使う場合

チェック処理関数の判定結果の戻り値を真偽値で返すようにし、その戻り値をForm要素のonsubmitイベントに指定します。戻り値がTRUEならフォームは送信され、FALSEなら送信されません。

送信ボタン＋onsubmitイベントサンプルを見る

<form action="content/demo/test.php" method="post" onsubmit="return chk1(this)">
    <input type="text" name="txt1" />
    <input type="submit" value="送信" /><!-- 送信ボタン -->
</form>

<script type="text/javascript">
    function chk1(frm){
        if(frm.elements["txt1"].value==""){
            alert("テキストボックスに入力してください");
            /* FALSEを返してフォームは送信しない */
            return false;
        }else{
            /* TRUEを返してフォーム送信 */
            return true;
        }
    }
</script>

2. 通常ボタン（input type='button'）を使う場合

ボタンのonclickイベントでチェック処理関数をコールし、処理の判定によって関数内でsubmitメソッドをコールします。

通常ボタン＋submitメソッドサンプルを見る

<form action="content/demo/test.php" method="post">
    <input type="text" name="txt2" />
    <input type="button" value="送信" onclick="return chk2(this.form)" /><!-- 通常ボタン -->
</form>

<script type="text/javascript">
    function chk2(frm){
        if(frm.elements["txt2"].value==""){
            alert("テキストボックスに入力してください");
        }else{
            /* submitメソッドでフォーム送信 */
            frm.submit();
        }
    }
</script>

action/methodを指定してフォーム送信
action/methodプロパティ指定

unknown

document.フォーム名.action = 送信先URL
document.フォーム名.method = post | get

以下の例は、Form要素に<form name='form1' method='post' action='/content/demo/test.php' enctype='application/x-www-form-urlencoded'>と指定したのと同じです。

フォーム送信サンプルを見る

<script type="text/javascript">
    function send(){
        var frm=document.frmC;
        /* テキストボックスが空でないならTRUEを返してフォーム送信 */
        if(frm.elements["message"].value!=""){
            frm.action="content/demo/test.php";
            frm.method="post";
            frm.encoding="application/x-www-form-urlencoded";
            return true;
        }else{
            /* テキストボックスが空の場合はFALSEを返してフォーム送信しない */
            alert("テキストボックスが空の場合は送信しません");
            return false;
        }
    }
</script>

<form name="frmC" action="#" onsubmit="return send();">
    <input type="text" name="message" size="40" value="テキストボックスが空でないなら、送信します。" />
    <input type="submit" value="送信" />
</form>

DOMの場合

フォームオブジェクト.action = 送信先URL
フォームオブジェクト.method = post | get

フォーム送信（DOM）サンプルを見る

<script type="text/javascript">
    function send(){
        var frm=document.getElementById("frmC");
        var mes=document.getElementById("message");
        /* テキストボックスが空でないならTRUEを返してフォーム送信 */
        if(mes.value!=""){
            frm.action="content/demo/test.php";
            frm.method="post";
            frm.encoding="application/x-www-form-urlencoded";
            return true;
        }else{
            /* テキストボックスが空の場合はFALSEを返してフォーム送信しない */
            alert("テキストボックスが空の場合は送信しません");
            return false;
        }
    }
</script>

<form id="frmC" action="#" onsubmit="return send();">
    <input type="text" id="message" name="message" size="40" value="テキストボックスが空でないなら、送信します。" />
    <input type="submit" value="送信" />
</form>

target先を指定してフォーム送信
targetプロパティ指定

unknown

document.フォーム名.target = _top | _self | _blank

targetプロパティは、action属性で指定したURLの表示方法を指定します。

targetプロパティ
値	説明
_top	フレームを解除してウィンドウ全体に表示
_parent	リンク元の親フレームに表示
_self	リンク元と同じフレームに表示
_blank	新しくウィンドウを開いて表示

選択したターゲットで送信先URLを開くサンプルを見る

<script type="text/javascript">
    /* 選択したターゲットで送信先のURLを開く */
    function targetJump(_target){
        var frm=document.frmD;
        /* フォームのターゲットを指定 */
        if(_target==""){
            alert("targetを選択してください");
            return false;
        }else{
            frm.target=_target;
            /* フォーム送信 */
            frm.submit();
        }
    }
</script>

<form name="frmD" method="post" action="content/demo/test.php">
    送信先URLを
    <select name="sel" onchange="targetJump(this.options[selectedIndex].value)">
        <option value="" selected="selected">▼target選択</option>
        <option value="_self">self</option>
        <option value="_blank">blank</option>
        <option value="_top">top</option>
    </select>
    で開く
</form>

DOMの場合

フォームオブジェクト.target = _top | _self | _blank

選択したターゲットで送信先URLを開く（DOM）サンプルを見る

<script type="text/javascript">
    /* 選択したターゲットで送信先のURLを開く */
    function targetJump(_target){
        /* フレームオブジェクト */
        var frmObj=document.getElementById("frmD");
        /* フォームのターゲットを指定 */
        if(_target==""){
            alert("targetを選択してください");
            return false;
        }else{
            frmObj.target=_target;
            /* フォーム送信 */
            frmObj.submit();
        }
    }
</script>

<form id="frmD" method="post" action="content/demo/test.php">
    送信先URLを
    <select name="sel" onchange="targetJump(this.options[selectedIndex].value)">
        <option value="" selected="selected">▼target選択</option>
        <option value="_self">self</option>
        <option value="_blank">blank</option>
        <option value="_top">top</option>
    </select>
で開く
</form>

フォームデータのエンコード形式を取得・設定
enctypeプロパティ

unknown

document.フォーム名.encoding = エンコード形式
[DOM] フォームオブジェクト.enctype = エンコード形式

enctypeプロパティは、フォームデータのエンコード形式を取得・設定します。

エンコード形式	説明
application/x-www-form-urlencoded	デフォルト
multipart/form-data	ファイルアップロード
text/plain	メール送信

フォームのエンコード形式を取得

sampleサンプルを見る

<script type="text/javascript">
    /* フォームデータのエンコード形式を取得 */
    function fGetEncype(frmObj){
        alert(frmObj.enctype)
    }
</script>

<form enctype="application/x-www-form-urlencoded" action="#">
    <p>
        Name: <input type="text" value="hoge" />
        <input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
    </p>
</form>

<form enctype="multipart/form-data" action="#">
    <p>
        File: <input type="file" />
        <input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
    </p>
</form>

<form enctype="text/plain" action="#">
    <p>
        E-mail: <input type="text" value="hoge@domain.co.jp" />
        <input type="button" onclick="fGetEncype(this.form)" value="フォームデータのエンコード形式を取得" />
    </p>
</form>

エンコード形式を指定してフォーム生成

sampleサンプルを見る

<p>フォーム生成: 
    <input type="button" onclick="fSetEnctype('application/x-www-form-urlencoded')" value="通常用" />
    <input type="button" onclick="fSetEnctype('multipart/form-data')" value="ファイルアップロード用" />
    <input type="button" onclick="fSetEnctype('text/plain')" value="メール送信用" />
</p>

<hr />

<form action="/content/demo/test.php" method="post" id="resSetEnctype"></form>

<hr />

<p>生成したフォームのエンコード形式: <span id="resSetEnctype_enctype"></span></p>
<p>生成したHTML文:<br><textarea id="resSetEnctype_html" cols="50"  rows="5"></textarea></p>


<script type="text/javascript">
    /* エンコード形式を指定してフォーム生成 */
    function fSetEnctype(_enctype){
        var frmObj=document.getElementById("resSetEnctype");
        frmObj.enctype=_enctype;
        /* Form要素の子ノードを削除 */
        if(frmObj.childNodes.length>0){
            for(var i=frmObj.childNodes.length; i>=0; i--){
                if(frmObj.childNodes[i]!=null){
                    if(frmObj.childNodes[i].nodeName=="INPUT"){
                        frmObj.removeChild(frmObj.childNodes[i]);
                    }
                }
            }
        }

        /* テキストボックス生成 */
        var txtObj=document.createElement("INPUT");
        if(_enctype=="multipart/form-data"){
            txtObj.type="file";
        }else{
            txtObj.value="テキスト";
            txtObj.type="text";
        }
        txtObj.name="txt1";
        frmObj.appendChild(txtObj);

        /* 送信ボタン生成 */
        var btnObj=document.createElement("INPUT");
        btnObj.type="submit";
        btnObj.value="送信";
        btnObj.name="btn_submit";
        frmObj.appendChild(btnObj);

        document.getElementById("resSetEnctype_enctype").innerHTML=frmObj.enctype;
        document.getElementById("resSetEnctype_html").innerHTML=frmObj.innerHTML;
    }
</script>

フォーム生成:

生成したフォームのエンコード形式:

生成したHTML文:

ラジオボタンの選択肢により送信先変更

unknown

ラジオボタンの選択肢によりフォームの送信先（action属性）を変更する例です。

ラジオボタンの選択肢によりフォームの送信先を変更サンプルを見る

<script type="text/javascript">
    function changeAction(){
        var frm=document.frmB1;
        /* チェック用変数 */
        var err=0;
        /* チェックボックスが選択されているか調べる */
        for(i=0;i<frm.link.length;i++){
            if(frm.link[i].checked==true){
                /* チェックされていたら、チェック用変数をプラスし、ループを抜ける */
                err++;
                break;
            }
        }
        if(err==0){
            /* ラジオボタンが未選択ならアラート表示 */
            alert("送信先を選択してください。");
            return false;
        }else{
            /* 選択されたラジオボタンの値（URL）にPOST送信 */
            frm.action=frm.link[i].value;
            /* target属性を指定 */
            frm.target = "_blank";
            /* フォーム送信 */
            frm.submit();
        }
    }
</script>

<form name="frmB1" method="get" action="#">
    送信先URL: 
    <label for="link_b1_1"><input type="radio" id="link_b1_1" name="link" value="/content/demo/test.php" />test.php</label>
    <label for="link_b1_2"><input type="radio" id="link_b1_2" name="link" value="/content/demo/test2.php" />test2.php</label>
    <input type="button" value="送信" onclick="changeAction()" />
</form>

DOMの場合

ラジオボタンの選択肢によりフォームの送信先を変更（DOM）サンプルを見る

<script type="text/javascript">
    function changeActionDOM(){
        var frmObj=document.getElementById("frmB1");
        /* チェック用変数 */
        var err=0;
        /* チェックボックスが選択されているか調べる */
        for(i=0;i<frmObj.length;i++){
            if(frmObj[i].name=="link"){
                if(frmObj[i].checked==true){
                    /* チェックされていたら、チェック用変数をプラスし、ループを抜ける */
                    err++;
                    break;
                }
            }
        }
        if(err==0){
            /* ラジオボタンが未選択ならアラート表示 */
            alert("送信先を選択してください。");
            return false;
        }else{
            /* 選択されたラジオボタンの値（URL）にPOST送信 */
            frmObj.action=frmObj.link[i].value;
            /* target属性を指定 */
            frmObj.target = "_blank";
            /* フォーム送信 */
            frmObj.submit();
        }
    }
</script>

<form id="frmB2" method="get" action="#">
    送信先URL: 
    <label for="link_b2_1"><input type="radio" id="link_b2_1" name="link" value="/content/demo/test.php" />test.php</label>　
    <label for="link_b2_2"><input type="radio" id="link_b2_2" name="link" value="/content/demo/test2.php" />test2.php</label>　
    <input type="button" value="送信" onclick="changeActionDOM()" />
</form>

送信時にフォームのエレメントを有効化する
disabled

unknown

document.フォーム名.エレメント名.disabled = true(無効化) | false(有効化)

disabledプロパティにTRUEを指定した場合、要素が無効化（入力不可）し、値は送信されませんが、FALSEを指定した場合、要素が有効化（入力可）するので値は送信されます。

送信ボタンが押されたフォームのみ有効化サンプルを見る

<script type="text/javascript">
    /* 送信ボタンが押されたフォームのテキストボックスのみ有効化 */
    function send(frmName){
        var frm=document.forms[frmName];
        for(var i=0; i<frm.length; i++){
            if(frm[i].type=="text"){
                frm[i].disabled=false;
            }
        }
        return true;
    }
    /* ページ読込時（onLoadイベント）に全フォームのテキストボックスを無効化 */
    function init(){
        for(var i=0; i<document.forms.length; i++){
            for(var a=0; a<document.forms[i].elements.length; a++){
                if(document.forms[i].elements[a].type=="text"){
                    document.forms[i].elements[a].disabled=true;
                }
            }
        }
    }
    window.onload=init;
</script>

<form name="frmF1" method="post" action="#" onsubmit="return send('frmF1');">
    <input type="text" name="txt1" size="5" value="値1" />
    <input type="text" name="txt2" size="5" value="値2" />
    <input type="submit" value="submit">
</form>
<form name="frmF2" method="post" action="#" onsubmit="return send('frmF2');">
    <input type="text" name="txt3" size="5" value="値3" />
    <input type="text" name="txt4" size="5" value="値4" />
    <input type="submit" value="submit">
</form>
<p>送信された値：<br><?=nl2br(print_r($HTTP_POST_VARS,true));?></p>

DOMの場合

フォームオブジェクト[].disabled = TRUE(無効化) | FALSE(有効化)

送信ボタンが押されたフォームのみ有効化（DOM）サンプルを見る

<script type="text/javascript">
    /* 送信ボタンが押されたフォームのテキストボックスのみ有効化 */
    function send(frmID){
        var frmObj=document.getElementById(frmID);
        for(var i=0; i<frmObj.length; i++){
            if(frmObj[i].type=="text"){
                frmObj[i].disabled=false; /* 有効化 */
            }
        }
        return true;
    }
    /* ページ読込時（onLoadイベント）に全フォームのテキストボックスを無効化 */
    function init(){
        var frmObj=document.getElementsByTagName("form");
        for(var i=0; i<frmObj.length; i++){
            for(var j=0; j<frmObj[i].length; j++){
                /* テキストボックスかどうか調べる */
                if(frmObj[i][j].type=="text"){
                    frmObj[i][j].disabled=true; /* 無効化 */
                }
            }
        }
    }
    window.onload = init;
</script>

<form id="frmF1" method="post" action="#" onsubmit="return send('frmF1')">
    <input type="text" name="txt1" size="5" value="値1" />
    <input type="text" name="txt2" size="5" value="値2" />
    <input type="submit" value="このフォームを送信" />
</form>
<form id="frmF2" method="post" action="#" onsubmit="return send('frmF2')">
    <input type="text" name="txt3" size="5" value="値3" />
    <input type="text" name="txt4" size="5" value="値4" />
    <input type="submit" value="このフォームを送信" />
</form>
<p>送信された値：<br><?=nl2br(print_r($HTTP_POST_VARS,true));?></p>

フォームをリセット（入力値をクリア）する
resetメソッド

unknown

document.フォーム名.reset();

フォームをリセット（入力値をクリア）するには、resetメソッドを使用します。 input要素のtype属性にresetを指定したのと同じ処理になります。

フォームをリセット（resetメソッド使用）サンプルを見る

<form name="frmR" method="post" action="content/demo/test.php">
    <dl>
        <dt>名前：</dt>
            <dd>
                <input type="text" name="username" />
            </dd>
        <dt>性別：</dt>
            <dd>
                <label for="f1_male"><input type="radio" id="f1_male" name="sex" value="男性" checked="checked" />男性</label>
                <label for="f1_female"><input type="radio" id="f1_female" name="sex" value="女性" />女性</label>
            </dd>
        <dt>居住エリア：</dt>
            <dd>
                <select name="area">
                    <option>---------</option>
                    <option>北海道</option>
                    <option>本州</option>
                    <option>四国</option>
                    <option>九州</option>
                    <option>沖縄</option>
                </select>
            </dd>
        <dt>コメント：</dt>
            <dd>
                <textarea cols="30" rows="5" name="comment"></textarea>
            </dd>
    </dl>
    <p>
        <input type="submit" value="送信" name="btnSubmit" />
        <input type="button" value="リセット" onclick="this.form.reset();" />
    </p>
</form>

resetボタン同様、resetメソッドは、selected、checked、value="・・・" のようにあらかじめフォームに入力しておいたデータはクリアしません。これらもクリアするには以下のようにフォーム要素を1つ1つ調べてクリアしていく必要があります。

フォームをリセット（要素を1つ1つクリア）サンプルを見る

<form action="#" name="frmR2" onsubmit="alert('サンプルのため送信しません。'); return false;">
    <dl>
        <dt>名前：</dt>
            <dd>
                <input type="text" name="username" />
            </dd>
        <dt>性別：</dt>
            <dd>
                <label for="f2_male"><input type="radio" id="f2_male" name="sex" value="male" checked="checked" />男性</label>
                <label for="f2_female"><input type="radio" id="f2_female" name="sex" value="female" />女性</label>
            </dd>
        <dt>居住エリア：</dt>
            <dd>
                <select name="area">
                    <option>---------</option>
                    <option>北海道</option>
                    <option>本州</option>
                    <option>四国</option>
                    <option>九州</option>
                    <option>沖縄</option>
                </select>
            </dd>
        <dt>趣味：</dt>
            <dd>
                <select name="favorite" multiple="multiple">
                    <option selected="selected">なし</option>
                    <option>夜遊び</option>
                    <option selected="selected">グルメ</option>
                    <option>スポーツ</option>
                    <option selected="selected">買い物</option>
                </select>
            </dd>
        <dt>コメント：</dt>
            <dd>
                <textarea name="comment" cols="30" rows="5"></textarea>
            </dd>
    </dl>
    <p>
        <input type="submit" value="送信" />
        <input type="button" value="リセット" onclick="fFormReset(this.form);" />
    </p>
</form>

<script type="text/javascript">
    function fFormReset(frmObj){
        for(var i=0; i<frmObj.length; i++){
            switch (frmObj[i].type){
                case "checkbox":
                case "radio":
                    frmObj[i].checked=false;
                    break;
                case "select-one":
                case "select-multiple":
                    frmObj[i].selectedIndex=0;
                    break;
                case "textarea":
                case "text":
                    frmObj[i].value="";
                    break;
                default:
                    break;
            }
            
        }
    }
</script>

送信ボタン・クリアボタンを画像ボタンにする
イメージボタン使用/スタイルシート使用の2サンプル

unknown

イメージボタン使用（input type='image'）

イメージボタン使用サンプルを見る

<form method="post" action="#" onsubmit="alert('サンプルのため送信処理は行いません'); return false;">
    <input type="text" size="20" maxlength="40" />
    <!-- 送信ボタン -->
    <input type="image" src="/content/img/btn/send.gif" alt="送信" style="vertical-align:middle;" />
    <!-- クリアボタン -->
    <input type="image" src="/content/img/btn/btn_clear.gif" alt="クリア" onclick="this.form.reset(); return false;" style="vertical-align:middle;" />
</form>

スタイルシート使用（background-imageプロパティ）

スタイルシート使用サンプルを見る

<style type="text/css">
    /*
    input type="image"を使わず、スタイルシートでボタンの背景画像を指定。
    ボタン画像の幅・高さをpx指定します。
    value=""にしないと、デフォルトで送信、クリアが表示されてしまいます。
    value="送る"のように、任意の文字を指定することも可能です。
    */
    .btnSend { /* 送信ボタン */
        background:transparent url(/content/img/btn/send.gif) no-repeat top left!important;
        width:49px; height:19px; border:none;
    }
    .btnClear  { /* クリアボタン */
        background:transparent url(/content/img/btn/btn_clear.gif) no-repeat top left!important;
        width:49px; height:19px; border:none;
    }
</style>

<form method="post" action="#" onsubmit="alert('サンプルのため送信処理は行いません'); return false;">
    <input type="text" size="20" maxlength="40" />　
    <input type="submit" class="btnSend" value="" />
    <input type="reset" class="btnClear" value="" />
</form>

フォーム名を取得
nameプロパティ

unknown

フォームオブジェクト.name;

サンプルを見る

<form action="#" name="hogeform">
    <input type="button" onclick="alert(this.form.name);" value="フォーム名取得" />
</form>

フォームのエレメント情報を取得
elements[]

unknown

フォームオブジェクト.elements

サンプルを見る

<form action="#">
    <p><input type="button" value="フォーム内のエレメント情報を取得" onclick="fGetElements(this.form)" /></p>
    <p><input type="text" value="テキストボックス" /></p>
    <p>
        <select name="items">
            <option>----------</option>
            <option>項目1</option>
            <option>項目2</option>
        </select>
    </p>
    <p>
        <input type="checkbox" name="chk_1" value="1" />チェックボックス1
        <input type="checkbox" name="chk_2" value="2" />チェックボックス2
    </p>
    <p>
        <input type="radio" name="r" value="1" />ラジオボタン1
        <input type="radio" name="r" value="2" />ラジオボタン2<br>
    </p>
</form>
<div id="resGetElements"></div>

<script type="text/javascript">
    function fGetElements(frmObj){
        var s="";
        s+="フォームの要素数: <em>"+frmObj.elements.length+"<br \/>";
        for(var i in frmObj){
            s+=i+": <em>"+frmObj[i]+"<\/em><br \/>";
        }
        document.getElementById("resGetElements").innerHTML=s;
    }
</script>

フォームのエレメント数を取得
lengthプロパティ

unknown

document.フォーム名.length
[DOM] フォームオブジェクト.elements["length"]

サンプルを見る

<script type="text/javascript">
    /* JavaScript */
    function getElementLength(frm){
        alert("フォームのエレメント数 = "+frm.length);
    }
    /* DOM */
    function getElementLengthDOM(frmObj){
        alert("フォームのエレメント数 = "+frmObj.elements["length"]);
    }
</script>

<form action="#">
    <input type="radio" name="sex" />男性　<input type="radio" name="sex" />女性　
    <input type="button" value="エレメント数取得" onclick="getElementLength(this.form);" />
    <input type="button" value="エレメント数取得（DOM）" onclick="getElementLengthDOM(this.form);" />
</form>

フォーム、エレメントのタイプや名前を取得

unknown

document.フォーム名.エレメント名.type
document.フォーム名.エレメント名.name
document.フォーム名.エレメント名.value

フォーム要素のタイプ・名前・値を取得サンプルを見る

<script type="text/javascript">
    /* JavaScript */
    function fGetElementType(){
        var s="";
        var frm=document.forms["frmA1"];
        for(var i=0; i<frm.length; i++){
            s+="名前（name）= " + frm.elements[i].name + "\n";
            s+="名前（type）= " + frm.elements[i].type + "\n";
            s+="名前（value）= " + frm.elements[i].value + "\n\n";
        }
        alert(s);
    }
</script>

<form action="#" name="frmA1">
    <p>
        フォーム要素の名前・タイプ・値を表示
    </p>
    <p>
        <input type="radio" name="pet" value="ham" />ハムスター　
        <input type="checkbox" name="fruit" value="apple" />リンゴ　
        <input type=text name="drink" value="coffee" size="8" />　
        <select name="age">
            <option value="age10">10歳
            <option value="age20">20歳
        </select>　
        <input type="button" name="btn" value="ボタン" />
    </p>
    <p><input type="button" value="フォームの全エレメントの名前・タイプ・値を取得" onclick="fGetElementType()" /></p>
</form>

DOMの場合

フォームオブジェクト[].type
フォームオブジェクト[].name
フォームオブジェクト[].value

フォーム要素のタイプ・名前・値を取得（DOM）サンプルを見る

<script type="text/javascript">
    /* DOM */
    function fGetElementTypeDOM(){
        var s="";
        var frmObj=document.getElementById("frmA2");
        for(var i in frmObj){
            if(frmObj[i]!=null){
                if(frmObj[i].type==undefined) continue;
                s+="<p>";
                s+="name = "+frmObj[i].name+"<br \/>";
                s+="type = "+frmObj[i].type+"<br \/>";
                s+="value = "+frmObj[i].value;
                s+="<\/p>\n";
            }
        }
        document.getElementById("redfGetElementType").innerHTML=s;
    }
</script>

<form action="#" id="frmA2">
    <p>
        <input type="radio" name="pet" value="ham" />ハムスター　
        <input type="checkbox" name="fruit" value="apple" />リンゴ　
        <input type=text name="drink" value="coffee" size="8" />　
        <select name="age">
            <option value="age10">10歳</option>
            <option value="age20">20歳</option>
        </select>　
        <input type="button" name="btn" value="ボタン" />
    </p>
    <p>
        <input type="button" value="フォームの全エレメントの名前・タイプ・値を取得（DOM）" onclick="fGetElementTypeDOM()" />
    </p>
    <div id="redfGetElementType"></div>
</form>

formオブジェクト 入力チェック（正規表現含む）

formオブジェクト Radio／Checkbox

PHP & JavaScript Room

formオブジェクトフォーム送信

フォーム送信時のチェック処理方法
ボタンの種類でイベント・メソッドを使い分け

1. 送信ボタン（input type='submit'）を使う場合

2. 通常ボタン（input type='button'）を使う場合

action/methodを指定してフォーム送信
action/methodプロパティ指定

DOMの場合

target先を指定してフォーム送信
targetプロパティ指定

DOMの場合

フォームデータのエンコード形式を取得・設定
enctypeプロパティ

フォームのエンコード形式を取得

エンコード形式を指定してフォーム生成

ラジオボタンの選択肢により送信先変更

DOMの場合

送信時にフォームのエレメントを有効化する
disabled

DOMの場合

フォームをリセット（入力値をクリア）する
resetメソッド

送信ボタン・クリアボタンを画像ボタンにする
イメージボタン使用/スタイルシート使用の2サンプル

イメージボタン使用（input type='image'）

スタイルシート使用（background-imageプロパティ）

フォーム名を取得
nameプロパティ

フォームのエレメント情報を取得
elements[]

フォームのエレメント数を取得
lengthプロパティ

フォーム、エレメントのタイプや名前を取得

DOMの場合

関連コンテンツ

formオブジェクトフォーム送信

フォーム送信時のチェック処理方法ボタンの種類でイベント・メソッドを使い分け

1. 送信ボタン（input type='submit'）を使う場合

2. 通常ボタン（input type='button'）を使う場合

action/methodを指定してフォーム送信action/methodプロパティ指定

DOMの場合

target先を指定してフォーム送信targetプロパティ指定

DOMの場合

フォームデータのエンコード形式を取得・設定enctypeプロパティ

フォームのエンコード形式を取得

エンコード形式を指定してフォーム生成

ラジオボタンの選択肢により送信先変更

DOMの場合

送信時にフォームのエレメントを有効化する disabled

DOMの場合

フォームをリセット（入力値をクリア）するresetメソッド

送信ボタン・クリアボタンを画像ボタンにするイメージボタン使用/スタイルシート使用の2サンプル

イメージボタン使用（input type='image'）

スタイルシート使用（background-imageプロパティ）

フォーム名を取得nameプロパティ

フォームのエレメント情報を取得elements[]

フォームのエレメント数を取得lengthプロパティ

フォーム、エレメントのタイプや名前を取得

DOMの場合

関連コンテンツ

フォーム送信時のチェック処理方法
ボタンの種類でイベント・メソッドを使い分け

action/methodを指定してフォーム送信
action/methodプロパティ指定

target先を指定してフォーム送信
targetプロパティ指定

フォームデータのエンコード形式を取得・設定
enctypeプロパティ

送信時にフォームのエレメントを有効化する
disabled

フォームをリセット（入力値をクリア）する
resetメソッド

送信ボタン・クリアボタンを画像ボタンにする
イメージボタン使用/スタイルシート使用の2サンプル

フォーム名を取得
nameプロパティ

フォームのエレメント情報を取得
elements[]

フォームのエレメント数を取得
lengthプロパティ