お問合せページの作成等で使われる要素 form input

なわて投稿サムネイル

スポンサードリンク

スポンサードリンク

<form>要素

<form action="送信先ファイル名.php" method="通信方法post or get">
        <!-- テキスト入力 -->
        <input type="text" name="変数名" value="入力済みにしておく文字or空" size="文字数(box幅)"/>
        
        <!-- 送信ボタン -->
        <input type="submit" name="変数名" value="送信する値"/>

        <!-- パスワード -->
        <input type="password" name="変数名" value="入力済みにしておく文字or空" size="文字数(box幅)"/>

        <!-- ラジオボタン -->
        <input type="radio" name="変数名" value="入力済みにしておく文字or空" checked />

        <!-- チェックボックス -->
        <input type="checkbox" name="変数名" value="入力済みにしておく文字or空" checked/>
        
        <!-- 複数のチェックボックス -->
        <input type="checkbox" name="変数名[]" value="入力済みにしておく文字or空" checked/>

        <!-- セレクトボックス -->
        <select name="変数名"></select>
        <option value="値" selected>ブラウザーい表示される値</option>

        <!-- テキストエリア -->
        <textarea name="変数名" cols="列数" rows="行数">入力済みにしておく文字or空</textarea>

        <!-- 隠しフィールド -->
        <input type="hidden" name="変数名" value="値" />
    </form>

form要素の属性

①action

formデータの送信先。

値にデータを受け取るサーバーサイドにある出力用のスクリプトを指定する。

<form action=”データを受取るファイル名.php”  method=”post”>

そのプログラムは、データを受け取り、メールを自動配信したり、サーバーサイドにあるデータベースに値を保存する。

②method

サーバーサイドにformデータを送信する方法を指定。

get

送信データも含めた形

ブックマークやリンクのhref属性の値として設定。

パスワードには不向き

post

getよりは表面化しない形でformデータを送信。

getより送信量が多いい。

完全な形での暗号化はされていない。

 

※暗号化された通信で送信するには、「https」での送信にする。

 

③ecctype (エンコードタイプ)

MIMEタイプを指定するための属性。

Multipurpose Internet Mali Extension

 

multipart/form-data

ファイルを送信する際は必ず指定する。

httpでファイルをアップロードする際に使うMIMEタイプ。

multipartは複数のファイルをまとめるための形式。

 

<input>要素

テキストフィールドを作成する要素

 

type属性

入力コントロールの種類を指定。

type属性の主な属性値

属性値 機能
submit 送信ボタン
buttom JavaScriptが起動するためのボタン
hidden 閲覧者には表示されないデータ
text 1行のテキスト入力欄
file 送信ファイルを選択する選択欄を設置

 

name属性

データが送信された際のクエリ名を指定

name属性とvalue属性をペアで送信することで、サーバーサイドで受取ったPHPプログラムが識別できる。

 

value属性

入力コントロールの初期値を指定

type属性値 機能
hidden
readonly
その値がそのまま送信される。
checkbox
radio
選択された項目に指定されたvalue属性の値が送信される。
指定されていない場合は、空の値が送信される。
submit
button
image
reset
value属性の値が表示されるボタン名

入力者が初期値を変更した場合には、変更後の値が送信される。

 

スポンサードリンク

スポンサードリンク