生徒WEBページに入力フォームを作成したいです
先生HTMLで入力フォームを作成する方法を説明します
お問い合わせフォームやアンケートといった入力を求めるWEBページを作るには、HTMLフォームを使用します。
- HTMLで入力フォームを作る方法
<form>タグでHTMLフォームを作成する
入力フォームは<form>タグで作成します。
<form>タグの内側にフォームの内容を記述していきます。
See the Pen form by mik20621 (@mik20621) on CodePen.
<form>タグでよく使う属性
<form>タグは属性をいくつか指定して使用することが多いです。
<form>タグでよく使用する属性は以下になります。
| 属性 | 説明 |
|---|---|
| method | フォームの情報をサーバーへ送信する方法（ほとんどの場合postまたはget） |
| action | フォームの情報を送信するサーバーのURL（例：https:/example.com/form.php） |
HTMLフォームで使用するidとnameとvalueは混同しやすいですが以下の違いがあります。
| 項目 | 説明 |
|---|---|
| id | JavaScriptやCSSで要素を指定する時などに使用（ベージ内で重複させない） |
| name | 要素の内容をPHPなどにパラメータとして渡す時の名前（name=value) |
| value | 要素に入力された値（name=value) |
inputタグはいろいろな形式の入力項目を表示できる
inputタグは入力項目を表示するのに使用します。type属性の値を変えることで様々な形式の入力項目を表示できます。
type=”button”
type="button"とするとボタンを表示します。
| 属性 | 説明 |
|---|---|
| value | ボタンに表示する文字を指定します。 |
See the Pen button by mik20621 (@mik20621) on CodePen.
type=”checkbox”
type="checkbox"とするとチェックボックスが表示されます。
See the Pen checkbox by mik20621 (@mik20621) on CodePen.
type=”color”
type="color"と書くとカラーピッカーを表示します。
See the Pen color by mik20621 (@mik20621) on CodePen.
type=”datetime”
日付の入力欄を表示して、クリックするとカレンダーが表示されます。
See the Pen date by mik20621 (@mik20621) on CodePen.
type=”file”
アップロードするファイルを選択するためのボタンを表示します。
ボタンを押すとファイルを選択するダイアログが表示されます。
よく使用する属性
| 属性 | 説明 |
|---|---|
| accept | 選択できるファイルの種類を指定します。 |
| multiple | 指定すると複数のファイルを選択できるようになります。 |
See the Pen file by mik20621 (@mik20621) on CodePen.
type=”password”
入力した文字が*で表示されるパスワード入力欄を表示します。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
type=”text”
type="text"とすると1行の入力欄が表示されます。
See the Pen Untitled by mik20621 (@mik20621) on CodePen.
type=”submit”
type="submit"でフォームの内容を送信するボタンを表示します。
See the Pen submit by mik20621 (@mik20621) on CodePen.
labelタグは入力項目の見出しを記述
labelタグは入力項目の見出しを書くのに使用します。
見出しとして表示する文字を<label></label>で囲みます。
| 属性 | |
|---|---|
| for | labelの文字のクリックでも入力項目が反応するようにinputタグなどのidを指定します。 |
See the Pen label by mik20621 (@mik20621) on CodePen.
buttonタグはボタンを表示する
buttonタグはボタンを表示します。
- buttonタグは
:before:after疑似要素が使用できるのでinput type="button"よりもさまざまな装飾ができますが、ボタンの機能に差はありません。
selectタグは選択リストを表示
selectタグはリストを表示します。
| 属性 | 説明 |
|---|---|
| size | 表示する項目数を指定します。指定しない場合size="1"と同じコンボボックス形式になります。 |
| multiple | 指定すると複数選択できるようになります。WindowsではCtrlやShift、MacではCommandやShiftで複数の項目を選択できます。 |
See the Pen select by mik20621 (@mik20621) on CodePen.
textareaタグは複数行の入力欄を作成
textareaタグは、複数行の入力欄を表示するにはを使用します。
See the Pen textarea by mik20621 (@mik20621) on CodePen.