input要素

記事の内容

input要素は、form要素内データを送信する場合に必要になりtype属性を変更することで様々な機能が使用できます。

type属性

type属性は、入力種類を変更できる項目になり非常に多くの属性が存在します。
※日付以外の枠内コメントはplaceholderを使用(placeholder=”入力説明”)

type=”text”

type=”password”

type=”tel”

type=”email”

type=”url”

type=”search”

type=”date”

type=”time”

type=”datetime-local”

type=”month”

type=”week”

type=”number”

type=”range”

type=”color”

type=”checkbox”

type=”radio”

type=”hidden”
[非表示]

type=”file”

・tel : モバイルブラウザ(スマホ)での入力時に最適化
・urlやemail : 形式的なチェック(かなり簡易的)

value属性

value属性は、サーバーへの送信値となります。

name属性

name属性は、formタグ内のデータが送信されるときにname属性を指定しデータアクセスをする為に必要になります。

type属性(hidden)

type属性(hidden)は、画面上に表示する必要のない値だがformタグ内のデータとして送信したいときに使用されます。

minlength・maxlength属性

input要素内の入力文字を制限することができる属性になります。

minlength・maxlength属性

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input要素(minlength・maxlength属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="POST">
     <p>10文字以上入力できません[maxlength]</p>
     <input type="text" maxlength="10">
     <br>
     <p>1〜3文字入力してボタンをクリック[minlength]</p>
     <input type="text" minlength="4">
     <button type="submit">ボタン</button>
    </form>
  </body>
</html>

出力結果

10文字以上入力できません[maxlength]

required属性

required属性は、データ入力や選択を必須項目にする属性になります。

required属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input要素(required属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="POST">
     <p>未入力でボタンをクリック</p>
     <input type="text" required>
     <button type="submit">ボタン</button>
    </form>
  </body>
</html>

出力結果

name属性(ラジオボタン)

ラジオボタンは複数の選択枠から1つ選ぶ場合に使用される属性形式ですが、
name属性の設定をしていないとうまく切り替えができません。

name属性(ラジオボタン)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input要素(required属性)に関して</title>
  </head>
  <body>
   <p>切り替え設定あり[name属性を合わせる]</p>
   <label for="female1">
   <input type="radio" id="female1" name="gender">
   男性
   </label>
   <label for="male1">
   <input type="radio" id="male1" name="gender">
   女性
   </label>
   <hr>
   <p>切り替え設定なし</p>
   <label for="female2">
   <input type="radio" id="female2">
   男性
   </label>
   <label for="male2">
   <input type="radio" id="male2">
   女性
   </label>
  </body>
</html>

出力結果

切り替え設定あり[name属性を合わせる]

男性女性

切り替え設定なし

男性女性

checked属性

checked属性とは、初期表示で選択されている状態で表示するために必要な属性になります。

checked属性

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input要素(required属性)に関して</title>
  </head>
  <body>
    <p>checked属性あり</p>
    <label for="female3">
    <input type="radio" id="female3" name="gender2" checked>
    男
    </label>
    <label for="male3">
    <input type="radio" id="male3" name="gender2">
    女
    </label>
    <br>
    <label for="check1">
    <input type="checkbox" id="check1" checked>
    </label>
    <hr>
    <p>checked属性なし</p>
    <label for="female4">
    <input type="radio" id="female4" name="gender3">
    男
    </label>
    <label for="male4">
    <input type="radio" id="male4" name="gender3">
    女
    </label>
    <br>
    <label for="check2">
    <input type="checkbox" id="check2">
    </label>
  </body>
</html>

label要素

label要素とは、inputタグが何を示すのか表示するために必要な要素になります。

また、for属性とinputタグ内のid属性を同じにすることで、
label枠をクリックした時に入力欄がフォーカスするようになります。

label要素

記法1

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>label要素に関して</title>
  </head>
  <body>
    <form action="URL" method="POST">
     <p>ラベル(名前:)をクリックすると、入力欄にフォーカスします</p>
     <label for="myName">
     名前:
     <input type="text" id="myName">
   </form>
  </body>
</html>

出力結果

fieldset・legend要素

form要素の周りを枠で囲いたい場合に使用します。

fieldset・legend要素

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fieldset・legend要素に関して</title>
  </head>
  <body>
    <form action="URL" method="POST">
    <fieldset>
    <legend>基本情報</legend>
    <label for="myName">
      名前:
      <input type="text" name="myName" id="myName" placeholder="テキスト入力" required>
    </label>
    <label for="myEmail">
    <br>
      メールアドレス:
      <input type="email" name="myEmail" id="myEmail" placeholder="アドレス入力" required>
    </label>
    <label for="myPassword">
    <br>
      パスワード:
      <input type="password" name="myPassword" id="myPassword" placeholder="パスワード入力" required>
    </label>
    </fieldset>
    <button type="submit">確認</button>
   </form>
  </body>
</html>

出力結果