基本の入力フォームを作る方法
基本の入力フォームを作る方法を紹介します。このサンプルでは、HTMLのinput要素を使用したシンプルなテキスト入力フォームを作成します。氏名やユーザー名など、一行の文字を入力するための基本的なフォームで、Webサイトや業務システムなど幅広い場面で利用できます。
お問い合わせ画面、会員登録フォーム、ログイン画面、プロフィール編集画面、管理画面の検索フォームなど、さまざまな入力画面の基本として利用できます。入力欄をクリックすると枠線の色が変わるため、現在入力している場所が分かりやすく、シンプルで見やすいデザインになっています。
タイトル、説明文、ラベル、プレースホルダーはHTMLから変更でき、CSSでは横幅、余白、文字サイズ、背景色、枠線、角丸などを用途に合わせて調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・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="basic-input-form_wrap">
<!-- タイトル -->
<div class="basic-input-form_title">
お問い合わせ
</div>
<!-- 説明文 -->
<p class="basic-input-form_text">
一行の文字を入力できる基本的な入力フォームです。
</p>
<!-- 入力項目 -->
<div class="basic-input-form_group">
<!-- ラベル -->
<label
class="basic-input-form_label"
for="name">
お名前
</label>
<!-- テキスト入力欄 -->
<input
class="basic-input-form_input"
id="name"
name="name"
type="text"
placeholder="お名前を入力してください。">
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは一行の文字を入力できる基本的な入力フォームを作成し、CSSではフォーム全体のデザインや入力欄の見た目を設定します。お問い合わせフォームや会員登録フォームなど、さまざまな入力画面の土台として利用できるシンプルな構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダーの文章を変更できます。また、input要素を使用して一行の文字入力を行います。
style.cssはフォーム全体と入力欄のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、フォーカス時の表示などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示された入力フォームへ文字を入力すると、一行のテキストを入力できます。
カスタマイズできる内容
index.htmlでは「お問い合わせ」のタイトル、説明文、「お名前」のラベル、プレースホルダーの文章を変更できます。用途に合わせて、氏名、会社名、ユーザー名、検索キーワードなどの入力フォームへ変更できます。
style.cssではフォーム全体の横幅、背景色、余白、角丸、入力欄の高さ、文字サイズ、枠線色、フォーカス時の色や影を変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力欄との間隔が広がり、小さくすると狭くなります。
gap:10px;
ラベルと入力欄の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:14px 16px;
入力欄の内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
入力欄の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
入力欄の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:0.3s;
枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
入力欄をクリックしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小されます。また、640px以下ではpadding:24px 18px;へ変更して左右の余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント