基本のテキストボックスを作る方法
HTMLとCSSを使って、基本のテキストボックスを作る方法を紹介します。ラベルと1行入力用のinput要素を組み合わせ、お名前などの短い文章を入力できるシンプルなフォームを作成します。JavaScriptや外部ライブラリは使用せず、HTMLで入力欄の構造を作り、CSSで横幅・枠線・角丸・文字サイズ・余白を整える構成です。
テキストボックスは、お問い合わせ画面の氏名入力、会員サイトのユーザー名入力、ECサイトの注文者情報、管理画面の検索条件やデータ編集など、さまざまな入力フォームで使用されます。ラベルと入力欄を関連付けることで、何を入力する場所なのかが分かりやすくなり、パソコンだけでなくスマートフォンでも操作しやすいフォームを作れます。
サンプルコードはHTMLとCSSの2ファイルだけで動作するため、初心者でも導入しやすく、そのままコピーして利用できます。入力欄の名称や送信時に使用するname属性はHTMLから変更でき、横幅・高さ・背景色・枠線・角丸・文字サイズなどの見た目はCSSから調整できます。基本構造を確認しながら、実際のWebサイトに必要な入力内容へ書き換えて利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ラベルの下に表示されたテキストボックスへ、1行の文字を入力できます。
「お名前」の入力欄をクリックし、文字を入力できる基本のテキストボックスです。
コードをコピーして使おう！
<!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="basic-text-box_wrap">
<!-- 入力エリアのタイトル -->
<div class="basic-text-box_title">
お名前を入力
</div>
<!-- 入力方法を案内する説明文 -->
<p class="basic-text-box_text">
ラベルの下に表示されたテキストボックスへ、1行の文字を入力できます。
</p>
<!-- テキストボックスのラベル -->
<label
class="basic-text-box_label"
for="basic-text-box-name">
お名前
</label>
<!-- 1行の文字を入力するテキストボックス -->
<input
class="basic-text-box_input"
id="basic-text-box-name"
name="name"
type="text">
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでテキストボックスやラベルなどの入力フォームを作成し、CSSでレイアウトや色、余白、文字サイズなどの見た目を整えています。JavaScriptを使用しないため、そのままブラウザで表示できるシンプルな構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html はテキストボックスやラベルなどの入力フォームを配置するファイルです。入力項目名やラベルの文字、name属性などを変更できます。
style.css は入力フォーム全体のデザインを設定するファイルです。横幅・余白・文字サイズ・背景色・枠線・角丸・フォーカス時の色などを自由に変更できます。
設置方法・使い方
sampleフォルダへ index.html と style.css を配置し、index.html をブラウザで開くだけで利用できます。特別なライブラリやサーバー環境は必要ありません。
カスタマイズできる内容
index.html ではタイトル・説明文・ラベル・入力欄の属性を変更できます。style.css では入力欄の横幅・高さ・背景色・文字サイズ・枠線・角丸・余白・フォーカス時のデザインなどを自由に調整できます。
数値調整
style.css の max-width:700px; を変更するとフォーム全体の最大横幅が変わります。
padding:14px 16px; を変更すると入力欄の高さや左右の余白が変わります。上下の値を大きくすると入力欄が高くなります。
border-radius:10px; を変更すると入力欄の角丸の大きさが変わります。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px; を変更すると入力文字の大きさが変わります。
outline:3px solid ... の 3px を変更すると、入力欄をクリックしたときに表示される外枠の太さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width により画面幅に合わせて縮小表示されます。また、640px以下では media query を使用して余白や文字サイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。
コメント