Perl Web開発者のHTML・CSS入門

【HTML5】パスワードフィールド - パスワード入力のフォーム部品

パスワードフィールドは、パスワードを入力するためのフォーム部品です。inputタグで「type="password"」を指定します。テキストフィールドと異なり、入力した文字が見えません。

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

パスワードを入力することができます。フォーム部品なので、name属性で、名前を付けておくことが一般的です。

パスワードフィールドは、インラインブロック要素

パスワードフィールドは、デフォルトで、インラインブロック要素です。インラインブロック要素なので、左側に流れ、高さや幅を設定することができます。

<input type="password" name="password" style="width:100px;height:50px;">

パスワードフィールドに、フォントサイズ、パディングを設定する

デフォルトのパスワードフィールドは、スマートフォンをメインに考えると、少し小さいです。パスワードフィールドに、適切なパディングを設定してみましょう。

<input type="password" name="password" style="padding:12px 5px 10px 5px;">

iphone/safari対応するために、パスワードフィールドのフォントサイズは、16px以上に

iphone/safari対応するために、パスワードフィールドのフォントサイズは、16px以上にしましょう。iphone/safariでフォーム入力時の自動拡大機能をoffにするためのです。

iphone/safariで、フォーム部品にデフォルトのデザインが適用されるのを防ぐ

iphone/safariで、フォーム部品にデフォルトのデザインが適用されるのを防ぐには、「-webkit-appearance:none;」を指定します。iphone/safariで、テキストフィールドやボタンのデフォルトデザインが適用されてしまうのを解決を参考にしてください。

パスワードフィールドのラベルをクリックしたときに、フォーカスが当たるようにする

パスワードフィールドだけではなく、項目見出しをクリックしたときに、フォーカスが当たるようにするにはlabelタグを使います。inputタグの中のid属性で指定した名前をlabelタグのfor属性に指定します。

パスワード:

<label for="password">パスワード:</label> <input type="password" name="password" id="password">

パスワードというラベルをクリックしてみてください。パスワードフィールドに、フォーカスが当たります。

フォーム送信時に、jQueryでフォームのパスワードフィールドの値を取得する

送信ボタンを押したタイミングで、パスワードフィールドの値を取得するjQueryを使ったサンプルです。ajaxでPOSTリクエストを送信するときに、よく使います。取得した内容を、alertで表示しています。

フォームのすべての値を取得する方法

フォームのすべての値を取得する方法です。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-all .submit_button', function () {
      
      /* フォームのすべての値を取得する方法 */
      var data = $(this).closest('form').serialize();
      
      alert(data);
    });
  });
</script>

<div class="form-text-field-all">
  <form>
    <div>
      パスワード: <input type="password" name="password">
    </div>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>

on('click')をdocumentから始めているのは、動的なHTMLの書き換えに対応するためです。ドキュメントトップからたどると、HTMLの部分が動的に書き換えられた場合も、正しく動作します。buttonに「type="button"」を指定しておくと、フォームのボタンのサブミットの動作がなくなくすことができます。

個別のパスワードフィールドの値を取得する方法

個別のパスワードフィールドの値を取得する方法です。パスワードだけを取得しています。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-part .submit_button', function () {
      
      /* パスワードを取得 */
      var password = $(this).closest('form').find('[name=password]').val();
      
      alert(password);
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <div>
      パスワード: <input type="password" name="password">
    </div>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>