htmlcss フォームを作ってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

フォームを作ってみよう

HTML×CSS|2019年02月06日

2019年02月06日
  • このエントリーをはてなブックマークに追加

フォームを作る方法には、少し「癖」があります。
CSSでカスタマイズをするとなると、さらに癖があります。

ただ、かといって、学ばないという選択肢はありません。
フォームは売上につなげるための入り口として、最低限、必要な落とし所です。

また、WEBサービスを作るなら、ユーザーが登録するための場所になります。
WEBには無くてはならない存在がフォームなのです。

今回は、簡単なフォーム作成とカスタマイズを行います。

ただ「送信機能」そのものはつけません。
phpなどバックエンドと呼ばれる言語で開発するからです。

ですので、今回はフロント(見た目)だけ作ります。
実際にメールを送ることはしません。
まず、形だけ作れるようになりましょう。

ただ、それでも少し複雑なHTMLやCSSを使います。
やや難しいかもしれませんが、諦めずに挑戦してみてください。

今回のミッション

フォームには、様々な形や要素があります。

まずテキストボックス。
名前入力やメールアドレス入力などに使う、短いテキストを打つエリアです。

次にラジオボタン。
AかBか、というような、いずれか1つを選ぶ場合のボタンです。

チェックボックスは複数選択可の選択肢。

セレクトボックスは、ドロップダウンで現れる選択肢。

テキストエリアは長文も書けるエリア。

このように、様々なタイプのパーツがあります。

今回は、それぞれのパーツを駆使して、参考例を再現してみましょう。
必要なタグについては、後述しますので、確認してみてください。

また、下記にダウンロード用ファイルを一式ご用意いたしました。

解説だけでわからない場合は、解答ファイルをダウンロードし、確認してみましょう。
一通り作り方を確認した後で、作ってみてください。

■ 解答ファイルのダウンロード
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を保存しておきましょう。
そして、次回フォームを作る時に、改めて流用して効率化しましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら