フォームを作る方法には、少し「癖」があります。
CSSでカスタマイズをするとなると、さらに癖があります。
ただ、かといって、学ばないという選択肢はありません。
フォームは売上につなげるための入り口として、最低限、必要な落とし所です。
また、WEBサービスを作るなら、ユーザーが登録するための場所になります。
WEBには無くてはならない存在がフォームなのです。
今回は、簡単なフォーム作成とカスタマイズを行います。
ただ「送信機能」そのものはつけません。
phpなどバックエンドと呼ばれる言語で開発するからです。
ですので、今回はフロント(見た目)だけ作ります。
実際にメールを送ることはしません。
まず、形だけ作れるようになりましょう。
ただ、それでも少し複雑なHTMLやCSSを使います。
やや難しいかもしれませんが、諦めずに挑戦してみてください。
今回のミッション
フォームには、様々な形や要素があります。
まずテキストボックス。
名前入力やメールアドレス入力などに使う、短いテキストを打つエリアです。
次にラジオボタン。
AかBか、というような、いずれか1つを選ぶ場合のボタンです。
チェックボックスは複数選択可の選択肢。
セレクトボックスは、ドロップダウンで現れる選択肢。
テキストエリアは長文も書けるエリア。
このように、様々なタイプのパーツがあります。
今回は、それぞれのパーツを駆使して、参考例を再現してみましょう。
必要なタグについては、後述しますので、確認してみてください。
■ MISSION 7
https://base91.net/mission/cording/7/
また、下記にダウンロード用ファイルを一式ご用意いたしました。
解説だけでわからない場合は、解答ファイルをダウンロードし、確認してみましょう。
一通り作り方を確認した後で、作ってみてください。
■ 解答ファイルのダウンロード
https://base91.net/mission/cording/7/7.zip
以下、新出のタグをご説明いたします。
参考にしながら、フォームを作ってみましょう。
今回必要なHTMLタグ
<form>〜〜〜</form>
フォームのエリアを意味します。
基本的には、上記タグの中にフォームを作っていきます。
また、formタグには「送信ボタンをクリックした際の効果」を設定できます
<form method="post" action="send.php">〜〜〜</form>
例えば、上記のように指定するとsend.phpにフォームで入力されたデータを送れるようになります。
データを次のページの送ることを「ポストする」と言います。
method=”post”を記述することで、次のページにデータをポストできます。
何も指定の無い場合はURLに「パラメータ」がくっつきます。
実際に、サンプルのフォームで何か入力して送信ボタンを押してみてください。
methodなど何も指定せずに送信ボタンを押すと、下記のような形で、入力した内容がURLにくっついています。
https://base91.net/mission/cording/7/?namedata=start&gender=men&hobby=game&textboxdata=out
これを「URLパラメータ」と呼んだりします。
URLパラメータを使えば、postしなくても、次ページにデータを渡すこともできます。
<input type="text" name="namedata" placeholder="例) 佐々木 太郎" class="inputText" />
inputは「短いテキスト入力エリア」を作るタグです。
nameにはinputの「役割」に該当する英数字を記入してください。
今回は名前を入力する項目なのでnamedataとしています。
typeにはフォーム形式を指定します。
placeholderは、最初からフォームに薄く表示する参考例です。
placeholderの内容は、フォームで送信しようとしても、反映されません。
<input type="radio" name="gender" value="men" checked="checked">男性
<input type="radio" name="gender" value="women">女性
上記のradioボタンは、いずれか「1つ」の選択肢だけを選ばせるものです。
まず、typeでradioボタンを指定しています。
タグ自体は、テキストの時と同じinputですね。
nameに同じ文字列を設定することで、共通させた要素が連動します。
1つにチェックを入れると、連動した他のチェックが外れるようになります。
<input type="checkbox" name="hobby" value="game" checked="checked">ゲーム
<input type="checkbox" name="hobby" value="sports">スポーツ
<input type="checkbox" name="hobby" value="movie">映画
<p>checkboxは複数選択可能なボックスです。<br>radioボタンは、1つしか選択できませんでしたが、こちらは複数チェックできます。<br>nameを同じ文字列にすることで、共通させた要素がグループと認識されます。</p>
<select name="" id="">
<option value="HTML×CSS">HTML×CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="デザイン">デザイン</option>
</select>
selectboxは、リストの中から1つを選びます。
通常1つしか選べないという意味では、役割としてradioボタンと似ています。
selectで囲んだoption要素が、選択肢として表示されます。
<textarea name="textboxdata" class="textboxdata"></textarea>
textareaは、長文を記載できる文章です。
メールフォームで言えば、詳細や備考を入力する箇所です。
<button class="btnStyle1">送信</button>
buttonは送信ボタンを意味します。
buttonを押すことによって、入力内容をURLパラメータに反映させられます。
また、formに設定したpostを発動させ、次ページにデータを送ることもできます。
buttonは送信ボタンだけでなく、投稿機能であれば「投稿ボタン」としても使えますし、既存のデータを編集するのであれば「更新ボタン」のようにも使えます。
ボタンでさえあれば、用途は送信ボタンに限りません。
新出のCSSプロパティ
max-width:680px;
widthを指定した値以上、広がらないように固定します。
例えばwidth:90%;で指定していても、max-width:680px;を設定していれば、680px以上widthが広がることはありません。
レスポンシブで使ったメディアクエリのmax-widthの使い方とは別物です。
cursor: pointer;
カーソルを当てた時、指マークにします。
text-indent: 0.01px;
テキストの冒頭に隙間を少しあけます。
box-shadow: none;
通常、影をつけるために使うタグです。
ただ、今回はデフォルトでフォームに設定されている影を消すために使います。
-webkit-appearance: none;
appearance: none;
selectの余分な装飾要素をすべてリセットします。
-webkit-はベンダープレフィックスと呼ばれ、webkitと呼ばれる形式で作られたブラウザに効果を適応させます。
//親要素
position: relative;
//子要素
position: absolute;
top: 0.8em;
right: 0.9em;
ある範囲内で「自由な位置」に要素を置きたい時に使います。
まずrelativeで「範囲」を指定しましょう。
relativeの中に何か要素を入れ、absoluteを指定します。
さらにabsoluteを適応した要素をrightやtopで位置指定します。
relativeで指定したエリアを基準に、topやrightで位置を指定することができます。
位置の指定にはpx、emなどの単位を使うことが可能です。
pointer-events: none;
カーソルをリンク等の要素にあてると、通常、指マークなどにカーソルが変わります。
要素へのロールオーバー時に、カーソルを変化させる効果等をすべてリセットします。
transform: rotate(-45deg);
-45度、要素を回転させます。
もちろん、数字で角度を変えることができます。
border-radius: 5px;
角丸を作ります。
丸い角をすぐに作ることができるので便利です。
.select_form .select_form_inner:before {〜〜〜}
:before要素は、子要素の手前に擬似的な「:before」という要素を作ります。
HTML上に記述がなくても:beforeという要素をHTML上に出現させます。
:afterも存在しており、afterの場合は子要素の後に擬似要素を作ります。
floatの項目を練習された方は、擬似要素は一度、やりましたよね。
より詳しく擬似要素について知りたい方は、こちらに挑戦してみましょう。
今回、selectbox内の矢印を作るために擬似要素使いました。
デベロッパーツールでどう作っているのか確認してみてください。
content: "";
疑似要素とセットで使われることが多いです。
擬似要素と同じくこちらで、contentの説明もしたかと思います。
擬似要素のbeforeやafterだけ指定しても、画面上では何も表示されません。
CSSで横幅や縦幅、その他のCSSを適用しようとしても反映されないでしょう。
contentを入れることで、疑似要素に対してCSSが使えるようになります。
なお” “に文字を入れると文字も出力できます。
このように、form要素をカスタマイズするのは、少し面倒かもしれません。
一度作ってみたら、使い回せるようにフォーム要素のCSSを保存しておきましょう。
そして、次回フォームを作る時に、改めて流用して効率化しましょう。