HTMLで入力フォームを作成する方法（サンプルコード付き）

こんにちは！
最近、WEB制作をはじめたけど「入力フォームって何・・？」「入力フォームってどうやって作成するの・・？」「基本的な入力フォームをコピペで表示し、CSSで装飾したい・・！」
そのように悩んでいる初心者の方も多いのではないでしょうか？
入力フォームの作成方法は、HTMLでも難易度が高く難しく感じてしまうかもしれません。
しかし、ほとんどのwebページで入力フォームがあり、避けては通れない項目です。
今回は、「入力フォームとは？」「入力フォームの作成方法」「様々な入力フォームの紹介」「基本的な入力フォームをCSSで装飾」を中心に詳しく解説していきます。

入力フォームとは？

入力フォームとは下記のようなものです。

入力フォーム↓

ホームページなどで見たことあるのではないでしょうか？
ユーザーに項目を入力、送信してもらう事で製作者側に情報が送られます。
ほとんどのwebサイトで入力フォームが使われていますので、学習する事で制作の幅が広がるでしょう。

HTMLではフォームの表示とデザインの2点を作成します。

情報が送信され、製作者側で保存するなどの処理の仕組みは「PHPなどのプログラミング言語」の役割になります。
今回は初心者web制作者向けの為、HTMLで作成できる「フォームの表示」「デザインの調整」の解説となります。

入力フォームの作成方法

基本的な入力ホームの作成方法

基本的な入力フォームを下記に表示します。
ここから表示・タグの説明・機能の解説していきます。
サンプルコード表示結果

入力フォーム↓

HTMLサンプルコード

<form>
  <div class="example">
    <label for="namelabel">名前</label>
    <input type="text" name="name" id="namelabel" placeholder="例）鈴木　太郎">
  </div>
  <div class="example">
    <label for="maillabel">メールアドレス</label>
    <input class="inputs" type="email" name="email" id="maillabel" placeholder="○○○.jp">
  </div>
   <div class="example">
    <label for="ikenlabel">ご意見</label>
    <textarea id="iken"></textarea>
  </div>
  <div class="example">
    <input type="submit" value="送信する">
  </div>  
</form>

<form>

</div>

<label for="maillabel">メールアドレス</label>

</div>

</div>

</div>

</form>

CSSサンプルコード

@charset "UTF-8";
 
form {
     width: 250px;
     border: solid 1px black;
 }

label {
    display: block;
   }

.example{
    text-align: center;
}

@charset "UTF-8";

form {

width: 250px;

border: solid 1px black;

}

label {

display: block;

}

.example{

text-align: center;

}

※まずは基本的なタグの説明からします。

○formタグ

フォームを作るにはHTMLの「formタグ」を使います。（HTMLサンプルコード1行目）＜form＞〜＜/form＞タグの中に入力フォームの内容を記載していきます。

○inputタグ

inputタグでテキストフィールドを作成します。テキストフィールドとは、サンプルコード表示結果1行目の文章などを入力する為フォームです。 inputでは、「type=”○○”」〇〇の中に表示したいテキストフィールドの種類を指定します。
サンプルコード表示結果、1行目は「テキスト」を表示したいので「text」を指定しました。
2行目は「mailテキスト」を表示したいので「mail」を指定しました。
type属性を指定する事で様々な種類のテキストフィールドを表示する事ができます、種類が多くありますので、後ほど詳しく解説していきます。

○nameタグ

nameタグは、「このinputフィールドが何を表しているのか」をわかりやすくするためのものです。
今回の例で説明すると、1項目は名前を入力するフィールドです、「name=”name”」と指定する事で、このフィールドは「名前を入力する」ということがわかりやすくなります。2行目はメールを送るので「name=”mail”」と指定しメールを送るフィールドとわかりやすくしました。

○labelタグ

labelタグを使用する事で、項目とフィールドを連携させる事ができます。
下記にラベルありなしの項目を用意しました。
「名前ラベルなし」「名前ラベルあり」をクリックしてみて下さい。
　　　　　　　　　　　　

ラベルなし↓

名前ラベルなし

ラベルあり↓

名前ラベルあり

ラベルなしでは、「名前ラベルなしと書かれたテキスト」をクリックしても選択状態になりませんが、「名前ラベルあり」では選択状態になります。
ラベルと連動させる事でクリック範囲が広がり、ユーザーの使いやすさにつながりますので、labelフォームと連動させるようにしましょう。
連動させるには、「labelにfor=”〇〇”」「inputにid=”〇〇”」〇〇に同じアルファベットを記入し連動させます、今回は「label for=”namelabel”」「input id=”namelabel”」で連動させてます。

HTMLサンプルコード

<div class="example">
    <label for="namelabel">名前ラベルあり</label>
    <input type="text" name="name" id="namelabel">
</div>

<label for="namelabel">名前ラベルあり</label>

</div>

○textarea

＜textarea＞〜＜/textarea＞タグでテキストエリアを表示します。
テキストエリアは改行を行ってくれるので、質問事項などの長文の可能性がある情報を送信してもらう際に使用します。

○input type=”submit”でボタン

type属性を、「type=”submit”」と指定する事で送信ボタンを作成できます、またボタンに文字を入れたい場合はvalue属性に表示したい文字を「value=”〇〇”」の〇〇に入力します、今回の例では、「送信」と指定しました。

○placeholder属性

placeholder属性で入力例を表示します。
テキストフィールドに、最初から薄いグレーの文字が表示されているフォームがあると思います（今回は、名前のメールアドレス）。placeholder属性で記入例などを記載し、ユーザーにどのように記入すれば良いのかを示しわかりやすくしています。

○CSSでラベルをテキストの上におく

label属性をブロック要素にして項目の上に重ねます。

label {
 display: block;
}

label {

display: block;

}

もしlabel属性をブロック要素しないと下記の様な見た目になってしまいます。
理由は、＜label＞＜input＞属性は、インライン要素であるため、横並びになります、したがって意図的にブロック要素にし、＜label＞を上に表示しています。

labelをブロック要素にしない場合↓

上記の様にラベルが左隣にあっても、全体のCSSを整えて見やすくする事ができますが、基本辺の例では、labelを項目の上におき進めます。CSSの調整はのち程解説します。

ここまでが基本で、次はその他のtype属性について詳しく解説します。
基本で触れたtype属性は、
1.「type=”text”」でテキストフィールド表示
2.「type=”email”」でメールテキストフィールド表示
3.「type=”submit”」でボタンを表示
の３点を紹介しました。

様々な種類のtype属性

ラジオボタン

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<form>
<label for="redlabel">
   <input type="radio" name="color" value="red" id="redlabel">
   赤
 </label>
 <label for="bluelabel">
   <input type="radio" name="color" value="blue" id="redlabel">
   青
 </label>
 <label for="yellowlabel">
   <input type="radio" name="color" value="yellow" id="yellowlabel">
   黄
 </label>
</form>

<form>

赤

</label>

青

</label>

黄

</label>

</form>

※解説
「type=”radio”」でラジオボタンを表示する事ができます。
ラジオボタンの特徴としては、複数選択肢の中から「1つを選択してもらいたい場合」に使用します。これに対してチェックボックスは、複数選択の中から「複数選択可」の時に使用します。

チェックボックス

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

<form>
  <label for="redlabel">
    <input type="checkbox" name="color" value="red" id="redlabel">
    赤
  </label>
  <label for="bluelabel">
    <input type="checkbox" name="color" value="blue" id="redlabel">
    青
  </label>
  <label for="yellowlabel">
    <input type="checkbox" name="color" value="yellow" id="yellowlabel">
    黄
  </label>
</form>

<form>

赤

</label>

青

</label>

黄

</label>

</form>

※解説
「type=”checkbox”」でチェックボックスを表示する事ができます。
チェックボックスの特徴としては複数選択の中から「複数選択可」の時に使います、これに対してラジオボタンは、複数選択肢の中から「1つを選択してもらいたい場合」に使用します。

ファイルのアップロード

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form>
<input type="file" name="sample" accept="image/jpeg, image/png, image/gif" multiple>
</form>

<form>

</form>

※解説
「type=”file”」で画像などのファイルのアップロードボタンを設置する事ができます。mulitiple属性を指定すると、複数ファイル選択可能になります。
accept属性では選択可能なファイルの形式を指定します。

range（スライダー入力）

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form>
小
<input type="range" name="slider" min="1" max="10">
 大
</form>

<form>

<input type="search" list="list">
 
<datalist id="list">
 <option value="red">
 <option value="blue">
 <option value="yellow">
 <option value="green">
</datalist>
 
<input type="submit" value="検索">

</datalist>

※解説
「type=”search”」で検索入力フォームを作り「list属性」と「datalist」を組み合わせることで、入力項目の候補を表示する事ができます。

リセットボタン

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form>
 <label for="labelname">お名前：<input type="text" name="name" id="labelname"></label>
 <label for="labelmail">メール：<input type="mail" name="name" id="labelmail"></label>
 <input type="reset" value="リセットする">
</form>

<form>

</form>

CSSサンプルコード

label {
    display: block;
}

label {

display: block;

}

※解説
「type=”reset”」でリセットボタンを作成する事ができます。
ボタンを押すと入力された全ての内容がリセットされます。

色の入力

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<form>
<label>色を選択
 <input type="color" name="sample_color">
</label>
</form>

<form>

<label>色を選択

</label>

</form>

※解説
「type=”color”」でカラーピッカーから色を選択できる入力欄を作成できます。

表示しないデータ

※ユーザに表示されません

HTMLサンプルコード

<form>
 <label>
   <input type="hidden" value="隠しデータ">
 </label>
</form>

<form>

<label>

</label>

</form>

※解説
「hidden」は隠しデータなので、ブラウザに表示されません。
主にユーザーは知る必要はないけど、サーバーに送る情報がある時に使用します。

上記で紹介したtype属性を、お好みに合わせてフォームタグに追加していくことでフォームを作成する事ができます。

フォーム作成＋CSSでデザインを整える

ここからは、これまで紹介した様々なtype属性、cssでのデザインの調整を踏まえて、基本的な入力フォームの紹介していきます。

基本的な入力フォーム

サンプルコード表記結果

HTMLサンプルコード

<form>
    <p class="label-title">お問い合わせフォーム</p>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>氏名</p>
     <input type="text" class="form-input" placeholder="例）鈴木一郎">
   </div>
   <div class="form-radio">
     <p class="form-label"><span class="form-require">必須</span>ご職業</p>
     <div class="radio-label">
     　<label>
       <input type="radio" name="job" value="officeworker">
       会社員
     </label>
     <label>
       <input type="radio" name="job" value="student">
       学生
     </label>
     <label>
       <input type="radio" name="job" value="housewife">
       主婦
     </label>
     <label for="sonota">
       <input type="radio" name="job" value="other">
       その他
     </label>
    </div>
   </div>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>電話番号</p>
     <input type="text" class="form-input" placeholder="例）123-4567-8910">
   </div>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>メールアドレス</p>
     <input type="email" class="form-input" placeholder="例）sample@gmail.com">
   </div>
   <div class="form-sample">
     <p class="form-label last"><span class="form-require">必須</span>お問い合わせ内容</p>
     <textarea class="form-textarea"></textarea>
   </div>
   <input type="submit" class="form-Btn" value="送信する">
 </form>
 
</form>

<form>

<p class="label-title">お問い合わせフォーム</p>

</div>

　<label>

会社員

</label>

<label>

学生

</label>

<label>

主婦

</label>

その他

</label>

</div>

</div>

<p class="form-label"><span class="form-require">必須</span>メールアドレス</p>

</div>

<p class="form-label last"><span class="form-require">必須</span>お問い合わせ内容</p>

</div>

</form>

CSSサンプルコード

.label-title {
 font-size: 40px;
 text-align: center;
 border: solid 3px  #340beb;
  border-radius: 6px;
  background:  #340beb;
  color: #fff;
}
 
 
 
form {
 margin-left: auto;
 margin-right: auto;
 max-width: 720px;
 }
 
 
.radioinput {
 text-align: center;
 }
 
 
.form-sample {
 width: 100%;
 display: flex;
 align-items: center;
 padding-left: 14px;
 padding-right: 14px;
 padding-bottom: 15px;
}
 
.form-radio {
 display: flex;
 width: 100%;
 display: flex;
 align-items: center;
 padding-left: 14px;
 padding-right: 14px;
 padding-bottom: 15px;
 }
 
 
 
.radio-label {
 width: 100%;
 max-width: 500px;
 margin-left: 20px;
font-size: 18px;
}
 
 
.form-label {
 width: 100%;
 max-width: 248px;
 font-weight: bold;
 font-size: 19px;
}
 
.form-label.last {
 margin-top: 10px;
 margin-bottom: auto;
}
 
.form-require {
 border-radius: 5px;
 margin-right: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 55px;
 display: inline-block;
 text-align: center;
 background: #340beb;
 color: #fff;
 font-size: 15px;
}
 
.form-input {
 border: 1px solid gray;
 border-radius: 5px;
 margin-left: 40px;
 padding-left: 10px;
 height: 50px;
 width: 100%;
 max-width: 410px;
 font-size: 18px;
}
 
.form-textarea {
 border: 1px solid gray;
 border-radius: 6px;
 margin-left: 40px;
 padding-left: 1em;
 padding-right: 1em;
 height: 216px;
 flex: 1;
 width: 100%;
 max-width: 410px;
 font-size: 18px;
}
 
.form-Btn {
 border-radius: 6px;
 margin-top: 32px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 20px;
 padding-bottom: 20px;
 width: 280px;
 display: block;
 letter-spacing: 0.05em;
 background: #340beb;
 color: #fff;
 font-weight: bold;
 font-size: 20px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

.label-title {

font-size: 40px;

text-align: center;

border: solid 3px #340beb;

border-radius: 6px;

background: #340beb;

color: #fff;

}

form {

margin-left: auto;

margin-right: auto;

max-width: 720px;

}

.radioinput {

text-align: center;

}

.form-sample {

width: 100%;

display: flex;

align-items: center;

padding-left: 14px;

padding-right: 14px;

padding-bottom: 15px;

}

.form-radio {

display: flex;

width: 100%;

display: flex;

align-items: center;

padding-left: 14px;

padding-right: 14px;

padding-bottom: 15px;

}

.radio-label {

width: 100%;

max-width: 500px;

margin-left: 20px;

font-size: 18px;

}

.form-label {

width: 100%;

max-width: 248px;

font-weight: bold;

font-size: 19px;

}

.form-label.last {

margin-top: 10px;

margin-bottom: auto;

}

.form-require {

border-radius: 5px;

margin-right: 10px;

padding-top: 10px;

padding-bottom: 10px;

width: 55px;

display: inline-block;

text-align: center;

background: #340beb;

color: #fff;

font-size: 15px;

}

.form-input {

border: 1px solid gray;

border-radius: 5px;

margin-left: 40px;

padding-left: 10px;

height: 50px;

width: 100%;

max-width: 410px;

font-size: 18px;

}

.form-textarea {

border: 1px solid gray;

border-radius: 6px;

margin-left: 40px;

padding-left: 1em;

padding-right: 1em;

height: 216px;

flex: 1;

width: 100%;

max-width: 410px;

font-size: 18px;

}

.form-Btn {

border-radius: 6px;

margin-top: 32px;

margin-left: auto;

margin-right: auto;

padding-top: 20px;

padding-bottom: 20px;

width: 280px;

display: block;

letter-spacing: 0.05em;

background: #340beb;

color: #fff;

font-weight: bold;

font-size: 20px;

}

※解説
このままコピペでお好みに合わせて変更する事ができますが、ポイントを解説していきます。

[HTML]ポイント
①お問い合わせフォームは、＜form＞〜＜/form＞の中に記載します。

②2行目にタイトルをつけました、タイトルを作成することにより、このフォームは「お問い合わせフォームなのか」「予約フォームなのか」なんのフォームなのかをユーザーにわかりやすくする事ができます。

③type属性を確認していきます。
表示結果、1行目は「氏名」を入力するテキストを作成しているので→「type=”text”」2行目は「職業」を入力するラジオボタンを作成しているので→「type=”radio”」3行目は「電話番号」を入力するテキストを作成しているので→「type=”number”」4行目は「メールアドレス」を入力するテキストを作成しているので→「type=”mail”　」5行目は「お問い合わせ内容」を入力するテキストエリアを作成しているので→type属性ではなく＜textarea＞〜＜/textarea＞属性で表示します。

④フォームに「送信ボタン」はつきもの。「type=”submit”」でボタンを作成し、「value=”〇〇”」の〇〇にボタンに表示したい文字を記入

[CSSポイント]
①「.label-titleクラス」でフォームタイトルを装飾しています。
タイトルのfont-size,colorなどはこちらから変更して下さい。

②「.form-radioクラス」にdisplay: flexを指定し、子要素の「.form-labelクラス」「.radio-label」を横並びにする事で「必須・氏名・テキストフィールド」を横並びにしています。

③pタグの中に、spanタグを入れ「必須マーク」を作成しています。

④「.form-inputクラス」でテキストフィールドの大きさ枠線を指定しています。border: 1px solid gray；の指定によりテキストフィールドに枠線を表示する事ができ、よりわかりやすいフォームにする事ができます。

まとめ

今回は「入力フォームとは？」「入力フォームの作成方法」「様々な入力フォームの紹介」「基本的な入力フォームをCSSで装飾」について解説していきました。
それでは、最後にポイントをまとめます。

1.フォームを作成するには、formタグを使用し、＜form＞〜＜/form＞の間に記述する。

2.labelのfor属性とinputのid属性を連動させ項目とフォームを連動させる。

3.inputのtype属性を変更する事で様々なタイプのテキストフィールドを表示させる事ができる。
「type=”text”」→テキストフィールド
「type=”radio”」→ラジオボタン
「type=”checkbox”」→チェックボックス
「type=”file”」→ファイルアップロード
「type=”range”」→レンジ入力
「type=”number”」→半角数字入力
「type=”url”」→url入力
「type=”password”」→パスワード入力
「type=”tel”」→電話番号入力
「type=”date”」→日付入力
「type=”time”」→時刻入力
「type=”search”」→検索入力
「type=”reset”」→リセットボタン
「type=”color”」→色の入力
「type=”hidden”」→隠しデータ

フォームの作成はHTMLの中でも難易度が高いので、難しく感じたかもしれません、しかし基本の形と型は決まっているので、当てはめてCSSで装飾し、繰り返し実装する事で身についていきます。