2019/06/22)フォームとはフォームとは、ユーザーが情報を入力送信するために使われているもので、あらゆるサイトで利用されています。ショッピングサイトで買い物するときや、gogleにログインする際などに使われているのもフォームです。個人的なサイトやブログであっても、お問い合わせフォームを設置するのは常識のようになってきました。1から自分でフォームを作るというのは、なかなかハードルが高く難しいですが、見た目のカスタマイズなどは必要になってくるでしょう。この記事では、フォームのマークアップと見た目のカスタマイズについて学習していきます。フォームの仕組みフォームの仕組みには大きく分けて「フォームの表示」と「データのやりとり」があります。「フォームの表示」はHTMLとCSSを使って、項目を増やしたり見た目を整えて、フォームを表示するための仕組みです。「データのやりとり」は、入力された内容をサーバー側に送り、データを登録したり更新したりします。これらの処理は、サーバ側のプログラムであるphpなどを使って処理を作る必要があります。この記事ではHTML、CSSの習得をテーマにしているので、「データのやりとり」の部分までは触れず、「フォームの表示」についてのみ解説しています。フォームを作ってみようまずは簡単なフォームを作ってみましょうフォームには少なくともformタグと、入力欄、送信ボタンなどが必要です。実際に簡単なフォームを出力してみましょう。value="送信"><br></form>非常に簡単ではありますが、フォームが出力されましたね。シンプルですが、送信ボタンと入力項目が一つでもあれば、それをfomタグでくくることでデータを送ることが可能となります。formタグで囲うフォームをつくるにはhtmlのformタグを使います。formタグのなかに、inputタグを使って、入力項目やボタンを配置してきます。formタグのaction属性を設定するaction属性は、フオームの入力情報を送信するプログラム(phpなど)のURLを書きます。これが正常に設定されていないと、フォームのデータが送信されないので注意が必要です。送付先が決まってない場合は”#”を設定します。formタグのmethod属性を設定するmethod属性はデータの送信方法を指定します。method属性の値は、getとpostがありますが、どちらを選ぶかはphp側での処理を把握しなければ理解しづらい概念ですので、今はあまり気にする必要ありません。基本的にpostを使うと覚えておく程度に認識しておきましょう。inputタグを使います。type="タイプの種類">タイプの種類にはテキストエリアの場合は”text”、送信ボタンの場合は”submit”など対応するキーワードを指定して使います。代表的な種類は以下のようなものが準備されています。実際に一つずつ使ってみていきましょう。必要に応じて属性も指定しよう実例に入る前に、知っておくと便利なのでinputの属性について触れておきます。各インプットには属性を指定することが出来ます。省略することも可能ですが、使いこなせば非常に便利なフォームを作成することが出来ます。ここにタイトルinputの属性name属性データを送信した先で項目を区別するための名前です。区別できるように他のnameと重複してはいけません。項目の初期値として使われます。value=”テスト”とすると、入力する前から”テストと入力された状態になります。設定した文字列が、入力欄にうすく表示されます。「このように入力してください」のように入力例として使われることが多いです。入力して欲しい項目に「required」と指定します。これが設定されている項目が空欄だと注意が出力されます。maxlength最大文字数を指定します。maxlength=”10′′なら10文字より多い文字は入力できなくなります。</form>テキストフィールドに属性として以下を設定しています。placeholder=”テキストを入力”maxlength=”10′′required薄い文字で「テキストを入力」と出力されていて、入力し始めると薄い文字は消えます。このようにplaceholderは、場所を取らずユーザーにアクションを促すことができます。10文字までしか入力することができず、空白のまま送信ボタンを押すとエラーが出るようになっていますね。このように属性を使えば簡単にフォームをカスタマイズすることができます。テキストフィールド一行程度のテキストが入力できるエリアを表示します。typeにはtextを設定します。value="送信"><br></form>emailアドレスemailアドレスを入力するためのエリアを表示します。@がない場合など、メルアドの形式でないものはエラーを出力してくれます。value="送信"><br></form>パスワードパスワードを入力するエリアです。入力した文字は伏字になるため、周りから読み取られることがありません。</form>数字type=”number”を使えば、数字の入力に限定することができます。value="送信"><br></form>ラジオボタンラジオボタンは複数の選択肢から、一つだけを選択してもらうための要素です。例のようにチェックを入れて送信をする事ができます。二つ以上選ぶことはできないので、一つだけ選んでもらいたい場所で使うと便利です。今回は3つのラジオボタンを一つのグループとして表示していますが、グループ化したいラジオボタンはname属性を同じ値にする必要があります。ラジオボタンはこのグループの中で1つだけ選択できる状態になります。ラジオボタンはデータが送信される際、name属性とvalue属性の値がセットになって送信されるので、両方設定するようにしましょう。デフォルトで選択状態にしたい要素があれば、checked属性を加えます。チェックボックスチェックボックスは、複数の選択肢から、1つ以上選択してもらうための要素です。青このようにチェックボックスが表示され、幾つでも選択できるようになります。ラジオボタンと似ていますが、大きな違いはラジオボタンは一つしか選べないのに対し、チェックボックスは複数選択が可能な点です。今回は3つのチェックボックスを一つのグループとして表示していますが、グループ化したいチェックボックスはname属性を同じ値にする必要があります。チェックボックスはデータが送信される際、name属性とvalue属性の値がセットになって送信されるので、両方設定するようにしましょう。デフォルトで選択状態にしたい要素があれば、checked属性を加えます。送信ボタンやリセットボタンの設定フォームには入力項目を配置しただけでは、データの送信が行われません。送信ボタンが必要になります。value="送信"><br></form>送信ボタンが表示されました。「送信」というボタン上の文言はvalue属性で変更することができます。リセットボタンを表示リセットボタンを設置することもできます。リセットボタンを押すとフォームの内容を初期値に戻すことができます。</form>テキストエリアtextareaタグを使うと、複数行のテキストを入力できるエリアを用意することができます。前述した、type=”text”では一行のエリアしか用意できなかったので、長文が入力されるような時はこちらを使うと良いでしょう。</form>テキストエリアが表示できました。エリアが広いので、お問い合わせフォームなどで使えそうです。テキストエリアではcolsとrowsが指定できます。colsは横幅に指定で、半角英数字を何文字分とるかを指定します。rowsは縦幅の指定で、何行分の高さをとるかを指定します。基本的にはCSSで大きさを整えるので、colsとrowsはなくても構いません。textareaタグはこれまで紹介してきたinputと違い、value属性が使えないので注意が必要です。ドロップダウンselectタグを使うことで、ドロップダウンの選択肢を表示させることできます。青このように、選択肢をクリックやタップをして選ぶことができます。選択肢の一つ一つは、optionタグを使います。選択されたのvalue属性の値をセットにして、データを送信するので両方設定するようにしましょう。初期値にしたい項目がある場合は、selectedを追加します。ドロップダウンの使い所ドロップダウンは選択肢が隠れてしまうため、ユーザーに見逃されてしまう可能性があります。そのため何かを一つ選ばせたい場合はラジオボタンを使うほうが親切でしょう。選択肢が多く、ラジオボタンでは表示に難があるような場合には、ドロップダウンを使うようにすればよいでしょう。labelタグで項目名を表示labelタグを使うと、入力項目に対して項目名を表示することができます。入力欄の前に項目名を表示することができました。使い方のポイントとしてはlabelのfor属性と、関連する入力項目のidを同じ名前にすることです。することで二つを結びつけることができます。labelを使わなくても、項目名を表示すること自体はできるのですが、labelを使うメリットがあります。それはlabelを使った場合は項目名ををクリックした時に、対応する入力欄にカーソルが移動することです。ユーザーにとってはその方が使いやすくなるので、項目名を表示する場合はlabelを使った方が親切でしょう。入力項目をグループ化HTML5で追加された、fieldsetタグとlegendタグを使って入力項目をグルーピングできます。fieldset内にグルーピングしたい入力項目を入れ、legendタグでグループタイトルをつけます。グルーピングされると、グループの間をtabキーで簡単に移動することが可能になります。見た目的にもグループが線で囲われ、わかりやすくなるというメリットがあります。今までの知識をまとめて、フォームを作成ここまで学習してきたことを駆使してフォームを作成すると下記のようになります。岩手フォームをCSSで整えようフォームをCSSで整えていきましょう。type=”〇〇”をセレクタにします。500px;}とすれば、テキストフィールドにスタイルが適用されます。inputタグを使うcssで見た目を都と得ることが可能すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。【css】marginとpaddingの使い方や違いを解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。