HTMLのtextFieldの使用方法

input-text

基本

HTMLでテキストフィールドを作成するには以下のように記述する。

<input type="text" name="example">

ラベル

ラベルを付けるには<label></label>を使用する。

<label> 
	ニックネーム 
	<input type="text" name="nickname"> 
</label>

初期値

初期値はvalueを使用する。

<input type="text" name="example" value="name">

プレースホルダー

<input type="text" name="example" placeholder="name">

正規表現

正規表現をテキストエリアで使用したい場合はpatternを使用する。
この場合は<form></form>で囲む。

<form> <input type="text" name="name" value="a〜z以外はエラーに" pattern="[a-z]+" > <button>送信する</button> </form>

textarea

inputより多い文字数を記入させたい場合は<textarea></textarea>を使用する。

<textarea>
</textarea>

行数の指定

行数の指定にはrowsとcolsプロパティを使用する。

<textarea rows="行数" cols="列数">
	ここに書くと初期値となる。
</textarea>

ラベル

<label>ここを押すとtextareaにフォーカス
	<textarea name="example2"></textarea>
</label>

css

リサイズ変更不可

デフォルトだと右下にテキストフィールドを拡大するUIがついているがこれを無効にしたい場合は以下のように記述する。

textarea {
	resize: none;
}

枠線やフォントサイズ、余白を変更

textarea { 
	width: 100%; /* 幅 */ 
	margin: 1em 0; /* 周囲の余白 */ 
	padding: 0.5em; /* 枠線内の余白 */ 
	font-size: 1em; /* フォントサイズ */ 
	border: solid 2px #e1e3e8; /* 枠線のスタイル */ 
	border-radius: 4px; /* 角丸に */ 
	resize: none; /* リサイズ不可に */
} 
 
/* フォーカス時のスタイル */ 
textarea:focus { 
	border-color: #56a9ff; 
	outline: 0; 
}