HTML フォーム作成で基本の要素や属性の使い方を練習

HTML フォーム作成で基本の要素や属性の使い方を練習

HTMLでフォームを作成するときに必要なタグや要素、属性の使い方を説明しながら私自身も練習しておこうと思います。

HTMLでフォーム作成するだけでも、タグや属性がけっこう登場するので、タグだか属性なんだか間違えそうになるかもしれませんが、慣れるまでじっくり覚えていきたいです。

基本のフォーム作成です。

 

HTMLでフォーム作成

 

お問い合わせフォームの必須項目になる以下の3項目と送信ボタンが、どんなフォーム作成にも必要なのかなと思います。

 

  • 名前
  • メールアドレス
  • お問い合わせ内容
  • 送信ボタン

 

フォームにとって必須な項目がHTMLでフォーム作成をする基本形になるのですが、HTMLを書いてみると次のメールフォームのコードになります。

 

<div>
 <form method="post" action="sample">
  <p>お問い合わせ</p>
  <p>お名前:<br><input type="text" neme="contactname"></p>
  <p>メールアドレス:<br><input type="text" name="email"></p>
  <p>お問い合わせ内容:<br><textarea rows="10" cols="50"></textarea></p>
  <p><input type="submit" value="送信する"></p>
 </form>
</div>

 

サンプルフォーム

 

お名前:

メールアドレス:

お問い合わせ内容:

 

名前やメールアドレス、そしてお問い合わせ内容を入力できるフォームが部品になり一つのフォームにまとまるのですが、これらの入力フォーム部品を作成するためにフォームの親要素を記述していきます。

 

formタグで親要素の作成

 

フォームの親要素を作成します。

 

<form></form>

 

HTMLのformタグを使用して、フォームの親要素が作れます。form開始タグと閉じタグを記述。

form要素は「interactive form(インタラクティブフォーム)」の略でHTMLでフォームを表す要素。

formに必要なタグや内容は全てform要素の中に入れて記述します。

そしてform要素内には別のform要素は配置できないことに注意です。

 

action属性を記述する

 

次にフォーム作成する親要素にしたformタグの開始タグに属性を付けていきます。

 

<form action=”#” method=”post”>

 

まずはaction属性を記述。

action属性はフォーム入力内容を送信ボタンで送信される先のURlを指定します。#の部分がURlを指定するところです。

送信先URLは、お問い合わせフォームを実際に処理するプログラムのURlにするのですが、CGIやPHPプログラムのURIを指定します。

 

method属性を記述(getかpost)

 

次にmethod属性の記述です。

method属性には「get」か「post」を指定します。

 

 

getとpostは送信のために必要なもので、HTTPメソッドというものの一部です。

ユーザーが私たちのサイトからお問い合わせをするために作成するフォームなので、それぞれのお問い合わせフォームを作成してるサイトからサーバーへリクエストするときにHTTPメソッドを選んで通信をします。

先にform開始タグの中にaction属性を記述してプログラムの処理をするURlを指定する説明をしましたがmethod属性は、このときの送信(リクエスト)の種類です。

 

  • GETはURLに付加してリクエストします。
  • POSTはbodyに含めてリクエストします。

 

Advertisement

 

そしてGETはURLに直接付加するので目でパラメータを見ることができます。

POSTはbodyに含めるので目で見ることはできません。

 

一般的にpostを指定してお問い合わせフォーム作成が多いのかなと思います。

 

メールフォーム作成はinput要素の属性を使用

 

次はフォームの中に入力フォームの部品を作成します。

代表的な入力フォームは、名前の入力やお問い合わせ内容を入力できるテキストフォーム、パスワード入力なんかもありますね。

 

それぞれに必要なフォームの部品を組み立てていくときにはHTMLの「input要素」を使用します。

 

要素名意味・役割
inputフォームの部品を表す

 

 

<form method="post" action="sample">
 <input type="text" neme="name">
 <input type="submit" value="送信する">
</form>

 

1行目がform要素を記述した部分で、2行目が下記のようなinput要素でテキストエリアを表示しています。

 

サンプルフォーム


 

3行目は2行目の入力フォームに対しての送信できるボタンの記述です。

この記述のときはinput要素の属性を追加していくことでフォーム部品が作成できます。

 

  • type属性:部品の種類を指定する
  • name属性:部品の名前を指定する
  • value属性:送信する値(ボタンの場合はボタンに表示される文字)を指定する

 

上記3つのinput要素に使う属性は重要です。

一つずつ調べたこともありますが以下から説明していきます。

 

type属性

 

input要素にtype属性を指定するとどんな入力フィールドにするかを作成できます。

 

<input type=”text”>

一番基本的なテキストフィールドです。

 

type属性の値をtext指定すると改行のない一行だけ入力できるテキストフィールドになります。そしてtype属性の指定がない場合はtextが指定されます。

お問い合わせフォームで使用することが多い、メールアドレスとパスワードもinput要素のtype属性の値を指定すれば、フォーム部品が作成できます。

 

メールアドレスは「email」を値に指定

<input type="email" placeholder="hoge@sample.com">
<input type="submit" value="送信">

 

パスワードは「password」を値に指定

 

<input type="password" maxlength="8">

 

パスワードのフォーム部品は、どこかのサイトで使用したことがあるかもしれませんが、入力フォームに文字を入力すると黒丸で表示されるフィールド作成ができます。

 

HTMLのinput要素のtype属性に指定できる属性値は種類が多いので一覧にしてみました。

 

 

 

name属性

 

name属性は要素の名前を指定します。今回はinput要素の名前を指定してます。

送信されたフォームでサーバーがフィールドを識別するために一番よく使われます。

 

例えばform要素の中で

 

<input type="text" name="name" placeholder="例:さんぷるたろう">
<input type="submit" value="送信">

サンプルフォーム


 

上記の名前を入力するフォームがあるとします。

名前の入力フォーム完了後にユーザーが送信ボタンで送信したら、ブラウザからフォームのデータがサーバーへ送信されます。

そしてサーバー側では「nema属性がnameだからネームとして処理しよう」とname属性で処理をすることになります。

このようなサーバー側での処理に必要なのがname属性です。

 

value属性

 

input要素のvalue属性はinput要素の値を指定する属性です。

テキスト入力欄では初期の入力値、送信ボタンなどではボタン名を表すことができます。

フォームの入力を簡単にするために、可能なところに初期値を設定できます。

古いタイプのブラウザだと何らかの初期値が選択ができないことがあるようで、そのためにも初期値を使用することもあるようです。

value属性あんまり完全理解できてないのですが、ようは入力コントロールする初期値の指定ってことかと思いました。

 

placeholder属性

 

placeholder(プレースホルダ)とは「実際のものに変わって現れるもの」を意味します。

input要素で名前の入力だとしたらplaceholderの記述は以下のようになります。

 

<input type="name" name="name" placeholder="プレースホルダー">

 

お問い合わせしたいユーザーが入力フォームに入力するときにplaceholderで記述した内容が入力例として一目で分かるような使い方ができます。

 

Advertisement

 

コメントフォーム作成はtextarea要素を使用

 

form要素の中にお問い合わせの内容を入力してもらうためにコメントフォームを作成します。

使用するHTMLタグは「textarea」です。

 

お問い合わせ内容:<br>
<textarea name="otoiawase" rows="5" cols="40"></textarea><br>
<input type="submit" value="送信する">

サンプルフォーム

お問い合わせ内容:


 

textareaは複数行のテキストを入力することができます。一行の入力のtextとは違い複数行なのでお問い合わせ内容の入力向きな要素です。

このtextarea要素はcols属性をつけて値を指定するとテキストエリアの入力幅を指定できます。

そしてrows属性をつけるとテキストエリア入力欄の高さが指定できます。

上記のHTMLコードは、入力欄の高さ「rows=”5″」テキスト入力幅「cols”40″」にしてみました。

 

送信ボタン作成はsubmitを指定する

 

<input type="submit" value="送信する">

サンプル送信ボタン

 

<input>タグのtype属性の値にsubmitをつけると、フォームの送信ボタンを作成できます。

記事の冒頭でformタグで親要素を作成したときにaction属性でフォーム入力内容を送信ボタンで送信される先のURLを指定しました。

この入力送信ボタンをクリックすると入力した内容がaction属性で指定したURLに送信されます。

 

label要素の使い方

 

labelを使用するとラベルテキストと入力部品を関連付けることができます。

関連付けるとはどういうことかというと、例えば名前を入力するフォームがあるとします。

項目名に「お名前」があって、下か横に入力フォームがあるわけですが、このときにlabel付き項目名の「お名前」をクリックするとお名前のフォーム部品に入力ができるというものです。

labelの使い方は2種類あります。

 

<label>名前:<input name="name"></label>

 

上記は項目名と部品を<label>で囲んでしまう方法です。

これは2種類あるうちの簡単な記述方法です。

もう一つはfor属性とid属性を使用です。

 

<label for="username">名前:</label><input name="name" id="username">

 

labelタグのfor属性の値には関連するid属性と同じものをつけます。

項目名を囲み、さらにfor属性で関連付けたいinputのid名を指定し呼び出すことで関連できます。

 

label要素で使うfor属性とforに紐付けるlabelのidについては下記の記事でラジオボタンをCSSでデザインしながら書いています。

 

 

ということで、HTML フォーム作成で基本の要素や属性の使い方を練習がてら一つずつ勉強してみたので参考になる部分があれば良きかと思います。

HTMLカテゴリの最新記事