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

HTMLDOMフォームのenctypeプロパティ

HTML DOMフォームのenctypeプロパティは、フォーム要素のenctype属性に関連付けられています。このプロパティは、フォームのenctype属性値を設定または返します。 enctype属性は、メソッド属性値が「POST」の場合にのみ使用されます。 enctypeプロパティは、送信するフォームのデータをエンコードするように指定するために使用されます。

構文

以下は、-

の構文です。

enctypeプロパティの設定-

formObject.enctype = encoding

ここで、エンコーディングは「application / x-www-form-urlencoded」にすることができます。これは、すべての文字が送信前にエンコードされることを意味し、これがデフォルトのエンコーディングです。

もう1つは「multipart/form-data」です。これは、文字をエンコードしてはならず、サーバーへのファイルのアップロードに使用されることを指定します。

3番目のエンコーディングは「text/plain」であり、スペースを「+」記号に変換するだけで、他のエンコーディングは変換しません。 text./plainエンコーディングは安全ではないため、使用しないでください。

例

Formenctypeプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeEnc() {
      document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
      document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
   }
</script>
</head>
<body>
<h1>Form enctype property example</h1>
<form id="FORM1" method="post" enctype="multipart/form-data">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMフォームのenctypeプロパティ

変更ボタンをクリックすると-

HTMLDOMフォームのenctypeプロパティ

上記の例では-

id =“ Form1”、method =“ post”、enctypeが“ multipart / form-data”に設定されたフォームを作成しました。 enctypeは、フォームデータのエンコードタイプを指定し、この場合は「multipart/form-data」に設定されます。このエンコーディングは、サーバーへのファイルのアップロードに役立ちます。フォームには、テキストフィールドとパスワードフィールドも含まれています。

<form id="FORM1" method="post" enctype="multipart/form-data">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

次に、ユーザーがクリックしたときにchangeEnc（）メソッドを実行するボタンCHANGEを作成しました-

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

changeEnc（）メソッドは、getElementById（）メソッドを使用してフォーム要素を取得し、そのenctypeプロパティを「application/x-www-form-urlencoded」に設定します。これにより、すべての文字がエンコードされ、デフォルトのenctypeエンコードになります。 IDが「Sample」の段落のinnerHTMLプロパティを使用して、ユーザーにテキストを表示することでこの変更を示します-

function changeEnc() {
   document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
   document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}
になりました
  1. HTMLDOMTextareaフォームプロパティ

    HTML DOM Textareaフォームプロパティは、テキストエリアを囲むフォームの引用を返します。 構文 以下は構文です- object.form HTML DOM Textareaフォームプロパティの例を見てみましょう： 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #363946;       col

  2. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs