form
- ショッピングサイトやアンケート等ユーザーの情報を取得する際に使用
formタグにはactionとmethodが必須
<form action="データの送り先URI" method="フォーム送信時に使用するHTTPメソッド">
【methodの値の種類】
| 値 |
説明 |
| post |
フォームのデータはボディに収めサーバーに送信 |
| get |
フォームのデータは'?'をセパレーターとしてactionのURIに追加。そのURIをサーバーに送信 |
| dialog |
フォームがdailog要素の中にある場合に使用、送信するとダイアログが閉じる |
input
入力欄を作成するタグ ( 1行 )
<input type="入力欄の種類を指定">
type属性の値
| 値 |
表示される内容 |
| text |
指定しない既定の形式 |
| hidden |
画面上には表示されないが値はサーバーに送信される |
| search |
単一行の検索入力欄 |
| password |
入力値を隠す1行入力欄 |
| tel |
電話番号の入力欄 |
| url |
URLの入力欄 |
| email |
メールアドレスの入力欄 |
| button |
プッシュボタン valueの値(既定は空)を表示 |
| checkbox |
チェックボックス |
| radio |
同じnameの値を持つ選択肢の中から一つの値を選択できるラジオボタン |
| file |
ファイルを選択するコントロール acceptを使って選択するファイル形式を定義できる |
| submit |
送信ボタン |
| image |
画像の送信ボタン srcで定義された画像を表示 altで画像が表示されない時に代わりに表示される文字を指定 |
| reset |
リセットボタン |
| month |
年と月の入力欄(コントロール) |
| date |
日付(年、月、日)の入力欄(コントロール) |
| week |
年と週番号の入力欄(コントロール) |
| time |
時刻の入力欄(コントロール) |
| datetime-local |
日時(年、月、日、時刻)の入力欄(コントロール) |
| number |
数値の入力欄 |
| range |
範囲のウィジェットを表示 既定では中央の値になる minとmaxの組み合わせで値の範囲を定義 |
| color |
色を指定するコントロール |
inputの属性
| 属性 |
値 |
説明 |
| type |
上記参照 |
部品の形式を指定 |
| name |
文字列 |
部品の名前を指定 |
| value |
文字列 |
部品の初期値を指定 |
| size |
数値 |
部品の大きさ |
| min |
|
最小値 |
| max |
|
最大値 |
| height |
|
高さを指定 |
| width |
|
幅を指定 |
| maxlength |
数値 |
入力できる最大文字数を指定 |
| checked |
(checked) |
チェック(選択)された状態にする |
| disabled |
disable |
部品を無効化 |
| readonly |
|
読み込み専用となり編集不可にする |
| accept |
(カンマで区切ることで複数指定可能) |
受け入れるファイルの種類を指定 |
| src |
URI |
表示する画像のURIを指定 |
| alt |
テキスト |
代替えテキスト |
| align |
top,middle,bottom,left,right |
表示位置を指定 |
| autocomplete |
on,off等 |
入力候補を提示して入力内容を自動補完 |
| autofocus |
|
自動フォーカスを指定 |
textarea
テキスト入力欄作成 ( 複数行 )
| 属性 |
説明 |
| cols |
１行の文字数を指定(入力欄の幅が変化) |
| rows |
行数を指定(入力欄の高さが変化) |
| maxlength |
入力できる最大文字数 |
| readonly |
選択のみ可能/部品変更不可 |
| disabled |
選択不可/部品変更不可 |
buttonタグ
- inputタグで作成するボタンと機能的には同じ
- ボタン上に指定したテキストを表示させたり、画像を表示させたり、それらを組み合わせたりできる
- type属性でsubmit,reset,buttonを指定。初期値はsubmit
| 属性値 |
説明 |
| submit |
送信ボタン |
| reset |
リセットボタン |
| button |
汎用ボタン |
select
| 属性 |
説明名 |
| size |
行数 |
| multiple |
複数の項目を選択可能にする |
| disabled |
部品・選択変更不可 |
option
| 属性 |
説明 |
| value |
送信値 |
| selected |
選択状態にする |
| disabled |
部品・選択不可 |
<select size="1" name="hoge">
<option selected value="hoge">hoge<option>
<option value="hoge">hoge</option>
<option value="hoge">hoge</option>
</select>
