kokeblog

フォーム作成の備忘録

  • 2020年03月31日
  • 今回は、HTMLとCSSでは結構難しい分類にはいるフォームのコーディングを自分の復習がてらまとめていこうと思います。フォームの表示がちゃんとできるようにということをまとめていくので実際に入力された内容を処理するPHPなどは省きます。

    フォームは名前やメールアドレスなどを書くテキストフィールド、お問い合わせ内容などの少し長めの文章を書くテキストエリア、送信ボタンやその他にはラジオボタンなどの組み合わせが一般的ですね。

    フォーム作成の基本的な要素

    input要素について

    まずは、input要素についてです。input要素はtype属性に様々な値を入力することでテキストフィールドやラジオボタン、チェックボックスを作成できます。

    テキストフィールド

    まずはテキストフィールドについてです。名前やメールアドレスなどを入力するところでよく見る一行の入力フォームですね。様々な属性に値を指定できます。ここも詳しくまとめて行きます

    name属性はその要素の名前を指定できるものでフォームで入力したデータが送信した時にこのname属性の値も一緒についてくるので簡単に対象のデータにアクセスできるようになります。他の要素と被らないように名前を指定しましょう。value属性はここにあらかじめ値を指定しておけばその値を初期値として扱うことができます。maxlength属性は値を指定することで入力できる文字数を制限できます。10文字までという制限をつけたければmaxlength=”10″といった感じで指定します。placeholder属性はフォームなどで何も入力されていないテキストフィールドに薄い文字で表示することができます。フォームでよくあるものですね。

    下記でinput要素でテキストフィールドを簡単に実装してみました。文字だけだとかなり分かりづらくなってしまうので実際に値を指定しながら学んでいきます。

    こちらは名前を入力するテキストフィールドです。type属性にtextを指定することで文字が入力できます。value属性に名前と指定しているので最初から名前と入力されていますね。

    次はメールアドレスを入力するテキストフィールドです。type属性にemailを指定します。placender属性に値を指定しているので入力部分に薄く文字が表示されています。

    続いてパスワードを入力するテキストフィールドです。type属性にpasswordを指定することで入力した文字が隠れます。また、maxlengthで10を指定しているので10文字までしか入力できないようになっています。

    数字を入力するテキストフィールドです。type属性にnumberを指定すると数字のみ入力を受けつけます。

    次にラジオボタンを実装してみました。ラジオボタンは複数の要素からひとつ選択するボタンになります。type属性にradioを指定します。ラジオボタンを実装するときにはボタンの部分だけでなく文字の部分をクリックしても選択されるようにinput要素にid属性で値を指定し、文字の部分のlabel属性にfor属性でid属性の値を指定しましょう。最初から選択されている状態にしたければchecked属性を加えます。何も指定しなくても選択された状態になります。少し難しくなっているので気を付けましょう。

    続いてチェックボックスです。先ほどのラジオボタンはひとつだけしか要素を選択できませんでしたがこちら複数選択できます。type属性にはcheckboxを指定します。チェックボックスもラヂオボタンと同様、ボタンの部分だけでなく文字の部分をクリックしても選択されるようにinput要素にid属性で値を指定し、文字の部分のlabel属性にfor属性でid属性の値を指定しましょう。最初から選択されている状態にしたければchecked属性を加えます。

    input要素の最後になります、ボタンの実装です。type属性にsubmitを指定します。value属性に値を指定することでボタンの文字を変更することができます。

    input要素はその他にもtype属性の値を変えることで様々なフォームを作成できますが、実際によく使われるものを例として作成していきました。

    textarea要素について

    textarea要素についてです。先ほどのinput要素でテキストフィールドの作成をしましたが、お問い合わせの内容など1行で収まりきらない場合はこのtextarea要素で複数行入力できるように作成します。またCSSでresizeプロパティを使ってテキストエリアの大きさを変更できます。

    select要素、option要素について

    select要素、option要素ではプルダウンを実装できます。複数の中からひとつ選択できます。ラジオボタンと同じような感じです。要素が多い時などはラジオボタンよりもプルダウンを使ったほうがいいですね。select要素でoption要素で囲みます。

    これでフォーム作成の基礎的な部分のまとめは終わりです。

    まとめ

    ここまで基本的な部分だけですがまとめてきました。自分でまとめてみて割とあいまいだった部分もあったのでしっかり復習できてよかったです。type属性で指定できる値はまだあるので記事にはしませんが自主的に学習しておこうと思います。今回はCSSでの装飾はほとんどやりませんでしたが少し複雑な部分もあるのでCSSも自分の学習のためにも記事として書いてみようかなと思います。

     

    Pocket

    関連記事

    CSSアニメーションの基礎

    Sassの環境を整える

    jQueryの基礎

    jQueryでよくあるフェードインを作る

    カテゴリー