HTML input 属性の違い

HTML input: name vs. id の違い

HTML の <input> 要素は、ユーザーからの入力を受け取るための基本的なフォーム要素です。この要素には、name 属性と id 属性があります。これらは、異なる目的で使用されます。

name 属性

• 使用方法
  
  • <input> 要素の属性として指定します。
  • 同じ名前を持つ複数の <input> 要素をグループ化できます。
• 目的
  
  • フォームの送信時にサーバーに送信されるデータの識別子として使用されます。
  • 複数の <input> 要素を同じ名前でグループ化し、サーバサイドで処理することができます。

例

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit   ">
</form>

id 属性

• 使用方法
  
  • 各要素にユニークな id を割り当てます。
• 目的
  
  • JavaScript で要素を識別するためのユニークな識別子として使用されます。
  • CSS で要素をスタイルするための選択子として使用されます。

<input type="text" id="username-input">
<script>
  const usernameInput = document.getElementById('username-input');
  // ...
</script>

要約

• id 属性
  JavaScript や CSS で要素を識別するためのユニークな識別子。
• name 属性
  フォームの送信時にサーバーに送信されるデータの識別子。

どちらを使用するか

• JavaScript または CSS での要素操作
  id 属性を使用します。
• フォーム送信
  name 属性を使用します。

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit   ">
</form>

• フォームが送信されると、サーバーはこれらの名前を使用して、ユーザーが入力した値を取得します。
• name 属性は、各 <input> 要素にユニークな名前を割り当てています。
• このフォームは、ユーザー名とパスワードの入力を受け取り、/submit エンドポイントに送信します。

<input type="text" id="username-input">
<script>
  const usernameInput = document.getElementById('username-input');
  // ...
</script>

• JavaScript で document.getElementById('username-input') を使用することで、この要素を参照し、その値を取得したり、変更したりすることができます。
• id 属性は、要素にユニークな識別子 username-input を割り当てています。
• このコードは、ユーザー名の入力を受け取る <input> 要素を JavaScript で操作しています。

HTML input 属性の違い

HTML の <input> 要素には、多くの属性があり、それぞれの属性は異なる機能を提供します。以下は、いくつかの一般的な属性とその違いです。

type 属性

• 可能な値: text, password, submit, radio, checkbox, button, file, number, email, date, time, datetime-local, month, week, color, search, tel, url, textarea など。

value 属性

• type 属性が submit または button の場合、ボタンのラベルになります。

placeholder 属性

• <input> 要素の入力フィールド内にヒントテキストを表示します。

required 属性

• <input> 要素への入力が必須であることを示します。

disabled 属性

• <input> 要素を無効にします。

readonly 属性

size 属性

maxlength 属性

• <input> 要素に入力できる最大文字数を指定します。

pattern 属性

• <input> 要素の入力値が特定のパターンに一致するかどうかを検証します。

• サーバサイドで、これらの属性の値を解析して処理します。
• カスタム属性を使用して、任意のデータを <input> 要素に関連付けることができます。

<input type="text" data-username="john_doe">

JavaScript で直接操作

• JavaScript を使用して、<input> 要素の値を取得または設定することができます。

<input type="text" id="username-input">
<script>
  const usernameInput = document.getElementById('username-input');
  // ...
</script>

CSS セレクター

• ただし、JavaScript で個々の要素を操作する場合には、id 属性が便利です。

input[type="text"] {
  // ...
}

カスタム要素

• Web Components を使用して、独自の <input> 要素を作成し、その動作をカスタマイズすることができます。

class CustomInput extends HTMLElement {
  // ...
}
customElements.define('custom-input', CustomInput);

const inputElement = document.getElementById('my-input');
inputElement.value = 'Default value';

JavaScript でラベル要素を作成

• JavaScript を使用して、<input> 要素の横にラベル要素を作成し、ヒントテキストを表示することができます。

const inputElement = document.getElementById('my-input');
const labelElement = document.createElement('label');
labelElement.textContent = 'Enter your name';
inputElement.parentNode.insertBefore(labelElement, inputElement);