MENU
オンライン講座開催中
html&css講座開催中

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

一行のテキストボックスやパスワード入力時の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> 

詳しくは講座に来てね

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

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次
閉じる