ywork2020.com

Title

インプット要素のテキスト型を使えば、単一行のテキスト入力欄を設置する事ができる

input type="text"の概要

input要素のtext型を使うと、1行テキストの入力欄(初期値)を設置できます。 この要素はユーザーインターフェースとして使われるので、単にテキストを表示するだけの用途には適しません。

テキスト入力欄の値はvalue属性として取得や操作を行うことができます。 尚、このインターフェースを利用するにあたっては、javascriptの知識があると便利です。

実機サンプルとサンプルコード

値が空のテキストボックスを設置する

<body>
	<input type="text">
</body>
このテキストボックスの中に文字列を入力することができます。

初期値を設定したテキストボックスを設置する

テキストボックスの値はvalue属性を利用して操作します。
<body>
	<input type="text" value="初期値">
</body>
このテキストボックスの中に文字列を入力することができます。

テキストボックスの値をjavascriptで取得する

javascriptを利用してテキストボックスのvalue属性の値を取得します。 このサンプルでは取得した値を警告ダイアログに表示します。
ボタンをクリックした際の処理コードは混乱を避けるために省略しています。 ボタンをクリックしたら<script>~</script>内のコードが実行されると思ってください。
<body>
	<input type="text" value="初期値" id="idInputText">
</body>
<script>
	window.alert(idInputText.value);
</script>

以下の表示ボタンをクリックするとテキストボックスの値を警告ダイアログに表示します。

コードの要点
  • input要素のテキスト型にid属性で識別子を設定しています。(idInputText)
  • idInputText.valueの部分で識別子を参照して、そのvalue属性値を取得しています。
  • window.alert(この部分が警告ダイアログに表示される内容になります);
関連のあるページ