ホームページ作成

【ホームページ作成】フォームの活用・装飾 (HTML,CSS,JavaScript)

フォームの活用・装飾 (HTML,CSS,JavaScript)

HTMLやスタイルシート（CSS）、JavaScriptを使ったフォームの活用方法、装飾方法について解説しました。

入力文字数が足りない場合に、その場で注意

入力欄によっては、「最低○文字は入力してほしい」という『最低入力文字数』を指定したいことがあります。入力欄の隣に『現在不足している文字数』をリアルタイムに表示して、入力ミスを減らす方法をご紹介！

ガイド：西村文宏
IEで入力欄のサイズが変化しない問題を解決

input要素などで作る入力欄(フォーム)は、IEで表示させた場合だけ、本文の文字サイズに影響されずに、常に同じ大きさで表示されてしまいます。閲覧者のフォントサイズ設定に合ったサイズで表示させる方法をご紹介。

ガイド：西村文宏
Enterキーで送信されてしまうのを防ぐ

フォームの『1行入力欄』内にカーソルがあるときに[Enter]キーを押すと、フォーム内容が送信されてしまうことがあります。入力途中で誤送信されるのを防ぐため、[Enter]キーでは送信されないようにしてみましょう。

ガイド：西村文宏
1つだけ選択させるフォームの作り方&選び方

二者択一の選択をさせる場合、ラジオボタン・プルダウンメニュー・チェックボックスのどれでも実現できます。どんな場面でどれを使うのが良いのか、「複数から1つを選択させる」フォームの作り方と選び方をご紹介。

ガイド：西村文宏
長さを変更できるテキスト入力欄を作る

入力欄が狭すぎると長文が入力しにくくなります。しかし広すぎるとページが見渡しにくくなってしまいます。ユーザが自ら入力欄の大きさを調節できるような「編集領域の増減機能」付き入力欄を作ってみましょう。

ガイド：西村文宏
1回クリックすると無効になるボタンを作る

BBSの投稿ボタンやメッセージの送信ボタンなどは、複数回クリックされると同じ内容を何度も送信してしまいます。1回クリックすると無効状態に変化する送信ボタンを用意して、重複送信を防ぐ方法をご紹介。

ガイド：西村文宏
テキスト入力欄の文字数をリアルタイム表示

テキスト入力欄にユーザが何かを入力する際に、現在の入力文字数をリアルタイムに表示するようにしてみましょう。入力文字数に制限のある入力欄などで活用すると便利です。入力可能な残り文字数の表示もできます。

ガイド：西村文宏
2段階のプルダウンメニューを作る

メインのプルダウンメニューの選択項目に応じて、動的にサブのプルダウンメニューを表示させる方法をご紹介。2つのプルダウンメニューを連動させて、1つの大きなナビゲーションとして機能させることができます。

ガイド：西村文宏
未記入の入力フォームに案内画像を表示する

入力フォーム内に何も入力されていないとき、フォームの内側に案内用の画像が表示されるようにしてみましょう。入力欄にカーソルが入ったら案内画像は消えるようにします。文字だけよりも凝ったデザインにできます。

ガイド：西村文宏
他サイトでの入力履歴を出せる入力欄を作る

入力フォーム内の項目には、「名前」や「メールアドレス」など他サイトでも頻繁に入力していると思われる項目がたくさんある場合があります。他サイトでの入力履歴を利用して補完できるように作っておくと便利です。

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！