ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

10.フォームを扱う

フォーム

次のようなフォームを作ってみましょう。

<アウトプットイメージ>

名前:

備考:

(注: 送信はできません)

<ソースコード>

<form>で囲まれた部分が送り先に送られます。

このフォームデータの送り先を指定しているのがaction属性です。

今回は存在しない送り先を指定しているのでボタンを押しておエラー表示されてしまいます。

method属性は”post”もしくは”get”を指定します。

何も書かないとデフォルトでは”post”になります。

action属性とmethod属性についての詳しい内容は、Java Servlet研修の中でお話します。

テキストフィールド

<アウトプットイメージ>

 
 <ソースコード>

<input>を使い、type属性で“text”を指定します。

name属性を付けることでデータの送り先でこの”namae”を変数として受け取ることができます。

ここでは名前なので単純に日本語で”namae”としています。

テキストエリア

<アウトプットイメージ>
<ソースコード>

先ほどのテキストフィールドとは違い、

複数行書く事ができるフォームをテキストエリアと言います。

“rows”で表示行数を、“cols”で一行当たりの最大文字数(列数)を指定することができます。

それぞれ、rows(行),columns(列)の略です。

 

送信ボタン

<アウトプットイメージ>

 
<ソースコード>

 

送信ボタンを作るには、

type属性で”submit”を指定します。

ボタン上のテキストはvalue属性で指定できます。

今回は”送信”としました。

クリアボタン

<アウトプットイメージ>

 
<ソースコード>

 

クリアボタンを作るには、

type属性で”reset” を指定します。

ボタン上のテキストはvalue属性で指定できるのは送信ボタンと同じです。

 

今回は「フォームのテキストフィールド、テキストエリア、送信ボタン、クリアボタン」について学びました。

次回は、「フォーム部品で入力しやすく」する方法について学んでいきましょう。

 

新人エンジニア向けHTML講座の一覧に戻る