マイルドセブンの丘

記事の内容

form要素を使って様々なフォームを作ってみよう

お問い合わせフォームの見本

フォームの基本を知ろう

フォームの仕組み

ユーザーが「お問い合わせ」などに、情報を入力して送信する形式を「フォーム」と言います、フォームに入力したデーターはWebサーバーに送られて、サーバー内のプログラムが情報を処理してのサイトに送信されサイトからユーザーのパソコンなどへ送られて表示される仕組みです。

フォームを定義するform要素

フォームを作るには「form要素」を使用し、その内側に入力エリアなどのいろんな要素を記述していきます。

form要素は属性を利用してデーターの送信先や送信方法なども指定できます、属性には「action属性」「method属性」があります。

これを記述してみると
<form action="プログラムの場所・ファイル名" method="送信方法"></form>
このようになります。

データーの送り先を定義する「action」

action属性はデーターを何処に送るのかを定義します、データを受け取るプログラムファイルのパスやURLを記述します。

例として、action="program.php" と指定します、phpはHypertext Preprocessorを略したスクリプト言語で、Webプログラムで最も使われている言語の一つで、インストールされたWebサーバーでのみ動作するものです。

例えば、お問い合わせフォームのPHPファイルは「フォームから送られてきた情報を受け取り」「フォームに入力した情報を確認する」「メールを送信する」などを実行します。

データーの送信方法を定義する「method」

method属性は入力したデーターの送信方法を定義します、送信方法には「get」と「post」があります。

get」はURLの最後にデーターをつけて送信します、URLにデーターが表示されるため他の人から見える可能性がありますから秘密にしておきたい情報を送る時は避けましょう。

post」はデーターを見えない状態で送信しますので一般的にはpostを使う場合がほとんどです。

フォームの入力形式を定義するinput要素

input要素を使って色々な形のフォームを作成

form要素の中に「input要素」を使用してフォームの部品を作成できます、input要素には「type属性」があり指定する値によってフォームの形が変わります。

type属性に設定できる値

  • text    一行のテキストボックス
  • password 入力した文字が伏字「・」で表示
  • radio   ラジオボタン
  • file    ファイルの添付に使用
  • submit  送信ボタン
  • reset   リセットボタン
  • dutton   汎用のボタン
  • image   画像を使用したボタン
  • hidden   画面上は非表示でデーターを送信する

htmlに記述する例として
<input type="text" name="要素の名前">
このように記述していきます。

name以外の属性
  • checked : ラジオボタンやチェックボックスをあらかじめ「チェック済み」にする。
  • maxlength : 入力できる最大文字数を「文字数で指定」する。
  • size : 入力欄の幅を「文字数で指定」する。
  • src : type属性の値が「image」の場合に画像ファイルのURLを指定する。
  • required : 入力が必要な項目に指定すると、未入力時にエラーが表示される。
  • value : 初期値を指定します。

text属性を使って作ってみよう

text属性は一行のテキストボックスが作成できます、複数行を作る場合は「textarea」を使います。

htmlのbody要素内にform要素を記述し、その中に「input要素」を記述、text属性を使って一行のボックスを作ります、nameはその要素の名前になりますので分かり易いものを指定します。

フォームのtext属性の記述見本

このような簡単なフォームが表示されます。

password属性を使って作ってみよう

フォームのパスワード属性の記述要領

このように入力した文字を見えないようにします。

パスワードのフォーム

checkbox属性を使って作ってみよう

フォームのチェックボックスの記述要領

このようなボタンが現れます、チェックボックスは入力時に複数選択が可能です。

定義リストを使って簡単なお問い合わせを作る

入力する内容と入力欄が対になった形式にするために定義リストを使用してフォームを作ってみましょう。

名前を記入してもらうフォームを作る

body要素の中にform要素を記述してその中に「dl要素」で名前の入力欄を作っていきます。

定義要素を使ったテキスト属性の記述要領

名前の横ではなく下の方にしたいので「定義(dl要素)リスト」を使用しています。

名前

性別の項目を作り男女に分ける

項目の「性別」をdt要素の中に、男女の区分を「radio属性」を使用します、radio属性を使用する時はname属性の値には「gender」を指定、value属性には「man(男)」などを指定します。

value属性が指定されていないと送信された情報が「空欄」の状態になり、どの選択がなされたか判別できない状態になります。

お名前と性別を問うラジオボックスを使った記述要領

男女を横並びに表示するには

dd要素の中にinputを2段で記述すれば下のように横に表示されます。

名前
性別

チェックボックスやラジオボックスのvalue属性はデーターの初期値を指定する属性です。

テキストの入力欄は初期の入力値に
チェックボックスやラジオボタンでは選択した時に送信する値に
ボタンではボタン名を表します。

複数行の文字入力ができるテキストを作る

textarea要素で複数行の入力欄を作ることができます。

textarea要素に指定できる属性

  • cols  一行あたりの最大文字数を指定
  • rows  入力欄の高さを行数で指定
  • wrap  入力した文字の自動的な折り返しルールを指定
  • maxlength  入力可能な最大文字数を指定
  • minlength  設定した入力数を下回った時は入力不可に
  • name  入力項目の名前を指定
  • placeholder  入力するヒントとなる言葉や例文を指定
  • required  入力が必要な項目に指定することで未入力時にエラーメッセージを表示
テキストエリアで感想を入力してもらうボックスの記述要領
  1. form要素の中に「textarea要素」を記述
  2. 開始タグの中にname属性でtextarea要素の名前を指定
  3. cole属性で一行の文字数を指定
  4. rows属性で入力欄の高さを行数で指定
  5. wrap属性で折り返しのルールを指定
  6. maxlength属性で最大文字数を指定
  7. minlength属性で最小文字数を指定
  8. placeholder属性で入力する内容のヒントになる言葉を指定
  9. required属性で未入力時にエラーメッセージを表示させます。

このような流れで指定していきます「wrap属性」の折り返しのルールには「soft」「hard」「off」があります、softとhardは自動的に折り返ししますがoffは折り返さずに入力していきます。

softはサーバーへの送信内容には影響はせず、hardは送信内容にも折り返しが反映します。

入力欄には、このように文字が表示されますが、入力するとこの文字は消えてしまいます、試しに何か入力してみて下さい。

送信ボタンを作ろう

送信ボタンを作る「button要素」のtype属性に指定できる値

  • submit  フォームに入力した内容を送信するボタン(初期値)
  • reset  フォームに入力した内容をリセット(消去)するボタン
  • button  汎用的な押しボタン

button要素でボタンを作ることができます、機能はinput要素で作成するボタンと同じで、type属性でボタンの種類を指定できボタン上の表示を変えたり画像を表示させたりできます。

各種ボタンの記述要領

htmlに上のように記述すると下のボタンのように表示されます、ボタンの中の言葉は変えることができます。

このボタンの記述を先ほどのテキストボックスの下に記述すると

テキストエリアと送信ボタンの記述要領

テキストボックスの横にボタンが表示されます、required属性を指定しているので入力欄に未記入か指定文字よりも少ない場合はエラーメッセージが表示されます。

label要素を使って入力しやすいフォームを作る

黄色いお花畑

label要素は項目と入力欄を紐付けする要素

label要素とはフォームを構成する項目名と入力欄を紐付けるために使用します、これはユーザーが項目名をクリックすることで入力や項目の選択ができる状態になることです。

紐付けする要領その①

htmlにこのように記述をしても名前とtextは紐付けされていません。

お名前の項目とテキストボックスを紐づける

「お名前」の所をクリックしても何の変化も出ません。

お名前

<label>要素で「お名前」から<input>を囲みます、これで「お名前」テキストボックスを紐付けしたことになります。

ラベル要素を使った紐付けの要領その①

今度は「お名前」をクリックすると入力欄が入力できるようになります、これで紐付けできました。

紐付けする要領その②

label要素にfor属性を指定して、for属性の値と入力欄のid属性の値を同じにすることで項目ランと入力欄を紐づけることができます。

forとidを使った紐付けの要領その②

定義リストで作った「名前」をlabel要素で囲み、for属性に「yua-name」下のフォームのテキストのid属性に同じ名前の「yua-name」と値を同じくすれば項目と入力欄を紐付けられます。

下の名前をクリックした見ましょう。

お問い合わせフォームを作る

色づいた紅葉

このようなお問い合わせフォームを作ってみよう

お問い合わせフォームの完成見本

今までの事を参考にしてお問い合わせのフォームを作ってみましょう。

入力する項目を作る

まず最初にお問い合わせに入れる項目を入力していきます、項目の中の小さな項目は後から作るので最初は大きな項目だけを入力する。

htmlファイルに定義リストdl要素を使用して記述していきます。

フォーム要素内に必要な項目を入力する

上のように記述するとブラウザにはこのように表示されます。

項目の表示画像

入力をして送信してもらう時に必ず入力をしてほしい所に「※」印をつけておきましょう、文字の後ろに直接記入するのではなく後で※マークを装飾するので<span>要素の中にclass名を付けておきます。

※印の記述要領
ブラウザの表示画像

項目毎に作成していきます

お問い合わせの内容を作る

お問い合わせの内容は定義リストのdd要素の中に、チェックボックスで数種類を選べるようにinput要素のtype属性でcheckboxを指定して項目をクリックして選択できるようにlabel要素で囲みます。

お問い合わせの無いようにチェックボックスを記述
お問い合わせの内容

名前とフリガナを作る

お名前とフリガナを入力する項目を作成します、input要素にtype属性を指定して一行なのでtext属性を使用します、必ず入力してほしい項目なのでrequiredを記述するのと入力例をpiaceholde属性を指定しておきましょう。

お名前とフリガナの記述要領
お名前
フリガナ

性別の項目を作る

性別の項目はラジオボタンで選択するようにします、input要素のtype属性にradioを指定します項目名のクリックでボタンが選択できるようにlabel要素を使います。

性別の記述要領
性別

メールアドレスの入力項目を作る

メールアドレスの項目にはinputようそにtype属性を使いemailを指定します、必ず入力してほしいのでrequiredを記述、入力例も併せてplaceholderで指定しておきます。

メールアドレスの設定の記述要領

お問い合わせ・ご質問内容を作る

お問い合わせ・ご質問内容の項目にはtextarea要素を使用し入力欄は入力文字が一行に25文字、高さが5行分を指定します。

テキストエリアボックスの作成用の記述要領
お問い合わせ・ご質問内容

記述の内容がこちら

最後まで記述をするとこのようになります。

お問い合わせフォームの完成記述要領

最後の完成形です、他にもいろんな属性を使って色んなフォームを作ってみましょう。

お問い合わせフォームの完成見本

form要素を使って様々なフォームを作ってみよう

まだまだ他にもフォームの形はあります、色んな事にチャレンジして行きましょう。

フォームをもっとカスタマイズしてユーザーに使いやすいようにする。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事