フォーム作成の備忘録

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

related

three.jsジオメトリについて

前回、three.jsで簡単なものを表示させる手順についての記事を書きましたが、今回はジオメトリに重点を置いてまとめていきます。実際に形を形成していくので結構楽しい部分かなと思います。 立方体 THR

フロントエンド

2020.11.08

EJSを使ってサイトをコーディングする

今回は、ポートフォリオのコーディングで使ったEJSについてまとめていきます。EJSを使っていくための環境構築やEJSのメリットなどまとめていこうと思います。 EJSとは? そもそもEJSって何?という

フロントエンド

2020.08.27

jQueryを使って一番上に戻るボタンを実装する

今回はjQueryを使って一番上戻るボタンを自力で実装していこうと思います。調べたらコピペでそのまま使えるコードが出てきますが今まで学んできたことの復習として自分の力で書いていきます。ところどころに解

フロントエンド

2020.04.19

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き