テキストボックス 入力文字数をカウントするテキストボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力文字数をカウントするテキストボックスを作る方法 お問い合わせ内容を入力する複数行のテキストボックスへ、現在の入力文字数をリアルタイムで表示する方法を紹介します。文字を入力するたびにJavaScriptが入力内容の長さを取得し、入力欄の下...
ゆきのふ
テキストボックス 
テキストボックス 入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法 入力内容をチェックして成功メッセージを表示するテキストボックスを作る方法を紹介します。このサンプルでは、名前・電話番号・メールアドレスをJavaScriptで判定し、...
テキストボックス 入力内容をチェックしてエラーを表示するテキストボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
入力内容をチェックしてエラーを表示するテキストボックスを作る方法 入力内容をJavaScriptでチェックし、未入力の場合にエラーメッセージを表示するテキストボックスを作る方法を紹介します。「確認する」ボタンをクリックすると入力欄の内容を判...
テキストボックス 入力中に色が変わるテキストボックスを作る方法【HTML/CSS・サンプルコード付き】
入力中に色が変わるテキストボックスを作る方法 入力中に色が変わるテキストボックスをHTMLとCSSで作る方法を紹介します。通常時はグレーの枠線と白い背景で表示し、テキストボックスをクリックして入力できる状態になると、枠線・背景色・ラベルの色...
テキストボックス 下線だけのテキストボックスを作る方法【HTML/CSS・サンプルコード付き】
下線だけのテキストボックスを作る方法 下線だけのテキストボックスを作る方法を紹介します。通常の枠線付き入力欄ではなく、下線のみを表示するシンプルなデザインのテキストボックスです。フォーム全体をすっきりと見せたい場合や、モダンなデザインを取り...
テキストボックス アイコン付きテキストボックスを作る方法【HTML/CSS・サンプルコード付き】
アイコン付きテキストボックスを作る方法 アイコン付きテキストボックスを作る方法を紹介します。入力欄の左側へ検索・ユーザー・メールなどのアイコンを配置することで、どのような内容を入力するフォームなのかを視覚的に分かりやすく表現できます。HTM...
テキストボックス プレースホルダー付きテキストボックスを作る方法【HTML/CSS・サンプルコード付き】
プレースホルダー付きテキストボックスを作る方法 プレースホルダー付きテキストボックスを作る方法を紹介します。入力欄の中へ案内文を表示できるため、ユーザーに「何を入力すればよいか」を分かりやすく伝えられます。HTMLとCSSだけで実装できるシ...
セレクトボックス プレースホルダー付きセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】
プレースホルダー付きセレクトボックスを作る方法 プレースホルダー付きセレクトボックスをHTMLとCSSだけで作る方法を紹介します。初期状態では「選択してください」などの案内文を表示し、ユーザーが項目を選択すると選択内容へ切り替わるシンプルな...
セレクトボックス カードデザインのセレクトボックスを作る方法【HTML/CSS・サンプルコード付き】
カードデザインのセレクトボックスを作る方法 カードデザインのセレクトボックスを作る方法を紹介します。通常のセレクトボックスをカード風のデザインで囲むことで、入力エリアを分かりやすく表示できるサンプルです。HTMLとCSSだけで実装しているた...
セレクトボックス ラベル付きセレクトボックスを横並びに配置する方法【HTML/CSS・サンプルコード付き】
ラベル付きセレクトボックスを横並びに配置する方法 ラベル付きのセレクトボックスを横並びで配置する方法を紹介します。都道府県や配送方法、支払い方法など、関連する入力項目を1行にまとめて表示したい場面で便利なレイアウトです。 HTMLとCSSだ...