<input type="text">
| ブラウザ |
|
|---|---|
| 分類 | |
| 要素 |
input要素に type="text" を指定すると、1行のテキスト入力欄を作成することができます。
<input type="text" name="example1">
<input type="text" name="example2" size="30" maxlength="30" value="サンプル">
| 属性 | 値 | 説明 |
|---|---|---|
type="" |
text |
1行のテキスト入力欄を作成 |
name="" |
文字列 | 部品の名前を指定 |
value="" |
文字列 | 入力欄の初期値を指定 |
size="" |
文字数 | 入力欄の幅を文字数で指定 |
maxlength="" |
文字数 | 入力できる最大文字数を指定 |
type="text" （1行のテキスト入力欄を作成）
type属性の値に text を指定すると、1行のテキスト入力欄を作成できます。
name="" （部品の名前を指定）
フォーム部品を識別するための名前を指定します。
この属性の値は、入力されたデータ（またはvalue属性の値）とセットで送信されることになります。
value="" （入力欄の初期値を指定）
この属性の値は、初期値として入力欄に表示されます。
例えば value="サンプル" を指定した場合は、サンプルという文字列が最初から入力された状態になります。
size="" （入力欄の幅を文字数で指定）
入力欄の横幅を文字数で指定します。
この属性を指定した場合でも、ブラウザにより見た目の幅は異なります。同じような幅で表示させたい場合は、スタイルシートで指定します。
maxlength="" （入力できる最大文字数を指定）
入力できる最大文字数を指定します。
例えば maxlength="10" を指定した場合は、10文字までしか入力できなくなります。
その他の属性
以下の属性で、部品の無効化と書き換えの禁止を指定することができます。（主に、JavaScript等と組み合わせて使用することになります）
| 属性 | 値 | 説明 |
|---|---|---|
disabled |
値は不要 | 部品を無効化する |
readonly |
値は不要 | 書き換えを禁止する |
disabled （部品を無効化する）
この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。
readonly （書き換えを禁止する）
この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。
使用例
<form method="post" action="example.cgi">
<p>デフォルト<br>
<input type="text" name="example1"></p>
<p>幅を指定<br>
<input type="text" name="example2" size="30"></p>
<p>最大文字数を指定<br>
<input type="text" name="example3" size="30" maxlength="10"></p>
<p>初期値を指定<br>
<input type="text" name="example4" size="30" value="こんにちは"></p>
<p>部品を無効化する<br>
<input type="text" name="example5" size="30" value="こんにちは" disabled></p>
<p>書き換えを禁止する<br>
<input type="text" name="example6" size="30" value="こんにちは" readonly></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
デフォルト
幅を指定
最大文字数を指定
初期値を指定
部品を無効化する
書き換えを禁止する
- サンプルのため送信できません。