HTML & CSS

レシピ

フォーム

パスワードを入力するためのフォームを作る

input要素の「type=password属性」を使った、パスワードの入力フィールド設置方法を解説します。

この記事のポイント

  • パスワードのような入力内容を非常にするフォームを設置する

入力値が非表示になるパスワードの入力フィールド

通常の入力フォームは入力した文字が見えた状態ですが、パスワードのような機密性の高い情報を入力する場合は内容を非表示にすることができます。
設定方法はinput要素に「type=”password”」を指定するだけなので非常に簡単です。

表示例
表示例

コード例

<h2>お問い合わせフォーム</h2>
<form action="" method="post">
	<div>
		<label for="i_name">お名前</label>
		<input id="i_name" type="text" name="name" value="" placeholder="山田 太郎">
	</div>
	<div>
		<label for="i_furigana">フリガナ</label>
		<input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
	</div>
	<div>
		<label for="i_pass">パスワード</label>
		<input id="i_pass" type="password" name="pass" value="" inputmode="latin">
	</div>
	<div>
		<label for="t_message">お問い合わせ内容</label>
		<textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。" minlength="5" maxlength="10"></textarea>
	</div>
	<div class="btn_area">
		<input type="submit" name="btn_confirm" value="入力内容を確認する">
	</div>
</form>

inputmode属性はスマホ・タブレットなどのバーチャルキーボードで入力する端末向けの属性で、デフォルトのキーボードを変更するために指定します。
今回は「latin」を指定しているので、次のような半角英のキーボードが表示されます。

iPhoneでのキーボード表示例
iPhoneでのキーボード表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。