フォームを作成
このページでは、フォームの作成方法を紹介します。
フォームは、ユーザーにテキストなどを入力させて情報を送信するためのものですが、実際に送信するにはCGIが利用できるサーバーが必要となります。
このページでは、送信機能はつけずに形だけ作成します。
フォームのHTMLを記述
フォームの基本的な形は、formタグで全体を囲い、その中にinputを置いていき、それぞれにチェックボックスなどといったの役割を持たせます。
index.html
<form> <input type="○○"> <input type="○○"> <input type="○○"> </form>
type以外にも、持たせる役割によって、nameやvalue、idなどといったさまざまな設定をinputに対して行う必要があります。
このページでは、以下のようなフォームを作成してみます。
見本ページを新しいタブで開くテキストボックスを作成
まずは、一つ目の名前入力欄を作成してみましょう。
index.html
<form> 名前：<input type="text" maxlength="20"> </form>
| type="text" | inputをテキスト入力欄にする（一行） |
|---|---|
| maxlength="○○" | 入力できる最大文字数を設定 |
名前入力欄のほかに、「一言」には複数行入力できるテキストボックスがあります。
こちらはinputではなく専用の要素を使って以下のように記述します。
index.html
<form> 一言：<textarea></textarea> </form>
| <textarea> | 複数行入力可能なテキストボックス |
|---|
ラジオボタン・チェックボックスを作成
「性別」の項目には、一つのみ選択できるラジオボタン、「特技」には複数選択できるチェックボックスがあります。
index.html
<form> 性別： <input type="radio" value="女" id="g1"> <label for="g1">女</label> <input type="radio" value="男" id="g2"> <label for="g2">男</label> 特技： <input type="checkbox" value="デザイン" id="t1"> <label for="t1">デザイン</label> <input type="checkbox" value="コーディング" id="t2"> <label for="t2">コーディング</label> </form>
| type="radio" | ラジオボタン |
|---|---|
| type="checkbox" | チェックボックス |
| value="○" | 各チェック項目の値を設定 |
| <label> | ラジオボタンやチェックボックスのそれぞれの項目にラベルをつける |
| for="○" | ラベルとinputを関連付ける ○には関連づけたいinputのIDを設定する |
labelにfor="○"を設定すると、id="○"のinputと関連づきます。
つまり、ラベルをクリックしたとき、関連付けたチェック項目が選択されます。
ボタンを作成
最後に、ファイル選択ボタン、送信ボタン、リセットボタンを作成します。
index.html
<form> 画像：<input type="file"> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form>
| type="file" | ファイルを選択させます |
|---|---|
| type="submit" | フォームの内容を送信します |
| type="reset" | フォームの内容をリセットします |