一行のテキストボックスやパスワード入力のHTMLタグ【lavel、input、type=”text”、type=”password”】

基本

• formタグで質問全体を囲う
• lavelタグでカテゴリーを囲う
• プログラム的に関連付けたい時は、lavelにfor、inputにidで同じ名前をつける

一行のテキストボックス

text

完成形

テキストボックス：

コード

<input type="text">

<label>テキストボックス：<input type="text"></label>

<label>テキストボックス：
  <input type="text" name="nyanko">
</label>

forとidをつけて関連付ける場合

<label for="nekoname">テキストボックス　：　</label>
<input type="text" id="nekoname">

<label class="nyan" for="nekoname">
  テキストボックス　：　
  <input id="nekoname" name="name" type="text">
</label> 

見本のテキストが記入されている状態

placeholder

完成形

テキストボックス：

コード

<lavel>テキストボックス：<input type="text" placeholder=猫山　猫太></lavel>

forとidをつけて関連付ける場合

<label for="nekoname">テキストボックス：</label>
<input type="text" placeholder=猫山　猫太id="nekoname">

<label class="nyan" for="nekoname">
  テキストボックス　：　
  <input id="nekoname" name="name" type="text" placeholder=猫山　猫太>
</label> 

password（記入時に……になる）

password

完成形

パスワードボックス：

コード

<lavel>パスワードボックス：<input type="password"></lavel>

forとidをつけて関連付ける場合

<label for="nekoname">パスワードボックス　：　</label>
<input type="password" id="nekoname">

<label class="nyan" for="nekoname">
パスワードボックス　：　
  <input id="nekoname" name="name" type="password">
</label>