入力タグの名前と値の違いについて
2022-02-04 11:31:21
ブラウザでのアクセスに使用されるコントロールをタイプします（type="text"とするとテキストボックス、type="button"とするとボタンです）。
typeのオプション値は以下の通りです。
ボタン Button
checkbox チェックボックスコンポーネント
ファイルアップロードコンポーネント
隠しフィールド
画像 画像領域
パスワード入力用テキストボックス
radio ラジオボタンコンポーネント
リセットフォームボタン
送信フォームボタン
テキストテキスト入力ボックス
***********************************************************************
idは重複値を許さないユニークな識別子で（データテーブルの主キー,pkと同様）、その値によって対応するhtmlタグオブジェクトを取得することが可能です。(同じページコードに重複したidがあると、予測できないエラーになることがあります)
jsコード：document.getElementById("id_value")
指定されたidに基づいて、そのオブジェクトの参照を取得します。
***********************************************************************
nameとidは同じ機能を持ち、htmlタグを識別するためにも使われますが、唯一の違いは、nameは重複した値を許容することです。
jsコード: document.forms[0].name or document.getElementsByName("name")
指定した名前をもとに、その名前のオブジェクトを参照する配列を取得する
***********************************************************************
valueはhtmlタグの値を表す
例えば、次のようにします： <input type="text" name="seq" value="hello!" id="seq007" />
ページ上のテキストボックスに "hello!"と表示されるのがわかります。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<form>
<input type="text" name="seq" value="" id="seq001" />
<input type="text" name="seq" value="" id="seq002" />
<input type="text" name="seq" value="" id="seq003" />.を入力してください。
</form>
</body>
</html>
document.getElementById("seq001") は id=seq001 を持つこのオブジェクトタグへの参照を取得します。
document.forms[0].seq
ページの最初のフォームの中にある、name=seqを持つ全てのタグオブジェクトへの参照の配列を返します。
document.getElementsByName("seq")
ページ内のname=seqを持つ全てのタグオブジェクトへの参照の配列を返します。
typeのオプション値は以下の通りです。
ボタン Button
checkbox チェックボックスコンポーネント
ファイルアップロードコンポーネント
隠しフィールド
画像 画像領域
パスワード入力用テキストボックス
radio ラジオボタンコンポーネント
リセットフォームボタン
送信フォームボタン
テキストテキスト入力ボックス
***********************************************************************
idは重複値を許さないユニークな識別子で（データテーブルの主キー,pkと同様）、その値によって対応するhtmlタグオブジェクトを取得することが可能です。(同じページコードに重複したidがあると、予測できないエラーになることがあります)
jsコード：document.getElementById("id_value")
指定されたidに基づいて、そのオブジェクトの参照を取得します。
***********************************************************************
nameとidは同じ機能を持ち、htmlタグを識別するためにも使われますが、唯一の違いは、nameは重複した値を許容することです。
jsコード: document.forms[0].name or document.getElementsByName("name")
指定した名前をもとに、その名前のオブジェクトを参照する配列を取得する
***********************************************************************
valueはhtmlタグの値を表す
例えば、次のようにします： <input type="text" name="seq" value="hello!" id="seq007" />
ページ上のテキストボックスに "hello!"と表示されるのがわかります。
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<form>
<input type="text" name="seq" value="" id="seq001" />
<input type="text" name="seq" value="" id="seq002" />
<input type="text" name="seq" value="" id="seq003" />.を入力してください。
</form>
</body>
</html>
document.getElementById("seq001") は id=seq001 を持つこのオブジェクトタグへの参照を取得します。
document.forms[0].seq
ページの最初のフォームの中にある、name=seqを持つ全てのタグオブジェクトへの参照の配列を返します。
document.getElementsByName("seq")
ページ内のname=seqを持つ全てのタグオブジェクトへの参照の配列を返します。
関連
-
HTMLがフロートをクリアする2つの方法
-
HTMLのFormのmethod属性の使い方を紹介します。
-
Htmlのヒント あなたのコードを意味的にする
-
input type=text value=str で不完全な解答を得る。
-
選択項目にスタイルを追加するための純粋なcss（スクリプトなし）
-
td コンテンツ自動改行テーブル table td セット幅が多すぎるテキスト自動改行後
-
metaタグにおけるhttp-equiv属性の使用方法についてご紹介します。
-
zen coding リソースアップデート 機能強化
-
フォーム要素とプロンプトテキストの位置がずれる問題
-
htmlのReadOnlyとEnabledの違い
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン