テキストボックスで使える属性

Input要素のType属性一覧

属性

用途

備考

属性

name

用途

formの内容が送信される際に、区別される内容

nameと値がセットになって送信される

備考

-

属性

readonly

用途

読み取り専用の設定

備考

-

属性

value

用途

送信される値

備考

-

属性

size

用途

表示される文字数を設定

備考

整数で指定する

属性

maxlength

用途

入力できる最大文字数を設定

備考

整数で指定する

属性

autocomplete

用途

入力候補を提示して入力内容を自動補完[html5より]

備考

on/off/default

属性

pattern

用途

正規表現での入力パターンを設定[html5より]

備考

-

属性

placeholder

用途

入力欄に初期表示する内容を設定[html5より]

備考

-

属性

required

用途

入力必須の設定[html5より]

備考

-

サンプル

				<label>基本<input type="text" name="base1"></input></label>
				<label>値入力済み:<input type="text" name="value1" value="送信される値"></input></label>
				<label>値入力済み(読み取り専用):<input type="text" name="readonly1" value="送信される値" readonly="readonly"></input></label>

				<label>表示文字数<input type="text" name="size1" size="40"></input></label>

				<label>文字数制限<input type="text" name="maxlength1" maxlength="30"></input></label>

				<label>入力候補
				<input type="text" name="autocomplete1" autocomplete="on"></input><br />
				<input type="text" name="autocomplete2" autocomplete="off"></input><br />
				<input type="text" name="autocomplete3" autocomplete="default"></input>
				<span>1は候補あり、2は候補なし、3はブラウザの仕様に従うです</span>
				</label>
				<label>正規表現<input type="text" name="pattern1" pattern="[0-9]{3}-[0-9]{4}"></input></label>
				<label>初期欄表示<input type="text" name="placeholder1" placeholder="郵便番号を入力してください"></input></label>

				<form>
				<label>必須項目
				<input type="text" name="required1" required="required"></input><br/>
				<input type="submit" value="送信"></input>
				</label>
				</form>