フォームタグ
フォームタグの基本
フォームは、<form>〜</form>の間にテキストやボタンを配置することによって成立します。
このタグの属性にはaction、method、nameがあります。各属性の詳細は下記のとおりです。
・action−フォームに入力された情報を処理するCGIやPHPなどファイルまでのパスを入力
・method−送信方法を指定する属性で、メールアドレスの後に情報を付加して送信するgetとセキュリティ面でも有効なpostがあります。通常はpostを使用します。
・name−Javascriptを使用するときにパスとして使用します。
このタグの属性にはaction、method、nameがあります。各属性の詳細は下記のとおりです。
・action−フォームに入力された情報を処理するCGIやPHPなどファイルまでのパスを入力
・method−送信方法を指定する属性で、メールアドレスの後に情報を付加して送信するgetとセキュリティ面でも有効なpostがあります。通常はpostを使用します。
・name−Javascriptを使用するときにパスとして使用します。
<form action="../cgi-bin/form.cgi" method="post" name="form1">
※ここにフォームのパーツを配置する
</form>
※ここにフォームのパーツを配置する
</form>
テキスト
テキストのタグは、<input type="text">です。
属性には、name、size、maxlength、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・size−フィールドの横幅
・maxlength−入力可能文字数
・value−最初から入力されている文字
属性には、name、size、maxlength、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・size−フィールドの横幅
・maxlength−入力可能文字数
・value−最初から入力されている文字
<form>
<input type="text" name="text1" size="40" maxlength="30" value="最初から入力されている文字">
</form>
例
<input type="text" name="text1" size="40" maxlength="30" value="最初から入力されている文字">
</form>
例
テキストエリア
テキストエリアのタグは、<textarea></textarea>で、このタグの間に入れた文字は最初から入力されます。（入れない場合はタグ同士くっ付けて配置する）
属性にはrows、colsがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・rows−行数を指定
・cols−横のサイズを指定
属性にはrows、colsがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・rows−行数を指定
・cols−横のサイズを指定
<form>
<textarea name="text2" rows="3" cols="50">最初から入力されている文字</textarea>
</form>
例
<textarea name="text2" rows="3" cols="50">最初から入力されている文字</textarea>
</form>
例
パスワード
パスワードのタグは、<input type="password">です。
属性にはname、size、maxlengthがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・size−フィールドの横幅
・maxlength−入力可能文字数
属性にはname、size、maxlengthがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・size−フィールドの横幅
・maxlength−入力可能文字数
<form>
<input type="password" name="pass1" size="30" maxlength="20">
</form>
例
<input type="password" name="pass1" size="30" maxlength="20">
</form>
例
チェックボックス
チェックボックスのタグは、<input type="checkbox>で、最初からチェックを付けた状態にするには、checkedをタグの中に入れておきます。
属性にはname、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
属性にはname、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
<form>
<input type="checkbox" name="left" value="左" checked>左
<input type="checkbox" name="right" value="右">右
</form>
例
<input type="checkbox" name="left" value="左" checked>左
<input type="checkbox" name="right" value="右">右
</form>
例
ラジオボタン
ラジオボタンのタグは、<input type="radio">で、最初からチェックを付けた状態にするには、checkedをタグの中に入れておきます。name属性が同じものをグループとして扱い、そのグループの中から一つだけ選べます。
属性にはname、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
属性にはname、valueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
<form>
<input type="radio" name="position" value="左側" checked>左側
<input type="radio" name="position" value="中央">中央
<input type="radio" name="position" value="右側">右側
</form>
例
<input type="radio" name="position" value="左側" checked>左側
<input type="radio" name="position" value="中央">中央
<input type="radio" name="position" value="右側">右側
</form>
例
左側
中央
右側
プルダウンメニュー
プルダウンメニューは、<select></select>タグの間に、<option></option>タグをメニューの数だけ入れることによって成立します。
属性には<select>タグにname、<option>タグにvalueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
属性には<select>タグにname、<option>タグにvalueがあります。各属性の詳細は下記のとおりです。
・name−javascriptやCGI・PHPで入力情報を受け取る時に必要なフィールドの名前（同じフォーム内で名前が重ならないようにつけること）
・value−チェックされたときにプログラムファイルに送るデータ（値）
<form>
<select name="color">
<option value="">選択してください</option>
<option value="赤">赤 #FF0000</option>
<option value="青">青 #0000FF</option>
<option value="緑">緑 #00FF00</option>
<option value="白">白 #FFFFFF</option>
<option value="黒">黒 #000000</option>
</select>
</form>
例
<select name="color">
<option value="">選択してください</option>
<option value="赤">赤 #FF0000</option>
<option value="青">青 #0000FF</option>
<option value="緑">緑 #00FF00</option>
<option value="白">白 #FFFFFF</option>
<option value="黒">黒 #000000</option>
</select>
</form>
例
リストボックス
リストボックスは、上記のプルダウンメニューにコントロールキーやシフトキーを押しながら複数選択ができる機能が備わったものです。
<select>タグにmultipleを加えることにより、複数選択が可能です。
<select>タグにmultipleを加えることにより、複数選択が可能です。
<form>
<select name="color">
<option value="赤">赤 #FF0000</option>
<option value="青">青 #0000FF</option>
<option value="緑">緑 #00FF00</option>
<option value="白">白 #FFFFFF</option>
<option value="黒">黒 #000000</option>
</select>
</form>
例
<select name="color">
<option value="赤">赤 #FF0000</option>
<option value="青">青 #0000FF</option>
<option value="緑">緑 #00FF00</option>
<option value="白">白 #FFFFFF</option>
<option value="黒">黒 #000000</option>
</select>
</form>
例
送信ボタン
送信ボタンは、CGIやPHPにデータを渡すときに使用するボタンで、<input type="submit">タグです。
属性にはvalue、nameがあります。各属性の詳細は下記のとおりです。
・value−ボタンに表示させる文字
・name−複数のsubmitボタンがあるときに区別するための名前
なお、下記の例では送信ボタンとしての効果をつけていません。
属性にはvalue、nameがあります。各属性の詳細は下記のとおりです。
・value−ボタンに表示させる文字
・name−複数のsubmitボタンがあるときに区別するための名前
なお、下記の例では送信ボタンとしての効果をつけていません。
<form action="../cgi-bin/form.cgi" method="post" name="form1">
<input type="submit" value="送信">
</form>
例
<input type="submit" value="送信">
</form>
例
リセットボタン
リセットボタンは、フォームに入力された文字を元の状態に戻す（消す）ボタンで、<input type="reset">タグです。
属性にはvalueがあり、ボタンに表示される文字を入力します。
属性にはvalueがあり、ボタンに表示される文字を入力します。
<form>
<input type="text">
<input type="reset" value="クリア">
</form>
例
<input type="text">
<input type="reset" value="クリア">
</form>
例
ボタン
普通のボタンは、<input type="button">タグで、Javascriptなどでよく使用されます。このタグは、フォーム以外で使用する場合が多いですが、そのときは<form>〜</form>タグを使用せず、このタグだけで使用できます。
属性にはvalueがあり、ボタンに表示させたい文字を入力します。
属性にはvalueがあり、ボタンに表示させたい文字を入力します。
<input type="button" value="ボタン">
例
例