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

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

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

基本

基本のテキストフィールドを作る方法

表示非表示

入力内容をリアルタイム表示するテキストフィールドを作る方法
パスワードの表示・非表示を切り替えるテキストフィールドを作る方法

デザイン

入力欄がくぼんで見える立体テキストフィールドを作る方法
下線だけのテキストフィールドを作る方法

自動

指定時間後に入力できなくなるテキストフィールドを作る方法
ページを開くと自動でフォーカスするテキストフィールドを作る方法
ひらがなをカタカナへ自動変換するテキストフィールドを作る方法
全角数字を半角に・半角数字を全角に自動変換するテキストフィールドを作る方法
大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストフィールドを作る方法
郵便番号から住所を自動入力するフォームを作る方法

操作

コピーボタン付きテキストフィールドを作る方法
クリアボタン付きテキストフィールドを作る方法

状態維持

ページを移動しても内容を記憶するテキストフィールドの作り方

コンテンツ

画像付きテキストフィールドを作る方法

入れ子

テキストフィールドを有効・無効に切り替えるトグルスイッチを作る方法

入力・検証

入力文字数を制限するテキストフィールドを作る方法
読み取り専用テキストフィールドを作る方法
入力禁止のテキストフィールドを作る方法
入力文字数をカウントするテキストフィールドを作る方法
入力内容を確認ボタンでチェックしてエラーを表示するテキストフィールドを作る方法
会員登録フォームで2回入力したパスワードの一致チェックをする方法
会員登録フォームのパスワード強度をチェックする方法
入力内容をリアルタイムでチェックするテキストフィールドを作る方法