HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLフォームでパスワード入力欄を作成する方法【type="password"の使い方】

HTMLフォームでパスワードを入力させるには、<input>タグのtype属性に「password」を指定します。これは通常の1行テキスト入力と同じ形式ですが、ユーザーが文字を入力した瞬間に「●」や「*」などの記号でマスク表示される点が特徴です。

これにより、画面を覗き見されてもパスワード本体が直接読み取られないようになり、ログインフォームや会員登録フォームなどで広く利用されています。

基本的な書き方

パスワード入力欄は以下のように記述します。

<input type="password" name="password">

サンプルコード

実際にHTMLフォームでパスワード入力を実装する例を見てみましょう。次のコードでは、ユーザー名（テキスト入力）とパスワード（マスク表示）の2つのフィールドを持つフォームを作成しています。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Forms</title>
   </head>
   <body>
      <p>以下の情報を入力してください：</p>
      <form>
         ユーザー名：<br>
         <input type="text" name="name">
         <br>
         パスワード：<br>
         <input type="password" name="password">
         <br>
      </form>
   </body>
</html>

このコードをブラウザで開くと、パスワード欄に入力した文字が自動的にマスクされ、第三者から内容を読み取れない状態で表示されます。

補足：より安全なパスワード入力のためのポイント

  • autocomplete属性の活用： autocomplete="new-password" を指定すると、登録用フォームでブラウザによる誤った自動入力を防げます。
  • サーバー側での暗号化： マスク表示はあくまで画面上の見せかけであり、通信内容そのものは保護されません。送信時は必ずHTTPSを使用し、サーバー側ではパスワードをハッシュ化して保存しましょう。
  • 入力制限の追加： minlengthやmaxlength属性、pattern属性を組み合わせることで、パスワードの文字数や形式に関するルールを設定できます。

このようにtype="password"を使うだけで簡単にパスワード入力欄を実装できるため、認証系フォームを作成する際の基本として覚えておきましょう。

  1. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&

  2. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep