cman.jpWEBページ作成
広告
<input type="password"> 「パスワード入力」
<input type="password">は、パスワードなど画面に入力内容を表示させてくない場合に使用します。
<form>～</form>の間に<input>の入力部品を配置することで、サーバのプログラム（CGIなど）に入力内容を引き渡すことが出来ます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<input type="password">の属性
【構文】
ページTOP
<input type="password" name="in01" size="10" maxlength="20" ・・・>
| 属性 | 意味 | 値のサンプルなど | ||||||
|---|---|---|---|---|---|---|---|---|
| name="固有名" | 入力に付ける固有名 | "text1" | ||||||
| size="文字数" | 入力幅の文字数 | "10"(文字数) | ||||||
| maxlength="文字数" | 入力可能最大文字数 | "50"(文字数) | ||||||
| minlength="文字数" | 入力可能最小文字数 ※HTML5で追加 | "50"(文字数) | ||||||
| value="値" | 初期値の表示 | "ABC" | ||||||
| disabled | 入力の無効化 | "disabled" | ||||||
| readonly | 読み取り専用 | "readonly" | ||||||
| form="フォーム名" | 送信するフォームの関連付け ※HTML5で追加 | "form01" | ||||||
| autofocus | フォーカス（カーソル）を設定 ※HTML5で追加 | "autofocus" | ||||||
| autocomplete="on","off" | オートコンプリート機能の使用有無 ※HTML5で追加 |
|
||||||
| pattern="正規表現" | 入力可能フォーマットの指定 ※HTML5で追加 | "list01" | ||||||
| placeholder="テキスト" | 入力ヒントの表示 ※HTML5で追加 | "氏名を入力ください" | ||||||
| required | 入力を必須とする ※HTML5で追加 | "required" |
| グローバル属性 |
| |
| イベント属性 |
| |
<input type="password">のサンプル
<input type="password" name="in01" size="15" maxlength="20">
パスワード入力
ブラウザによって表示が異なります。画面イメージを確認
| IE11 | Chrome32 | Firefox27 | Safari5.1 |
|---|---|---|---|
 |  |  |  |
その他のサンプルは <input type="text"> を参照ください。
<input type="password">のスタイルシートサンプル
<style type="text/css">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="password" name="in01" placeholder="パスワ－ドを入力" class="inputSample">
<!--
.inputSample {
width:200px;
font-size: 20pt;
padding: 5px;
background-color: #ccffff;
border: 3px inset #00ccff;
-->
</style>
<input type="password" name="in01" placeholder="パスワ－ドを入力" class="inputSample">
スタイルシートを使用することで、色々な入力が可能となります。
留意事項
- 画面上はマスク「●」で表示されますが、通常のテキストを同様に送信されます。
通信傍受など受けた場合パスワードもそのまま傍受されます。
このため、パスワード入力画面は通常SSL通信が利用されています。 - ブラウザによってマスク文字「●」の大きさが異なりますので、入力幅には注意が必要です。
広告