テキストエリア
コピペですぐ使えるテキストエリアのサンプルコードを動作・特徴別にまとめています。
無料ツール
テキストフィールド・テキストエリアを自由に作成

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

テキスト入力欄作成ツールを使う
新しいタブで開きます

基本

基本のテキストエリアを作る方法

指定時間

指定時間後に入力できなくなるテキストエリアを作る方法

最初から

最初から入力できる状態のテキストエリアを作る方法

状態維持

ページを移動しても内容を記憶するテキストエリアの作り方

画像

画像付きテキストエリアを作る方法

立体的

入力欄がくぼんで見える立体テキストエリアを作る方法

localStorage

ページを移動しても内容を記憶するテキストエリアの作り方

切り替え

テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法

応用

入力文字数を制限するテキストエリアを作る方法
入力内容をリアルタイム表示するテキストエリアを作る方法
コピーボタン付きテキストエリアを作る方法
読み取り専用テキストエリアを作る方法
入力禁止のテキストエリアを作る方法
クリアボタン付きテキストエリアを作る方法
入力文字数をリアルタイムでカウントするテキストエリアを作る方法
入力内容をチェックして未入力エラーを表示するテキストエリアを作る方法

自動

ひらがなをカタカナへ自動変換するテキストエリアを作る方法
全角数字を半角に・半角数字を全角に自動変換するテキストエリアを作る方法
大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストエリアを作る方法
自動で高さが広がるテキストエリアを作る方法
入力内容に応じて高さが自動で広がるテキストエリアを作る方法
ページを開くと自動でフォーカスするテキストエリアを作る方法