入力禁止のテキストボックスを作る方法
入力禁止のテキストボックスを作る方法を紹介します。このサンプルでは、HTMLのdisabled属性を使用し、ユーザーが入力や編集を行えないテキストボックスを実装します。設定値や自動入力された情報を表示するだけの場合に便利で、HTMLとCSSだけで簡単に実装できます。
入力禁止のテキストボックスは、会員サイトのユーザーID表示、お問い合わせ完了画面、管理画面の変更不可項目、注文番号やシステムが自動生成した情報の表示など、編集させたくない項目によく利用されます。入力カーソルが表示されず、誤って内容を書き換えることもありません。
このサンプルでは、入力禁止状態のテキストボックスのデザインと表示方法をそのまま確認できます。背景色や文字色、枠線の色などはCSSで自由に変更できるため、実際のWebサイトや業務システムのデザインに合わせてカスタマイズしやすい構成になっています。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
会員IDはシステムで自動発行されるため、変更できません。
このテキストボックスは入力禁止状態です。クリックしても入力や編集はできません。
コードをコピーして使おう！
<!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="input-disabled-textbox_wrap">
<!-- タイトル -->
<h1 class="input-disabled-textbox_title">
会員情報
</h1>
<!-- 説明文 -->
<p class="input-disabled-textbox_text">
会員IDはシステムで自動発行されるため、変更できません。
</p>
<!-- 会員IDのラベル -->
<label
class="input-disabled-textbox_label"
for="member-id">
会員ID
</label>
<!-- 入力禁止状態のテキストボックス -->
<input
class="input-disabled-textbox_input"
id="member-id"
name="member-id"
type="text"
value="USER-20260724"
disabled>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLのdisabled属性を利用して入力できないテキストボックスを表示するシンプルなサンプルです。JavaScriptは使用せず、HTMLの属性だけで入力禁止状態を実現しています。会員IDや注文番号など、利用者に編集させたくない情報を表示するフォームを簡単に作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
タイトル、説明文、ラベル、入力禁止状態のテキストボックスを配置しています。表示する文字や初期値はこのファイルで変更できます。
style.css
テキストボックスやラベル、背景色、文字色、余白、角丸などのデザインを管理しています。入力禁止状態でも見やすいデザインへ自由に変更できます。
設置方法・使い方
sampleフォルダへ2ファイルを配置します。
ブラウザで sample/index.html を開くと利用できます。
テキストボックスは入力禁止状態になっているため、クリックしても文字の入力や編集はできません。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、表示する値を変更できます。入力禁止を解除したい場合は、disabled属性を削除するだけで通常のテキストボックスとして利用できます。
style.cssでは背景色、文字色、枠線、角丸、余白、横幅などのデザインを変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると余白が広くなり、小さくすると詰まったレイアウトになります。
padding:12px 14px;
テキストボックスの内側余白です。値を変更すると入力欄内の余白が変わります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが目立ち、小さくすると控えめな表示になります。
font-size:16px;
ラベルや入力文字のサイズです。値を変更すると読みやすさや全体の印象が変わります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、小さくすると四角いデザインになります。
border-radius:8px;
テキストボックスの角丸です。値を変更すると入力欄の形状が変わります。
レスポンシブ対応
style.cssでレスポンシブ対応しています。width:100%、max-width:700px、@media (max-width:640px)を使用し、画面幅に応じてフォームの横幅や余白を自動調整します。スマートフォン・タブレット・PCで利用できます。
コメント