HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのフォームacceptCharsetプロパティの使い方をサンプルコード付きで解説

HTML DOM の Form acceptCharset プロパティは、<form> 要素の accept-charset 属性に関連付けられたプロパティです。このプロパティを使用することで、フォームの accept-charset 属性値の取得と設定が可能になります。戻り値は文字列型で、そのフォームに設定されている文字エンコーディングが返されます。

accept-charset 属性の値が指定されていない場合には「UNKNOWN」が返されます。これは、文字エンコーディングが現在の HTML ドキュメントの文字エンコーディングに設定されていることを示しています。

構文

acceptCharset プロパティの構文は以下の通りです。

acceptCharset プロパティの設定

formObject.acceptCharset = character-set

ここで指定する「character-set」は、1つ以上の文字エンコーディングの値をセミコロン（;）またはスペースで区切って並べたリストです。特によく使われる値として「UTF-8」や「ISO-8859-1」などが挙げられます。

サンプルコード

それでは、Form acceptCharset プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    form{
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function changeEnc() {
        document.getElementById("FORM1").acceptCharset = "ISO-8859-1";
        document.getElementById("Sample").innerHTML = "このフォームの文字セットは UTF-8 から ISO-8859-1 に変更されました";
    }
</script>
</head>
<body>
<form id="FORM1" accept-charset="UTF-8">
<label>ユーザー名 <input type="text" name="usrN"></label><br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>
<p>下のボタンをクリックすると、フォームの文字セットエンコーディングが UTF-8 から ISO-8859-1 に変更されます</p>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

HTML DOMのフォームacceptCharsetプロパティの使い方をサンプルコード付きで解説

CHANGE ボタンをクリックすると、表示は次のように変化します。

HTML DOMのフォームacceptCharsetプロパティの使い方をサンプルコード付きで解説

コードの解説

まず、id に「FORM1」を持つフォームを作成し、accept-charset 属性の初期値として「UTF-8」を設定しています。このフォームには、テキスト型の入力フィールドとパスワード型の入力フィールドが含まれています。

<form id="FORM1" accept-charset="UTF-8">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>

次に、ユーザーがクリックすると changeEnc() メソッドが実行される「CHANGE」ボタンを作成しています。

<button onclick="changeEnc()">CHANGE</button>

changeEnc() 関数では、getElementById() メソッドによって <form> 要素を取得し、その acceptCharset プロパティの値をラテン文字エンコーディングである「ISO-8859-1」に設定しています。続いて、innerHTML プロパティを使って、id が「Sample」の段落要素にこの変更内容を知らせるメッセージを表示します。

function changeEnc() {
    document.getElementById("FORM1").acceptCharset = "ISO-8859-1";
    document.getElementById("Sample").innerHTML = "このフォームの文字セットは UTF-8 から ISO-8859-1 に変更されました";
}
  1. HTML DOM Textareaのformプロパティとは？使い方をサンプル付きで解説

    Textarea の form プロパティとは？HTML DOM の Textarea オブジェクトが持つ form プロパティは、対象のテキストエリア（<textarea> 要素）を囲んでいる <form> 要素への参照を返します。このプロパティを利用すると、JavaScript からそのテキストエリアがどのフォームに所属しているのかを簡単に特定できます。なお、テキストエリアがどのフォームにも属していない場合は null が返される点に注意してください。構文form プロパティの基本的な構文は次のとおりです。object.form戻り値テキストエリアを含む <f

  2. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要