HTML DOM Input Datetimeのnameプロパティの使い方を徹底解説
HTML DOMのInput Datetimeオブジェクトが持つnameプロパティは、input datetime要素のname属性の値を文字列として取得します。さらに、このプロパティに新しい文字列を代入することで、name属性の値を動的に変更することも可能です。
構文
nameプロパティの基本的な構文は以下の通りです。
name属性の値を取得する場合
inputDatetimeObject.name
name属性に新しい値を設定する場合
inputDatetimeObject.name = 'String'
使用例
それでは、Input Datetimeのnameプロパティを使った具体的なサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Name</title>
</head>
<body>
<form>
Datetime: <input type="datetime" id="datetime" name="Mother's Birth Day" value="1983-05-13T15:32IST">
</form>
<button onclick="changeNameValue()">name属性の値を変更</button>
<div id="divDisplay"></div>
<script>
var inputDatetime = document.getElementById("datetime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'datetime入力のname属性: '+inputDatetime.name;
function changeNameValue() {
if(inputDatetime.name == "Mother's Birth Day"){
inputDatetime.name = "Fathers's Birth Day";
divDisplay.textContent = 'datetime入力のname属性: '+inputDatetime.name;
}
}
</script>
</body>
</html>
出力結果
上記のコードを実行すると、以下のような画面が表示されます。
「name属性の値を変更」ボタンをクリックする前
「name属性の値を変更」ボタンをクリックした後
補足：ブラウザ対応について
なお、<input type="datetime">は現在ほとんどの主要ブラウザでサポートされておらず、代わりに<input type="datetime-local">の使用が推奨されています。ただし、nameプロパティの使い方自体はどちらのタイプでも同様ですので、本記事のサンプルコードはそのまま応用できます。
-
HTML DOM Input URLのnameプロパティの使い方と取得・設定方法
HTML DOMのInput URLオブジェクトにおけるnameプロパティは、入力フィールド(type=url)のname属性の値を文字列として返します。また、新しい文字列を代入することで、name属性の値を変更することも可能です。 nameプロパティとは name属性は、フォーム送信時にサーバーへデータを渡す際の識別子として利用される重要な属性です。JavaScriptからこの値を動的に取得したり書き換えたりすることで、柔軟なフォーム操作が実現できます。 構文 nameプロパティの基本的な構文は以下の通りです。 値を取得する場合 inputURLObject.name 値を設定する場合 in
-
HTML DOM Input Week の name プロパティの使い方と取得・設定方法
Input Week の name プロパティとはHTML DOM の Input Week name プロパティは、type=week の入力要素（<input type=week>）に name 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティを使って新しい文字列を設定することも可能です。name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から動的に参照したり変更したりできることで、柔軟なフォーム操作が実現できます。構文name プロパティの基本的な構文は以下の通りです。値を取得する場合input