五回目ーーお問い合わせフォーム、＜input＞、＜texarea＞ーー
今回で一応HTML&CSSの基礎が終わります。
これでホームページが作れるわけではないと思いますが、切りが良いので今の段階での技術を使ったホームページを作ってみようと思います。既にコツコツ作っていますがかなり時間がかかっているので、幾つかに分けて投稿する予定です。
その後RPGツクールを使いマップ作成を同じように投稿したいと考えています。
では、HTML&CSS初級編の最終レッスン
『お問い合わせフォーム』
について学んでいきたいと思います。
前書きにも書いていますが、この後は初級編で学んだことを使い作っている最中のホームページ(なろうTOPページ参考)を先に応用編として行います。纏めみたいなものと思ってください。
恐らく、まだ時間がかかりそうなので画像付きで『HTML』、『CSS』をいくつかに分けて投稿したいと考えています。
その後にRPGツクール(初期の2000)で作ったマップ(ドラクエ1参考)を画像と文章で解説投稿したいと思います。
それでは、初級編最後を始めていきます。
１．お問い合わせフォームを作る
前回軽く触れました『お問い合わせフォーム』。
フォームとはホームの誤字ではなく
【「形」「書式」「伝票」という意味を持ち、入力できる部分】
のことを指します。
今回は
・一行入力
・複数行入力
・送信ボタン
以上の三つのフォームでお問い合わせ入力画面を作りたいと思います。
メールアドレス
□
お問い合わせ内容
□
※必ず入力してください
送信
イメージ的にはこんな形となります。
まず必要なのは『テキスト入力』です。
フォーム(入力欄)に何を書くのか(メールアドレス等)を指示する文章の事。
『h』は見出しなので、段落の『p』を使います。
例
<p>メールアドレス</p>
<p>お問い合わせ内容</p>
<p>※必ず入力してください</p>
『h』と『p』さえ使い間違えなければ、こんな感じと想像しやすいと思います。
送信ボタンの送信はいらないのか、と思う人がいるでしょう。
送信ボタンはテキストではないと考えてください。
ボタンはボタンとしてのプログラムが存在し、そこは後程説明するのでまずはフォームを作っていきましょう。
２．フォームの作り方
先ほど触れていますが、フォームには二種類あります。
一行入力用、複数行入力用のことです。
一行はメールアドレスの他に暗証番号や名前
複数行はご感想、一言、問題点などの指摘
お問い合わせ以外にもあらゆるフォームで使うことになります。
使うプログラム要素は
一行入力用＝『input』
複数行入力用＝『textarea』
となります。
しかし、両者の英語の意味に一行とか複数とか意味があるわけではありません。強いていうなら、テキスト『エリア』だから複数行、と覚えるぐらいでしょう。
そして、ここで注意点が一つ
『input』には終了タグが【不要】、『textarea』には終了タグが【必要】
例
<p>最も好きなアニメ</p>
<input>
<p>好きなアニメ</p>
<textarea></textarea>
こんな形となるという点に注意がいるということです。
３．送信ボタンを作る
そして、最後に『送信ボタン』をプログラムします。
送信ボタンに限らず保存ボタンや検索ボタン等も同様のやり方をするそうです。
では、早速例を
<input type=”submit”>
はい、この一行で送信ボタンが完成します。
簡単に説明すると
基本ボタンは一行なので『input』要素を使い
『type』で入力欄をボタンに変え
『submit』で送信をボタンに表示させる
となります。
まあ、『submit』のデフォルトが送信らしいので、それ自体が送信という意味ではないとは思いますが。
<input type=”submit” value=”保存”>
送信以外はこの様にプログラムするらしいです。
何故バリューなのかよく分かりませんが。
『HTML』
<p>メールアドレス</p>
<input>
<p>お問い合わせ内容</p>
<textarea></textarea>
<p>※必ず入力してください</p>
<input class=”botan” type=”submit”>
『CSS』
input, textarea {
width: 400px;
margin-top: 10px;
margin-bottom: 30px;
padding: 20px;
font-size: 18px;
border: 1px solid #dee7ec;
}
.botan {
background-color: #dee7ec;
color: #889eab;
}
●【,】を使い複数のグループを指定し変更できます。
高さを400px、外側上を10px、外側下を30px
内側全体を20px、文字の大きさを18px
枠線を1px、通常線、灰色で表示します。
botanというクラスの背景色を灰色に
文字の色を濃い眼の灰色にします。
※『input』にクラス名を付けて個別に行っています。
このようにしてお問い合わせフォーム、並びに準ずる入力欄を作ります。
これで全てが終わりました。
この調子で続けるので一旦終わりというわけではありませんが、一つの区切りとします。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
