ページを開くと自動選択されるテキストボックスを作る方法
ページを開くと自動的にカーソルが表示されるテキストボックスをHTMLとCSSで作る方法を紹介します。このサンプルではHTMLのautofocus属性を使用し、ページの表示直後に指定したテキストボックスへ自動でフォーカスを移動します。利用者は入力欄をクリックすることなく、そのまま文字を入力できます。
自動フォーカスは、ログイン画面のユーザー名入力、お問い合わせフォームのお名前入力、サイト内検索フォームなど、最初に入力してほしい項目が決まっている画面でよく利用されます。入力までの操作を減らせるため、フォームの使いやすさを向上させることができます。
このサンプルでは3つのテキストボックスを配置し、最初のお名前だけが自動で選択される動作を確認できます。デモではページを再読み込みして何度でも確認でき、配布用コードではautofocus属性だけでシンプルに実装しています。スマートフォン・タブレット・PCで利用できる構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くと「お名前」のテキストボックスへ自動でカーソルが表示されます。
ページを再読み込みすると、お名前のテキストボックスへ自動でフォーカスされる動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ページを開くと自動選択されるテキストボックス</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- フォーム全体 -->
<div class="autofocus-textbox_wrap">
<!-- タイトル -->
<h1 class="autofocus-textbox_title">
会員登録フォーム
</h1>
<!-- 説明文 -->
<p class="autofocus-textbox_text">
ページを開くと「お名前」のテキストボックスへ自動でカーソルが表示されます。
</p>
<!-- お名前 -->
<div class="autofocus-textbox_group">
<label
class="autofocus-textbox_label"
for="name">
お名前
</label>
<input
class="autofocus-textbox_input"
id="name"
name="name"
type="text"
autofocus>
</div>
<!-- メールアドレス -->
<div class="autofocus-textbox_group">
<label
class="autofocus-textbox_label"
for="email">
メールアドレス
</label>
<input
class="autofocus-textbox_input"
id="email"
name="email"
type="email">
</div>
<!-- 電話番号 -->
<div class="autofocus-textbox_group">
<label
class="autofocus-textbox_label"
for="tel">
電話番号
</label>
<input
class="autofocus-textbox_input"
id="tel"
name="tel"
type="tel">
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルだけで構成された、自動フォーカス機能付きテキストボックスです。HTMLのautofocus属性を使用することで、ページを開いた直後に指定したテキストボックスへ自動でカーソルを表示できます。JavaScriptは不要なため、シンプルな構成で導入できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
フォーム全体、ラベル、テキストボックスを配置します。自動フォーカスしたい入力欄へautofocus属性を付けることで、ページ表示時に自動でカーソルが表示されます。タイトルや説明文、ラベル名もこのファイルで変更できます。
style.css
フォーム全体のデザインを設定します。背景色、文字色、余白、枠線、角丸、文字サイズなどを変更でき、入力欄のフォーカス時の枠線色も管理しています。
設置方法・使い方
sampleフォルダへ2ファイルを配置します。
ブラウザでsample/index.htmlを開くと利用できます。
ページが表示されると、自動で指定したテキストボックスへカーソルが表示され、そのまま文字入力を開始できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、入力欄の数、自動フォーカスする入力欄を変更できます。
style.cssでは横幅、背景色、文字色、枠線、角丸、余白、文字サイズ、フォーカス時の色などを自由に変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を変更すると余白が広くなります。
margin-bottom:20px;
入力欄同士の間隔です。値を大きくすると上下の間隔が広くなります。
padding:12px 14px;
テキストボックス内側の余白です。値を変更すると文字と枠線の間隔が変わります。
font-size:22px;
タイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:16px;
説明文、ラベル、入力欄の文字サイズです。値を変更すると表示サイズが変わります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなります。
border-radius:8px;
テキストボックスの角丸です。値を変更すると見た目が変わります。
transition:border-color .3s ease;
フォーカス時の枠線色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
style.cssではwidth:100%とmax-width:700pxを使用し、画面幅に応じてフォーム全体が自動で縮小されます。また、@media (max-width:640px)で余白を調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント