ホームページ作成
フォームの活用・装飾 (HTML,CSS,JavaScript)(2ページ目)
HTMLやスタイルシート（CSS）、JavaScriptを使ったフォームの活用方法、装飾方法について解説しました。
記事一覧
2段階に連動するプルダウンメニューの作り方
ガイド記事
西村 文宏HTMLで作った2つのプルダウンメニューを、JavaScriptで連動させる方法を解説。メイン(1階層目)のプルダウンメニューの選択項目に応じて、サブ(2階層目)のプルダウンメニューを動的に表示する方法です。2段階に連動させると2階層目の表示項目数を絞れるため、選択肢をシンプルに分かりやすく表示できる効果があります。
未記入の入力フォームに案内画像を表示する
ガイド記事西村 文宏入力フォーム内に何も入力されていないとき、フォームの内側に案内用の画像が表示されるようにしてみましょう。入力欄にカーソルが入ったら案内画像は消えるようにします。文字だけよりも凝ったデザインにできます。
他サイトでの入力履歴を出せる入力欄を作る
ガイド記事西村 文宏入力フォーム内の項目には、「名前」や「メールアドレス」など他サイトでも頻繁に入力していると思われる項目がたくさんある場合があります。他サイトでの入力履歴を利用して補完できるように作っておくと便利です。
フォームのボタンにアイコンや装飾を加える
ガイド記事西村 文宏入力フォームなどに配置する「ボタン」の表面には、ただ文字を表示するしかないと思っていませんか？ それ以外にも、任意のアイコンを表示させたり、色や書体を指定して装飾した文字列を表示させることができます。
プレースホルダー (placeholder) の表示とCSSでの装飾方法
ガイド記事西村 文宏プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。
極短JavaScriptでプルダウンメニューを作る
ガイド記事西村 文宏狭いスペースに様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。簡単なJavaScriptを使いますが、スクリプトはHTML内にわずか20文字です！
JavaScriptで入力チェック・文字を入力制限する方法
ガイド記事西村 文宏JavaScriptで入力チェック・文字を入力制限する方法を解説。メールアドレスや日付のように入力文字数や文字種を制限したいフォームでは、リアルタイムにエラー表示できると便利。正規表現などを使う入力チェックの書き方をサンプルと共にご紹介。
ラベル付きの枠で入力フォームをグループ化
ガイド記事西村 文宏アプリケーションの入力フォームなどでよく使用される「グループボックス」のようなラベル付きの枠を作ってみませんか？ これを使って入力フォームを整頓すると、フォームの見やすさの向上が期待できます。
テキスト入力欄の内側にアイコンを表示する
ガイド記事西村 文宏無味乾燥なテキスト入力フォームの内側左端にアイコンを表示させてみましょう。検索用の入力欄なら虫眼鏡などの「検索機能」を示すアイコンを表示させることで、役割が分かりやすいテキスト入力フォームになります。
CSSでIMEの状態を制御するime-modeの使い方＋代替方法
ガイド記事西村 文宏Web上の入力フォームで日本語入力機能(IME)のON・OFF・無効状態を制御する方法に、CSSのime-modeプロパティがあります。対応ブラウザはIEやFirefoxで、Edgeでは効かなくなりました。ime-modeの書き方と、ime-modeを使わずに済ませる代替方法として、ChromeやiOS版Safariなどで使えるHTML5.1のinputmode属性や、半角全角を自動変換する方法などをご紹介。
