HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• inputタグで使えるパスワード属性について
• パスワード属性を指定したinputタグに追加できる属性
• inputタグでパスワードの入力欄を作成してみよう
• まとめ
• HTMLを学習中の方へ

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

 

inputタグで使えるパスワード属性について

inputタグのtype属性の値に「password」を指定することで、パスワード専用の入力欄になります。

以下のように記述することで、パスワード入力時には文字がドット（●）のような記号に置き換えられ、入力内容が容易に読み取られなくなります。

<input type="password">

 

以下のResult画面にある入力欄に、実際に入力して確認してみましょう。

See the Pen
Untitled by nomallica (@nomallica)
on CodePen.

 

また、パスワード属性を指定したinputタグには以下の属性も指定することができ、入力時の制限や補助的な表示を加えることが可能となっています。

属性	説明
autocomplete	ブラウザ等による自動入力を許可するかどうかを設定できる。
pattern	形式に沿った文字が入力されるように、正規表現を使って制限できる。
placeholder	入力時のヒントを表示できる。
required	入力が必須の項目にする。
readonly	入力不可で読み取りのみに制限できる。値の送信は可能。

 

以降では、それぞれの属性について詳しく見ていきましょう。

 

パスワード属性を指定したinputタグに追加できる属性

autocomplete属性

以下のようにautocomplete属性を追加することで、入力の際にオートコンプリートを機能させるかどうかを制御できます。

<input type="password" autocomplete="current-password">

オートコンプリートとは、ブラウザやパスワード管理ツール等が、自動的にパスワード入力欄を埋めるしくみのことです。

入力を容易にする便利な機能ですが、パスワード管理のセキュリティを下げることにも繋がりますので、使い所をよく考えて指定しましょう。

指定できる値は以下になります。

値	説明
on	入力時にオートコンプリートを許可します。
off	入力時にオートコンプリートを許可しません。
current-password	ブラウザ等に記録されているサイト専用のパスワードを自動入力します。
new-password	新規入力フォーム等で新しいパスワードを提案して自動入力します。

 

pattern属性

形式に沿った文字が入力されるように、正規表現を使って制限できます。

例えば以下のようにpattern属性の値を指定することで、半角英数字6文字以上を満たすことができない入力値がエラーになります。

<input type="password" pattern="^([a-zA-Z0-9]{6,})$" title="半角英数字6文字以上で入力ください">

 

正規表現がよくわからない場合は、業務で役立つ！jQueryで覚えておくべき正規表現とは【初心者向け】を読むと基本的な理解が深まります。

 

placeholder属性

以下のように、値に入力時のヒントとなる文字列を設定することができます。

<input type="password" placeholder="半角英数字6文字以上のパスワードを入力">

このヒント表示により、ユーザー側は入力欄にどのような情報が求められているのかを把握できます。

 

required属性

以下のようにrequired属性を設定することで、入力必須の項目にできます。

<input type="password" required>

 

readonly属性

以下のようにreadonly属性を設定することで、読み取りのみで入力不可の項目にできます

<input type="password" readonly>

値はサーバーに送信可能です。

 

[PR] Webデザインで副業する学習方法を動画で公開中

inputタグでパスワードの入力欄を作成してみよう

以下のようにシンプルなパスワード入力欄を作成してみましょう。

 

HTML

<form>
  <input type="password" value="" name="sample" maxlength="10">
</form>

inputタグの属性として、nameは、入力装置の識別子（ラベル）として、名前を定義することになります。

また、maxlength属性に定める数値は、入力文字数の上限数を定めることになります。

 

表示結果

See the Pen
Untitled by nomallica (@nomallica)
on CodePen.

 

まとめ

本記事では、HTMLのinput要素でパスワードの入力欄を作成する方法を以下の内容で解説しました。

• inputタグで使えるパスワード属性について
• パスワード属性を指定したinputタグに追加できる属性
• パスワード入力欄の作成方法

input要素を理解することで、パスワード入力欄に限らず様々な入力フォーム作成を実現します。

ぜひ使いこなせるように覚えておきましょう。

 

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！