シュウ

今回は【【HTML】type属性passwordの使い方、パスワードの入力欄を作成しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はinput type=”password”(パスワード)について解説しております。

今回は、input type="password"(パスワード)について詳しく解説していきます。
type=”password”では、「パスワード」の入力欄を作成します。

input type="password"で作成すると、Android・iOSのモバイル端末など対応したブラウザではアルファベットのキーボードが表示されます。

左の図が、input type="text"になり、通常の入力キーボードになります。
右の図が、input type="password"になり、アルファベットのキーボードの入力キーボードになります。

Chrome	Safari	Firefox	IE	Edge

type=”password”について

input type="password"を指定すると、パスワードの入力欄(キーボード)になります。
アルファベットキーボードが表示されることにより、ユーザビリティが向上します。
書き方は以下のようになります。

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="パスワードを入力" />
	</div>
</form>

placeholder属性(入力欄に薄く表示)について

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
「パスワードを入力」など、入力を予測する文字を入れておくとユーザーが間違わずに入力してくれます。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="パスワードを入力" />
	</div>
</form>

maxlength属性(文字数の最大値)について

maxlength属性とは、文字数の最大値を指定します。
maxlength="10"と指定すると、10文字を超えることはありません。

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="半角英数字10文字" 
		maxlength="10" required />
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

注意！
maxlength属性で文字数の制限、今回は10文字にしましたが、例えば15文字以上のパスワードを生成した際に、10文字でカットされる為、maxlength属性を使う際には、注意しなければなりません。

pattern属性(正規表現)について

左の図が、エラーになり、「ひらがな」、「カタカナ」で入力後「送信ボタン」押したらエラーになります。
右の図が、正規表現になり、「半角英数字」で入力後「送信ボタン」押しても問題ありません。

pattern属性とは、入力をする際に値を正規表現でチェックします。
基本、パスワードを指定する際には、「ひらがな」、「カタカナ」は使わず、半角英数字を使うことが多いです。

patternを指定することで「パスワードの正しい形式」にチェックをしてくれます。

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="パスワードを入力" 
		pattern="[a-zA-Z0-9]+" title="パスワードは半角英数字で入力してください。" 
		required />
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

注意！
title属性で、入力パターンの補足を入れておくとよいとおもいます。

required属性(必須項目)について

required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="パスワードを入力" 
		pattern="[a-zA-Z0-9]+" title="パスワードは半角英数字で入力してください。" 
		required />
	</div>
</form>

ポイント！
type="password"とtype="text"は、見た目は変わりませんが、
入力をした際に「・」伏せ字になります。

パスワードはとても重要な情報になります。必ず、type=”password”を
使いましょう!!

CSSでinput type=”password”を整える

今回はCSSの「属性セレクタ」を使い整えていきます。
書き方は以下のようになります

input[type="password"] {
  /*--type="password"のinput要素にのみ適用されます--*/
}

<form method="post">
	<div>
		<label for="password">パスワードを入力</label>
		<input type="password" name="password" placeholder="パスワードを入力" 
		pattern="[a-zA-Z0-9]+" title="パスワードは半角英数字で入力してください。" 
		required />
	</div>
</form>

input[type="password"] {
  width: 200px; /*--幅--*/
  padding: 10px; /*--余白--*/
  font-size: 16px; /*--文字サイズ--*/
  border: solid 2px #cccccc; /*--ボーダー線--*/
  border-radius: 5px; /*--角丸--*/
}

/*--focus--*/
input[type="password"]:focus {
  background-color: #febe3e; /*--背景色--*/
}

:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。

関連記事

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】hr要素の使い方、段落の区切りを示す要素!

  2021.07.02

関連記事

< 前の記事

【HTML】type属性urlの使い方、URLの入力欄を作成しよう!

次の記事 >

【HTML】type属性dateの使い方、日付の入力欄を作成しよう!