お問い合わせフォームや会員登録画面には、名前やメッセージを入力する欄が必要です。HTMLでは、1行だけ入力する欄をinputタグ、複数行を入力する欄をtextareaタグで作ります。
短い情報にはinput、長い文章にはtextareaを使うのが基本です。この記事では、入力欄の作り方から、ラベル・必須入力の設定、スマートフォンでも使いやすいCSSデザインまで初心者向けに解説します。
HTMLの入力欄はinputとtextareaを使い分ける
最初に、2種類の入力欄の違いを確認しましょう。氏名やメールアドレスのような短い情報はinput、お問い合わせ内容のような長い文章はtextareaが向いています。
inputは終了タグを持たない要素です。一方、textareaには開始タグと終了タグがあり、必ず</textarea>まで記述します。
inputタグで1行の入力欄を作る
まずは、氏名を入力するシンプルな欄を作ります。入力欄だけを置くのではなく、何を入力する場所か分かるようにlabelタグも一緒に書きます。
<label for="name">氏名</label>
<input
type="text"
id="name"
name="name"
autocomplete="name"
>type="text"は、1行の文字入力欄を作る指定です。labelのforとinputのidを同じ値にすると、「氏名」という文字をクリックしても入力欄へカーソルを移動できます。
nameは、フォームを送信したときの項目名です。見た目には表示されませんが、入力した値をサーバー側で受け取るために必要です。
autocomplete="name"を付けると、ブラウザに保存された氏名を入力候補として利用できます。入力の手間を減らせるため、項目に合う値を指定しましょう。
textareaタグで複数行の入力欄を作る
お問い合わせ内容やコメントには、複数行を入力できるtextareaを使います。基本の書き方は次のとおりです。
<label for="message">お問い合わせ内容</label>
<textarea
id="message"
name="message"
rows="6"
maxlength="1000"
></textarea>rows="6"は、最初に見える高さの目安を6行にする指定です。maxlength="1000"を付けると、入力できる文字数を最大1000文字に制限できます。
textareaの初期値はvalue属性ではなく、開始タグと終了タグの間に書きます。ただし、通常の空欄ではタグの間に空白や改行を入れず、上の例のように続けて記述してください。
入力欄を含むフォームを完成させる
ここまでの入力欄を組み合わせて、氏名・メールアドレス・お問い合わせ内容を入力できるフォームを作ります。まずは次のHTMLをindex.htmlへ追加してください。
<form class="contact-form" action="/contact/" method="post">
<div class="form-field">
<label for="name">氏名 <span class="required">必須</span></label>
<input
type="text"
id="name"
name="name"
autocomplete="name"
required
>
</div>
<div class="form-field">
<label for="email">メールアドレス <span class="required">必須</span></label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</div>
<div class="form-field">
<label for="message">お問い合わせ内容 <span class="required">必須</span></label>
<textarea
id="message"
name="message"
rows="6"
maxlength="1000"
aria-describedby="message-help"
required
></textarea>
<p id="message-help" class="help-text">1000文字以内で入力してください。</p>
</div>
<button type="submit">送信する</button>
</form>requiredを付けた項目が空のまま送信されると、ブラウザの入力チェックが働きます。メールアドレスにはtype="email"を使うため、メールアドレスの形式も確認されます。
aria-describedbyで入力欄と補足文のidを関連付けると、スクリーンリーダーにも「1000文字以内」という説明が伝わります。見た目だけでなく、操作する人へ意味が伝わるHTMLにすることが大切です。
CSSで入力欄を見やすく整える
HTMLだけでも入力できますが、初期状態では入力欄の幅や余白がそろっていません。次のCSSをstyle.cssへ追加し、フォーム全体を見やすくします。
*,
*::before,
*::after {
box-sizing: border-box;
}
.contact-form {
width: min(100%, 640px);
margin-inline: auto;
padding: 24px;
border-radius: 16px;
background: #f8fafc;
}
.form-field {
margin-block-end: 24px;
}
.form-field label {
display: block;
margin-block-end: 8px;
color: #0f172a;
font-weight: 700;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #94a3b8;
border-radius: 8px;
color: #0f172a;
background: #ffffff;
font: inherit;
}
.form-field textarea {
min-height: 160px;
resize: vertical;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
border-color: #2563eb;
outline: 3px solid #bfdbfe;
outline-offset: 2px;
}
.required {
color: #b91c1c;
font-size: 0.875rem;
}
.help-text {
margin-block: 6px 0;
color: #475569;
font-size: 0.875rem;
}
.contact-form button {
min-height: 44px;
padding: 10px 24px;
border: 0;
border-radius: 8px;
color: #ffffff;
background: #1d4ed8;
font: inherit;
font-weight: 700;
cursor: pointer;
}width: 100%で入力欄を親要素の幅に合わせ、box-sizing: border-boxで余白と枠線を幅の内側に含めます。これにより、スマートフォンでも入力欄が画面からはみ出しにくくなります。
:focus-visibleは、キーボードなどで選択中の入力欄を分かりやすくする指定です。outline: noneだけで枠を消すと現在地が分からなくなるため、必ず代わりのフォーカス表示を用意してください。
用途に合うinputのtypeを選ぶ
inputは、typeの値によって入力欄の用途が変わります。スマートフォンでは用途に合うキーボードが表示されやすくなるため、すべてをtype="text"にせず使い分けましょう。
text：氏名、会社名、検索キーワードemail：メールアドレスtel：電話番号url：WebサイトのURLpassword：画面上で文字を隠すパスワード
たとえば電話番号にはtype="tel"、メールアドレスにはtype="email"を指定します。ただし、HTMLの入力チェックだけに頼らず、実際にデータを保存・送信するWebサイトではサーバー側でも内容を確認してください。
placeholderはラベルの代わりにしない
placeholderを使うと、入力前の欄へ記入例を薄く表示できます。たとえば、メールアドレスの形式を示す場合は次のように書きます。
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
placeholder="example@example.com"
>placeholderは入力を始めると消えるため、「氏名」「メールアドレス」などの項目名には向きません。項目名は常に見えるlabelで示し、placeholderは補助的な入力例に使います。
入力欄のデザイン例
基本形を理解したら、サイトの雰囲気に合わせて枠線や角の形を調整できます。HTMLは変えず、クラスを追加してCSSだけを切り替えると管理しやすくなります。
角を大きく丸める
.input-rounded {
padding: 14px 18px;
border: 1px solid #93c5fd;
border-radius: 999px;
}検索欄など、高さが1行に決まっている入力欄に向いています。複数行のtextareaへ999pxを指定すると形が不自然になりやすいため、8〜16px程度にします。
選択中の枠線を強調する
.input-accent {
border: 2px solid #cbd5e1;
border-radius: 10px;
}
.input-accent:focus-visible {
border-color: #0f766e;
outline: 3px solid #ccfbf1;
}通常時と選択中で色を変えると、どの欄を入力しているか判断しやすくなります。色だけでなく太さや外側の線も変えて、違いを分かりやすくしています。
下線だけの入力欄にする
.input-underline {
padding: 12px 4px;
border: 0;
border-bottom: 2px solid #94a3b8;
border-radius: 0;
background: transparent;
}
.input-underline:focus-visible {
border-bottom-color: #2563eb;
outline: 3px solid #dbeafe;
outline-offset: 2px;
}下線だけのデザインはすっきり見えますが、入力できる範囲が分かりにくいことがあります。背景とのコントラストを確保し、ラベルを入力欄のすぐ近くへ置いてください。
入力欄がうまく表示されないときの確認点
- textareaが表示されない：
</textarea>の終了タグがあるか確認します。 - ラベルを押しても選択できない：
labelのforと入力欄のidを同じ値にします。 - 入力欄が画面からはみ出す：
width: 100%とbox-sizing: border-boxを指定します。 - 送信しても項目名が分からない：
inputとtextareaへnameを付けます。 - 入力中の欄が分からない：
:focus-visibleの枠線を消していないか確認します。
HTMLを修正したらファイルを保存し、ブラウザを再読み込みします。開発者ツールで要素を選択すると、CSSが適用されているかも確認できます。
まとめ
1行の入力欄はinput、複数行の入力欄はtextareaで作ります。どちらにも目に見えるlabelを付け、idとforで関連付けることが基本です。
まずは氏名とお問い合わせ内容の2項目を作り、ブラウザで表示を確認してみてください。その後にrequired、用途に合うtype、CSSのフォーカス表示を追加すると、分かりやすく操作しやすい入力フォームになります。