「HTML/フォーム」の版間の差分

削除された内容 追加された内容
ファイル選択について加筆
編集の要約なし
15 行
各部品は、inputタグの、type属性に指定した内容によって作成することができる。
=== 送信ボタン ===
<source lang="html4strict">
<input type="submit" value="ボタンテキスト">
 
<button type="submit" value="送信値">ボタンテキストまたは画像</button>
<inputbutton type="imagesubmit" srcvalue="画像のファイルパス送信値" alt="代替>ボタンテキスト"または画像</button>
 
<input type="image" src="画像のファイルパス" alt="代替テキスト">
</source>
from要素内で指定された内容を送信するボタン。クリックすると情報を送信し、form要素に指定されたaction属性の内容に基づいてページ遷移を行う。
 
23 ⟶ 27行目:
 
=== リセットボタン ===
<source lang="html4strict">
<input type="reset" value="ボタンテキスト">
 
<button type="reset">ボタンテキスト</button>
<button type="submit" value="送信値reset">ボタンテキストまたは画像</button>
</source>
form要素内の値をリセットし初期状態へと戻す。input要素で作ったリセットボタンはデフォルトであればブラウザが自動的に文字列を指定するが、その値はブラウザの種類や言語環境によって異なる。
 
=== 汎用ボタン ===
<source lang="html4strict">
<input type="button" value="ボタンテキスト">
 
<button type="button">ボタンテキスト</button>
<button type="resetbutton">ボタンテキスト</button>
</source>
単体では何も起こらないボタン。送信もリセットも行わない。JavaScriptのonclick属性などと組み合わせて利用するのが一般的である。
 
=== ファイル選択 ===
<source lang="html4strict">
<input type="file" name="名前" accept="MIMEタイプ">
</source>
CGIでローカルファイルをサーバーへ送信するときに使用。ローカルファイルを選択するフォームを表示する。フォームのデザインやボタンテキストなどはOSやブラウザに依存。accept属性で選択可能なファイルタイプを「,」区切りにして指定することが出来るが、サポート環境は少ない。なお、この機能を利用する場合はform要素のmethod属性にpostを、enctype属性にmultipart/from-dataを設定する必要がある。
 
[[w:Internet Explorer|Internet Explorer]]ではこのフォームから情報を送信したとき送信後に表示されるページがキャッシュされず、一度ページ遷移を行うと元のページをブラウザバックで表示できないと言う問題が存在する。
 
=== 一行テキストボックス ===
<source lang="html4strict">
<input type="text" value="初期値" name="名前" maxlength="最大文字数">
</source>
改行を含まない文字列を表示させるフォーム。maxlength属性で最大文字数を指定でき、指定しなかった場合は無制限となる。
 
=== 複数行テキストボックス ===
<source lang="html4strict">
<textarea cols="横の文字数" rows="縦の文字数" wrap="on">デフォルト
文字列</textarea>
</source>
改行を含んだ文字列を表示できるフォーム。掲示板やメールフォームなどに文章を送信する場合やウェブサイトの更新履歴を表示する目的で利用される。デフォルトでは右端に来たとき自動的に文字列が折り返されるが、wrap属性をoffにした場合右端に来ても折り返しが行われることはなくそのまま横に続く。
 
=== パスワード用テキストボックス ===
<source lang="html4strict">
<input type="password" name="名前" value="初期値">
</source>
認証などでパスワードを入力するためのフォーム。入力された文字列がアスタリスクなどに置き換えられて表示される。
 
=== 隠しフォーム ===
 
=== チェックボックス ===