HTMLDOM入力番号オブジェクト

HTML DOM入力番号オブジェクトは、

入力番号オブジェクトを作成する方法を見てみましょう

構文

以下は構文です-

var numberInput = document.createElement(“INPUT”);
numberInput.setAttribute(“type”,”number”);

プロパティ

以下は、入力番号Object-

のプロパティです。

プロパティ	説明
オートコンプリート	数値入力フィールドのオートコンプリート属性の値を返し、変更します。
オートフォーカス	ページの読み込み時に入力番号フィールドをフォーカスするかどうかを返し、変更します。
無効	入力番号フィールドが無効かどうかを返し、変更します。
defaultValue	入力番号フィールドのデフォルト値を返し、変更します。
フォーム	HTMLドキュメントの入力番号フィールドを含むフォームの参照を返します。
リスト	入力番号フィールドを含むデータリストの参照を返します。
max	入力番号フィールドのmax属性の値を返し、変更します。
min	入力番号フィールドのmin属性の値を返し、変更します。
名前	入力番号フィールドのname属性の値を返し、変更します。
readOnly	入力番号フィールドが読み取り専用かどうかを返し、変更します。
必須	フォームを送信する前に番号フィールドに入力する必要があるかどうかを返し、変更します。
ステップ	入力番号フィールドの設定属性の値を返し、変更します。
タイプ	数値入力フィールドのtype属性の値を返します。
値	数値入力フィールドのvalue属性の内容を返して変更します。
プレースホルダー	数値入力フィールドのプレースホルダー属性の値を返し、変更します。

メソッド

以下は、入力番号Object

のメソッドです。

メソッド	説明
stepUp（）	入力番号フィールドの値を、パラメーターで指定された値だけインクリメントします。
stepDown（）	入力番号フィールドの値を、パラメーターで指定された値だけデクリメントします。

例

入力番号オブジェクトの例を見てみましょう-

<!DOCTYPE html>
<html>
<style>

   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   form{
      margin:2.5rem auto;
   }
   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }
   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

出力

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

HTMLDOM入力番号オブジェクト

「入力番号フィールドを作成」をクリックします」ボタンをクリックして、数値入力フィールドを作成します。

HTMLDOM入力番号オブジェクト

HTML DOM入力番号stepUp（）メソッド

HTMLDOM入力月フォームプロパティ

HTMLDOMHRオブジェクト
HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff;
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、を表します要素。を作成する要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ説明コンパクト順不同リストを通常より小さく表示するかどうかを設定/返しますタイプ順序付けされていないリストのtype属性の値を設定/返します順不同リストの例を見てみましょう要素- 例 <!DOCTYPE