最初から入力できる状態のテキストボックスを作る方法
最初から入力できる状態のテキストボックスを作る方法を紹介します。HTMLのautofocus属性を利用すると、ページを開いた直後から入力欄が選択された状態になり、ユーザーはクリックすることなくそのまま文字を入力できます。本記事ではHTMLとCSSだけを使用し、基本的なテキストボックスへ初期フォーカスを設定する方法をサンプルコード付きで解説します。
このような入力欄は、お問い合わせ画面、ログイン画面、会員サイト、管理画面、検索フォームなど、最初に入力してほしい項目が決まっている場面で便利です。ページを表示した直後から入力を始められるため、操作の手間を減らし、入力開始までの流れをスムーズにできます。サンプルではタイトルや説明文、ラベル、プレースホルダーなども用意しているため、用途に合わせて文章を書き換えるだけで利用できます。
配布用サンプルでは、ページ上部にダミーのコンテンツを配置しているため、ページを開くと入力欄まで自動でスクロールし、そのまま入力できる状態になります。実際のWebサイトで利用した場合の動作を確認しやすく、スマートフォン・タブレット・PCでも利用できます。HTMLとCSSだけで実装できるため、初心者でも導入しやすく、フォームの内容やデザインも自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くと入力欄が最初から入力できる状態になります。
テキストボックスが最初から入力できる状態で表示されます。「もう一度確認する」を押すと、フォーカス状態を再確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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-text-box_intro">
<!-- ページタイトル -->
<div class="autofocus-text-box_intro-title">
サンプルページ
</div>
<!-- ページの説明文 -->
<p class="autofocus-text-box_intro-text">
ページ上部にコンテンツがある状態を再現しています。
</p>
<!-- サンプルセクション -->
<div class="autofocus-text-box_guide">
<div class="autofocus-text-box_guide-title">
セクション1
</div>
<p class="autofocus-text-box_guide-text">
サンプルテキスト
</p>
</div>
<!-- サンプルセクション -->
<div class="autofocus-text-box_guide">
<div class="autofocus-text-box_guide-title">
セクション2
</div>
<p class="autofocus-text-box_guide-text">
サンプルテキスト
</p>
</div>
<!-- サンプルセクション -->
<div class="autofocus-text-box_guide">
<div class="autofocus-text-box_guide-title">
セクション3
</div>
<p class="autofocus-text-box_guide-text">
サンプルテキスト
</p>
</div>
</div>
<!-- テキストボックス全体 -->
<div class="autofocus-text-box_wrap">
<!-- タイトル -->
<div class="autofocus-text-box_title">
お名前を入力
</div>
<!-- 説明文 -->
<p class="autofocus-text-box_text">
ページを開くと入力欄が最初から入力できる状態になります。
</p>
<!-- ラベル -->
<label
class="autofocus-text-box_label"
for="name">
お名前
</label>
<!--
autofocus属性を付けると、
ページを開いた時点で入力できる状態になる
-->
<input
class="autofocus-text-box_input"
id="name"
name="name"
type="text"
placeholder="お名前を入力してください。"
autofocus>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではページ上部のサンプルコンテンツとテキストボックスを配置し、autofocus属性によってページを開いたときに入力欄が最初から入力できる状態になります。CSSではページ全体のレイアウトやサンプルコンテンツ、テキストボックスのデザイン、フォーカス時の見た目を設定しています。JavaScriptは使用していません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはページ全体を構成するファイルです。ページ上部のサンプルコンテンツ、テキストボックスのタイトル、説明文、ラベル、プレースホルダーを編集できます。入力欄へ設定したautofocus属性により、ページを開くとテキストボックスが自動的に入力できる状態になります。
style.cssはページ全体とテキストボックスのデザインを設定するファイルです。横幅、余白、文字サイズ、背景色、枠線、角丸、フォーカス時の枠線や影などを用途に合わせて変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと入力欄が表示される位置まで自動的にスクロールし、テキストボックスが最初から入力できる状態になります。
カスタマイズできる内容
index.htmlではページタイトル、説明文、サンプルコンテンツ、テキストボックスのタイトル、説明文、ラベル、プレースホルダーを変更できます。お問い合わせフォームや検索フォーム、ログイン画面など用途に合わせて自由に編集できます。
style.cssではページ全体の横幅、余白、背景色、文字色、枠線、角丸、入力欄のサイズ、フォーカス時の枠線色や影などを変更できます。デザインを変更してもautofocusによる自動フォーカスの動作はそのまま利用できます。
数値調整
style.css
max-width:700px;
ページ全体とテキストボックスの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto 80px;
ページ上部コンテンツの余白です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
テキストボックス全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
テキストボックス全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:28px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:14px 16px;
テキストボックスの内側余白です。上下・左右の値を変更すると入力欄の大きさや文字との余白が変わります。
border:2px solid #cbd5e1;
テキストボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 0 0 4px ...
フォーカス時に表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅へ合わせてレイアウトが調整されます。また、640px以下では余白や文字サイズを変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント