1. TOP
  2. html&CSS入門
  3. htmlとcssを使ってフォームを作ろう!

htmlとcssを使ってフォームを作ろう!

フォームとは

フォームとは、ユーザーが情報を入力送信するために使われているもので、あらゆるサイトで利用されています。例えば、ショッピングサイトで買い物するときや、gogleにログインする際などに使われているのもフォームです。

Image

gooleのログイン画面の例

個人的なサイトやブログであっても、お問い合わせフォームを設置するのは常識のようになってきました。

1から自分でフォームを作るというのは、なかなかハードルが高く難しいですが、見た目のカスタマイズなどは必要になってくるでしょう。

この記事では、フォームのマークアップと見た目のカスタマイズについて学習していきます。

フォームの仕組み

フォームの仕組みには大きく分けて「フォームの表示」と「データのやりとり」があります。

「フォームの表示」はHTMLとCSSを使って、項目を増やしたり見た目を整えて、フォームを表示するための仕組みです。

「データのやりとり」は、入力された内容をサーバー側に送り、データを登録したり更新したりします。これらの処理は、サーバ側のプログラムであるphpなどを使って処理を作る必要があります。

この記事ではHTML、CSSの習得をテーマにしているので、「データのやりとり」の部分までは触れず、「フォームの表示」についてのみ解説しています。

フォームを作ってみよう

まずは簡単なフォームを作ってみましょう

フォームには少なくともformタグと、入力欄、送信ボタンなどが必要です。まずは実際に簡単なフォームを出力してみましょう。

<form action="#" method="post">
  <input type="text"><br>
  <input type="submit" value="送信"><br>
</form>


非常に簡単ではありますが、フォームが出力されましたね。シンプルですが、送信ボタンと入力項目が一つでもあれば、それをfomタグでくくることでデータを送ることが可能となります。

解説していきます。

formタグで囲う

フォームをつくるにはhtmlのformタグを使います。そしてformタグのなかに、inputタグを使って、入力項目やボタンを配置してきます。

formタグのaction属性を設定する

action属性は、フオームの入力情報を送信するプログラム(phpなど)のURLを書きます。

これが正常に設定されていないと、フォームのデータが送信されないので注意が必要です。

まだ、送付先が決まってない場合は”#”を設定します。

formタグのmethod属性を設定する

method属性はデータの送信方法を指定します。

method属性の値は、getpostがありますが、どちらを選ぶかはphp側での処理を把握しなければ理解しづらい概念ですので、今はあまり気にする必要ありません。

基本的にpostを使うと覚えておく程度に認識しておきましょう。

input要素で、いろんな入力項目を準備しよう

入力項目を用意するには inputタグを使います。

<input type="タイプの種類">

タイプの種類にはテキストエリアの場合は”text”、送信ボタンの場合は”submit”など対応するキーワードを指定して使います。

代表的な種類は以下のようなものが準備されています。

inputの種類

  • text
    1行のテキストを入力するエリア
  • email
    emailアドレスを入力するエリア
    @マークを忘れるとエラーメッセージを表示
  • password
    パスワードを入力するエリア
    入力値は、「***」と隠して表示される
  • number
    数値を入力するエリア
    数値以外入力を受け付けない
  • radio
    ラジオボタンを表示
    複数の選択肢から一つだけを選択できる
  • checkbox
    チェックボックスを表示
    選択肢の中から複数選択できる
  • submit
    送信ボタンを表示
  • reset
    入力内容をリセットするボタンを表示

実際に一つずつ使ってみていきましょう。

必要に応じて属性も指定しよう

実例に入る前に、知っておくと便利なのでinputの属性について触れておきます。

各インプットには属性を指定することが出来ます。

省略することも可能ですが、使いこなせば非常に便利なフォームを作成することが出来ます。

ここにタイトルinputの属性

  • name属性
    データを送信した先で項目を区別するための名前です。区別できるように他のnameと重複してはいけません。
  • value属性
    項目の初期値として使われます。value=”テスト”とすると、入力する前から”テストと入力された状態になります。
  • placeholder属性
    設定した文字列が、入力欄にうすく表示されます。「このように入力してください」のように入力例として使われることが多いです。
  • require属性
    必ず入力して欲しい項目に「required」と指定します。これが設定されている項目が空欄だと注意が出力されます。
  • maxlength
    最大文字数を指定します。例えばmaxlength=”10″なら10文字より多い文字は入力できなくなります。

例をみてみましょう。

 <form action="#" method="post">
   <input type="text" placeholder="テキストを入力" maxlength="10" required><br>
   <input type="submit" value="送信"><br>
 </form>


テキストフィールドに属性として以下を設定しています。

  • placeholder=”テキストを入力”
  • maxlength=”10″
  • required

薄い文字で「テキストを入力」と出力されていて、入力し始めると薄い文字は消えます。このようにplaceholderは、場所を取らずユーザーにアクションを促すことができます。

また、10文字までしか入力することができず、空白のまま送信ボタンを押すとエラーが出るようになっていますね。

このように属性を使えば簡単にフォームをカスタマイズすることができます。

テキストフィールド

一行程度のテキストが入力できるエリアを表示します。typeにはtextを設定します。

<form action="#" method="post">
   <input type="text" placeholder="テキストを入力" maxlength="10" required><br>
   <input type="submit" value="送信"><br>
</form>


emailアドレス

emailアドレスを入力するためのエリアを表示します。

@がない場合など、メルアドの形式でないものはエラーを出力してくれます。

<form action="#" method="post">
    <input type="email" placeholder="emailを入力" required><br>
    <input type="submit" value="送信"><br>
</form>


パスワード

パスワードを入力するエリアです。

入力した文字は伏字になるため、周りから読み取られることがありません。

 <form action="#" method="post">
     <input type="password" placeholder="パスワードを入力" required><br>
     <input type="submit" value="送信"><br>
 </form>


数字

type=”number”を使えば、数字の入力に限定することができます。

 <form action="#" method="post">
    <input type="number" placeholder="数字を入力" required><br>
    <input type="submit" value="送信"><br>
</form>


ラジオボタン

ラジオボタンは複数の選択肢から、一つだけを選択してもらうための要素です。

 <form action="#" method="post">
   <p>好きな色は?</p>
   <input id="radio-a" type="radio" name="color" value="黄色" checked>黄色<br>
   <input id="radio-b" type="radio" name="color" value="赤">赤<br>
   <input id="radio-c" type="radio" name="color" value="青">青<br>
   <input type="submit" value="送信"><br>
 </form>

好きな色は?

黄色



例のようにチェックを入れて送信をする事ができます。二つ以上選ぶことはできないので、一つだけ選んでもらいたい場所で使うと便利です。

今回は3つのラジオボタンを一つのグループとして表示していますが、グループ化したいラジオボタンはname属性を同じ値にする必要があります。ラジオボタンはこのグループの中で1つだけ選択できる状態になります。

ラジオボタンはデータが送信される際、name属性とvalue属性の値がセットになって送信されるので、両方設定するようにしましょう。

デフォルトで選択状態にしたい要素があれば、checked属性を加えます。

チェックボックス

チェックボックスは、複数の選択肢から、1つ以上選択してもらうための要素です。

<form action="#" method="post">
   <p>好きな色は?</p>
   <input id="check-a" type="checkbox" name="color" value="黄色" checked>黄色<br>
   <input id="check-b" type="checkbox" name="color" value="赤">赤<br>
   <input id="check-c" type="checkbox" name="color" value="青">青<br>
   <input type="submit" value="送信"><br>
</form>

好きな色は?

黄色



このようにチェックボックスが表示され、幾つでも選択できるようになります。ラジオボタンと似ていますが、大きな違いはラジオボタンは一つしか選べないのに対し、チェックボックスは複数選択が可能な点です。

今回は3つのチェックボックスを一つのグループとして表示していますが、グループ化したいチェックボックスはname属性を同じ値にする必要があります。

チェックボックスはデータが送信される際、name属性とvalue属性の値がセットになって送信されるので、両方設定するようにしましょう。

デフォルトで選択状態にしたい要素があれば、checked属性を加えます。

送信ボタンやリセットボタンの設定

フォームには入力項目を配置しただけでは、データの送信が行われません。必ず、送信ボタンが必要になります。

<form action="#" method="post">
     <input type="number" placeholder="数字を入力" required><br>
     <input type="submit" value="送信"><br>
</form>


送信ボタンが表示されました。

「送信」というボタン上の文言はvalue属性で変更することができます。

リセットボタンを表示

リセットボタンを設置することもできます。リセットボタンを押すとフォームの内容を初期値に戻すことができます。

  <form action="#" method="post">
     <input type="number" placeholder="数字を入力" required><br>
     <input type="submit" value="送信"><br>
     <input type="reset" value="リセット">
 </form>


テキストエリア

textareaタグを使うと、複数行のテキストを入力できるエリアを用意することができます。

前述した、type=”text”では一行のエリアしか用意できなかったので、長文が入力されるような時はこちらを使うと良いでしょう。

 <form action="#" method="post">
     <textarea name="comment" placeholder="コメントを入力" rows="4" cols="40"></textarea>
     <input type="submit" value="送信"><br>
 </form>

テキストエリアが表示できました。エリアが広いので、お問い合わせフォームなどで使えそうです。

テキストエリアではcolsとrowsが指定できます。colsは横幅に指定で、半角英数字を何文字分とるかを指定します。rowsは縦幅の指定で、何行分の高さをとるかを指定します。

基本的にはCSSで大きさを整えるので、colsとrowsはなくても構いません。

textareaタグはこれまで紹介してきたinputと違い、value属性が使えないので注意が必要です。

ドロップダウン

selectタグを使うことで、ドロップダウンの選択肢を表示させることできます。

 <select name="example">
    <option value="黄色">黄色</option>
    <option value="赤">赤</option>
    <option value="青">青</option>
 </select>

このように、選択肢をクリックやタップをして選ぶことができます。

選択肢の一つ一つは、optionタグを使います。name属性で付けたデータ名と、 選択されたのvalue属性の値をセットにして、データを送信するので両方設定するようにしましょう。

初期値にしたい項目がある場合は、selectedを追加します。

ドロップダウンの使い所

ドロップダウンは選択肢が隠れてしまうため、ユーザーに見逃されてしまう可能性があります。そのため何かを一つ選ばせたい場合はラジオボタンを使うほうが親切でしょう。

ただし、選択肢が多く、ラジオボタンでは表示に難があるような場合には、ドロップダウンを使うようにすればよいでしょう。

labelタグで項目名を表示

labelタグを使うと、入力項目に対して項目名を表示することができます。

  <form action="#" method="post">
     <label for="number">数字を入れる場所</label>
     <input type="number" id="number" placeholder="数字を入力" required><br>
     <input type="submit" value="送信"><br>
  </form>


入力欄の前に項目名を表示することができました。

使い方のポイントとしてはlabelfor属性と、関連する入力項目のidを同じ名前にすることです。こうすることで二つを結びつけることができます。

labelを使わなくても、項目名を表示すること自体はできるのですが、labelを使うメリットがあります。

それはlabelを使った場合は項目名ををクリックした時に、対応する入力欄にカーソルが移動することです。ユーザーにとってはその方が使いやすくなるので、項目名を表示する場合はlabelを使った方が親切でしょう。

入力項目をグループ化

HTML5で追加された、fieldsetタグlegendタグを使って入力項目をグルーピングできます。

fieldset内にグルーピングしたい入力項目を入れ、legendタグでグループタイトルをつけます。

グルーピングされると、グループの間をtabキーで簡単に移動することが可能になります。また、見た目的にもグループが線で囲われ、わかりやすくなるというメリットがあります。

 <form action="#" method="post">
  
    <!--   性別 -->
    <fieldset>
      <legend>性別</legend>
      <label for="dansei">男性</label>
      <input id="dansei" type="radio" name="sex" value="dansei" checked><br>
      <label for="zyosei">女性</label>
      <input id="zyosei" type="radio" name="sex" value="zyosei"><br>
    </fieldset>
  
 </form>
  
性別

今までの知識をまとめて、フォームを作成

ここまで学習してきたことを駆使してフォームを作成すると下記のようになります。

<form action="#" method="post">
 
   <!--   名前 -->
   <label for="name">名前</label>
   <input id="name" type="text" placeholder="名前を入力" required><br>
 
   <!--   年齢 -->
   <label for="age">年齢</label>
   <input id="age" type="number" placeholder="数字を入力" required><br>
 
   <!--   メールアドレス -->
   <label for="email">メールアドレス</label>
   <input id="email" type="email" placeholder="メールアドレスを入力" required><br>
 
   <!--   パスワード -->
   <label for="password">パスワード</label>
   <input id="password" type="password" placeholder="パスワードを入力" required><br>
 
   <!--   性別 -->
   <fieldset>
     <legend>性別</legend>
     <label for="dansei">男性</label>
     <input id="dansei" type="radio" name="sex" value="dansei" checked><br>
     <label for="zyosei">女性</label>
     <input id="zyosei" type="radio" name="sex" value="zyosei"><br>
   </fieldset>
 
   <!--   興味のある分野 -->
   <fieldset>
     <legend>興味のある分野</legend>
     <label for="fashion">ファション</label>
     <input type="checkbox" name="status" value="会社員" id="fashion"><br>
     <label for="chemistry">化学</label>
     <input type="checkbox" name="status" value="学生" id="chemistry"><br>
     <label for="politics">政治</label>
     <input type="checkbox" name="status" value="学生" id="politics"><br>
     <label for="economy">経済</label>
     <input type="checkbox" name="status" value="学生" id="economy"><br>
   </fieldset>
 
   <!--   備考 -->
   <label for="remarks">備考</label><br>
   <textarea name="textarea" id="remarks" placeholder="備考を入力"></textarea><br>
 
   <!--   出身地 -->
   <label for="prefecture">出身地</label>
   <select name="prefecture" id="prefecture">
     <option value="">以下から選択してください</option>
     <option value="青森">青森</option>
     <option value="秋田">秋田</option>
     <option value="岩手">岩手</option>
   </select><br>
 
   <!--   名前 -->
   <input type="submit" value="登録"><br>
   <input type="reset" value="リセット">
 
 </form>




性別

興味のある分野







フォームをCSSで整えよう

フォームをCSSで整えていきましょう。

<form class="form" action="#" method="post">
 
   <!--   名前 -->
   <div class="item">
     <label class="label_left" for="name">名前</label>
     <input id="name" type="text" placeholder="名前を入力" required><br>
   </div>
 
   <!--   年齢 -->
   <div class="item">
     <label class="label_left" for="age">年齢</label>
     <input id="age" type="number" placeholder="数字を入力" required><br>
   </div>
 
   <!--   メールアドレス -->
   <div class="item">
     <label  class="label_left" for="email">メールアドレス</label>
     <input id="email" type="email" placeholder="メールアドレスを入力" required><br>
   </div>
 
   <!--   パスワード -->
   <div class="item">
     <label class="label_left" for="password">パスワード</label>
     <input id="password" type="password" placeholder="パスワードを入力" required><br>
   </div>
 
   <!--   性別 -->
   <div class="item">
     <fieldset>
       <legend>性別</legend>
       <label for="dansei">男性</label>
       <input id="dansei" type="radio" name="sex" value="dansei" checked><br>
       <label for="zyosei">女性</label>
       <input id="zyosei" type="radio" name="sex" value="zyosei"><br>
     </fieldset>
   </div>
 
   <!--   興味のある分野 -->
   <div class="item">
     <fieldset>
       <legend>興味のある分野</legend>
       <label for="fashion">ファション</label>
       <input type="checkbox" name="status" value="会社員" id="fashion"><br>
       <label for="chemistry">化学</label>
       <input type="checkbox" name="status" value="学生" id="chemistry"><br>
       <label for="politics">政治</label>
       <input type="checkbox" name="status" value="学生" id="politics"><br>
       <label for="economy">経済</label>
       <input type="checkbox" name="status" value="学生" id="economy"><br>
     </fieldset>
   </div>
 
   <!--   備考 -->
   <div class="item">
     <label class="label_left" for="remarks">備考</label>
     <textarea name="textarea" id="remarks" placeholder="備考を入力"></textarea><br>
   </div>
 
   <!--   出身地 -->
   <div class="item">
     <label  class="label_left" for="prefecture">出身地</label>
     <select name="prefecture" id="prefecture">
       <option value="">以下から選択してください</option>
       <option value="青森">青森</option>
       <option value="秋田">秋田</option>
       <option value="岩手">岩手</option>
     </select><br>
   </div>
 
   <!--   名前 -->
   <div class="btns">
     <input type="submit" value="登録"><br>
     <input type="reset" value="リセット">
   </div>
 
 </form>
.form{
   width: 100%;
   margin:0 auto;
   border: 1px solid #9c9c9c;
   padding: 50px;
   box-sizing: border-box;
 }
 
 .item{
   margin-bottom: 20px;
 }
 
 .label_left{
   display: inline-block;
   width:25%;
   border-left: solid 5px #5250e0;
   padding-left: 15px;
   vertical-align:top;
 }
 
.form input[type="text"], 
.form input[type="number"],
.form input[type="email"] ,
.form input[type="password"] {
     padding: 10px;
     width: 65%;
 }
 
.form textarea{
   padding: 10px;
   height: 100px;
   font-size: 14px;
   width: 65%;
 }
 
.form select{
   height: 35px;
   width: 65%;
 }
 
 .btns{
   display: flex;
   justify-content: center;
 }
 
.form input[type="submit"]{
   background: #5250e0;
   color: white;
   font-size:16px;
   font-weight:bold;
   padding: 10px 20px;
   margin: 0 5px;
 }
 
.form input[type="reset"]{
   background: #333;
   color: white;
   font-size:16px;
   font-weight:bold;
   padding: 10px 20px;
   margin: 0 5px;
 }




性別

興味のある分野






inputの特定の入力項目にスタイルを適用するには

input type=”〇〇”

をセレクタにします。

例えば、

input[type="text"]{
width: 500px;
}

とすれば、テキストフィールドにスタイルが適用されます。

まとめ

  • フォームとは、ユーザーが情報を入力送信するために使われているもので、あらゆるサイトで利用されている
  • フォームの仕組みには大きく分けて「フォームの表示」と「データのやりとり」がある
  • フォームには少なくともformタグと、入力欄、送信ボタンなどが必要
  • フォームをつくるにはhtmlのformタグを使う
  • 入力項目を用意するには inputタグを使う
  • cssで見た目を都と得ることが可能