<input> 【フォームを構成する部品を作成する】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op8] [Op9] [Ns6] [Ns7]

<input>タグは、入力フォームを作成する際に使用します。<form>〜</form>の間に色々なパーツを埋め込む事で、様々な働きを行います。<form>を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する事が近道となります。

与えられる属性

type="text"
一行テキストエリアを作成します。長文を入力させたい場合には<textarea>タグを使用します。

type="password"
パスワード入力欄を作成します。入力した文字が伏字になります。ただし送信するデータ自体は通常の扱いと同様です。

type="checkbox"
チェックボックスを作成します。項目を複数選択するような個所に使用します。
あらかじめチェックした状態にする場合は、checked="checked"を追加します。

type="radio"
ラジオボタンを作成します。一箇所しか選択出来ないような項目に使用します。
あらかじめチェックした状態にする場合は、checked="checked"を追加します。

type="file"
ファイルを送信するために、ファイル名の入力エリアと参照ボタンを作成する際に使用します。

type="hidden"
画面上には表示されないデータの受け渡しをする際に使用します。

type="submit"
送信ボタンを作成します。

type="reset"
リセットボタンを作成します。入力した情報を全てクリアして初期状態に戻します。

type="button"
汎用的なボタンを作成します。

type="image"
画像のボタンを作成します。src="ファイル名"、alt="代用テキスト"が必須項目です。

name="値"
送信するデータに名前を付けます。

value="値"
実際に送信する値にあたります。
この値を受取るためのプログラムがあらかじめ用意されている必要があります。

<input>の使用例

ソース

<form action="http://#####.com/form.php" method="post">
お名前<br>
<input type="text" name="name" size="40"><br>
性別<br>
<input type="radio" name="seibetsu" value="m" checked="checked">男
<input type="radio" name="seibetsu" value="w">女<br>
端末<br>
<input type="checkbox" name="tanmatsu" value="pc" checked="checked">PC
<input type="checkbox" name="tanmatsu" value="i">Docomo
<input type="checkbox" name="tanmatsu" value="e">au
<input type="checkbox" name="tanmatsu" value="s">SoftBank<br>
血液型<br>
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select><br>
感想<br>
<textarea name="kanso" rows="4" cols="40">感想があれば是非書いて下さい。</textarea>
<br />
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>

表示すると

お名前

性別

端末
PC Docomo au SoftBank
血液型

感想

入力フォーム 関連項目

<form> フォームを作成する 
<input> フォームを構成する部品を作成する 
<textarea> 複数行のテキストエリアを作成 
<select> セレクトボックスを作成する 
<option> セレクトボックスの選択肢を作成する 
<optgroup> セレクトボックスの選択肢をグループ化 
<fieldset> フォームの入力項目をグループ化する 
<legend> 入力項目グループにタイトルを付ける 
<label> フォームの入力項目と項目名を関連付ける 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img