【HTML】formタグでユーザー入力用のフォームを作る

このページについて

このページではHTMLで使えるformタグの機能と使い方を解説しています。

formタグ

formタグはユーザーが入力するための入力フォームを作成する時に使われます。このタグは扱う事ができるタグ自体が多く、さらには受け取る側のサーバーやファイルの処理も必要と、なかなかに難易度の高いタグとなります。

とは言え基本の使い方だけならばすぐに身につける事ができます。今回はそのあたりを中心に解説します。

formタグの書き方

formタグは必須に近い属性はあるものの、必ず書かなければならない属性というものは無かったりします。

<form>
中略
</from>

このように書くだけでOKだったりします。ただしこれだと全く意味をなさないので、まずはformタグで使う事ができるタグの紹介をしつつ、その書き方を簡単に書いていきます。

buttonタグ

buttonタグはその名の通り、ボタンを表示します。これはクリック可能で、type属性次第ではデータを送信したり入力をリセットしたりすることもできます。

<form>
<button>ボタン1</button>
<button>ボタン2</button>
</form>

ボタンが2つあるフォームにはなりますが、これだけだとまだ意味がありません。

inputタグ

ユーザーが名前やコメント、メールアドレスなんかを入力するためのエリアが、このinputタグになります。

<form>
<input>
</form>

inputタグは終了タグが不要なのでこのような書き方になります。付与する属性次第では色々と変化させる事ができる部分でもあるので、それらはinputタグの解説ページを参考にしてみてください。

labelタグ

labelタグはそんなの通り、ラベルです。ここでいうラベルとはinputタグで入力する部分に何を入力するかを示したもの、という扱いになります。

<form>
<label>名前</label>
<input>
</form>

このように書くと、名前の隣に入力欄が出てくるのでユーザーからすれば何を入力すればいいのかは、すぐにわかりますね。

textareaタグ

textareaタグはinputタグよりも長いテキストを入力する時に使われるタグになります。簡単に言えばinputは短い・一行程度で済むものを、textareaでは長い・複数行に渡るテキストを扱うってイメージです。

<form>
<textarea rows="4" cols="50"></textarea>
</form>

rowsやcolsなどの属性に関してはtextareaタグの解説ページを参照してください。これは主にお問合せ内容だったり、コメントの本文に使われるものです。

selectタグとoptgroupタグとoptionタグ

selectタグはドロップダウンリストを作成するために使われます。このタグのみname属性とid属性が必須なんですが、それはselectタグの解説ページを参照してください。

そしてそのselectの中で使うのがoptionタグとoptgroupタグです。optionタグは各選択項目であり、optgroupタグはその選択項目を小分けしてまとめる役割を持っています。

<form>
<select name="リストの名前" id="li1">
<optgroup label="小分けリストの名前">
<option value="v1">項目1</option>
<option value="v2">項目2</option>
</optgroup>
<optgroup label="小分けリストの名前2">
<option value="v3">項目3</option>
<option value="v4">項目4</option>
</optgroup>
</select>
</form>

filedsetタグ

fieldsetタグはformの関連する内容をグループ化し、その要素の周りに箱形の線を描画する機能を持っています。

<form>
<fieldset>
中略
</fieldset>
</form>

outputタグ

outputは計算結果を出力するという少し変わったタグです。

<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
<input id="a" type="range" value="10">
<input id="b" type="number" value="20">
<output id="c" for="a b">
</form>

これだけは少し複雑かつ長いんですが、それだけややこしいタグだったりします。

まずformにoninput属性を付与します。ここでは簡単に何を書いたかだけを書くと「cのvalueはid(a)のvalueとid(b)のvalueを足したものにします。」っていう書き方になっています。

次にinputの1つ目はrangeを指定していますが、これは横方向に伸びるゲージです。これをマウスでぐりぐり移動させると数が変化します。

inputの2つ目はシンプルに数字を受け付けるものです。

そして最後にoutputですが、ここでfor属性を使ってaとbを扱いますよっていうをします。そしてformのところで書いたoninput属性がここで仕事します。つまりは書いた内容がここで反映されます。

これはJavaScriptやPHPなど書かなくてもリアルタイムで数値が変わるため、一度試してみてはいかがでしょうか。

formタグで使える属性一覧

formで使う事ができる属性をざっと紹介していきます。詳しい解説はそれぞれのページを参照してください。

ざっと書きましたが、中でも必ず知っておいてほしいのがname属性・method属性・target属性あたりですかね。この辺りは他のタグでも使いますし、中には扱い方を間違えるととんでもないミスにつながることもあります。

まとめ

formは色々なタグや属性が扱えて、慣れないとどれがどこと繋がっているか混乱しがちです。まずは超簡単なフォームから作ってみて、そこから徐々に形を整えたり機能を増やしていくのをおすすめします。

HTMLの基礎

HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。

HTMLタグで押さえておきたいポイント3選

HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。

HTMLタグと属性一覧

HTMLタグと属性の一覧です。

tableタグ生成ページ

tableタグの基本形を生成できるページです。

ulタグ・olタグ生成ページ

ulタグとolタグの基本形を生成できるページです。