HTMLフォームは、さまざまなタイプのユーザー入力を受信するために使用されます。
2。フォームの作業メカニズム3。フォーム定義(<form> </form>タグ)HTMLフォームは、ユニットユニット要素を含む領域です。フォームには、テキストフィールド、チェックボックス、シングルセレクションボックス、提出ボタンなどの入力要素を含めることができます。フォームには、メニュー、テキストアレア、フィールドセット、凡例、ラベル要素も含まれます。 <form>要素はブロックレベルの要素であり、前後に割引が生じることに注意してください。
<form action = login.do method = post> <! - form elements-> </form>4。フォーム属性
アクション:フォームが送信されたときにフォームデータが送信される場所を参照してください。アクションは次のとおりです。最初に、URL(絶対URL/相対URL)は通常、サーバーのプログラムを指します。プログラムは、対応する処理のためにフォームで送信されたデータ(つまり、テーブルユニットの要素値)を受信します。たとえば、<form action = http://www.xxx.com/login.do>、ユーザーがこのフォームを送信すると、サーバーは一般的なWebサイトhttp://www.xxx.com/一般プロセスプログラムを実行します。次に、メールのコンテンツを電子メールの形式で送信するために、MailToプロトコルのURLアドレスを使用します。この状況はまれです。これは、訪問者がコンピューターのコンピューターにメール送信プログラムをインストールして正しく設定する必要があるため、まれです。第三に、空の値は、アクションが空であるか、書かれていない場合、現在のページに送信されることを意味します。
方法:この属性は、ブラウザがフォームのデータをサーバー処理プログラムに送信する方法を定義します。メソッドの値に関しては、最も一般的に使用されるのはget and postです。まず、GETモードでフォームデータを送信します。これは、各フォームのフォーマット要素とそのデータを添付します、GETによって送信されるデータの量は、一般に1kb未満に制限されています。次に、POSTメソッドを使用して、ブラウザはFormデータをHTTPリクエスト本文の一部としてサーバーに送信します。一般的に、POSTメソッドによって送信されるデータは、HTML標準に従って、Formのサーバープログラムがサーバーに保存されているデータを変更しない場合、GETメソッドによって送信されるデータの量よりも大きくなります。 GETメソッド(クエリなど)を使用する必要があります。フォーム処理の結果がサーバーに保存されているデータ(追加、削除、変更など)を採用する必要があります。第三に、他のメソッド(ヘッド、プット、削除、トレース、またはオプションなど)。実際、最初のHTTP標準では、さまざまな操作に対応する方法を指定しましたが、それらの多くは後で観察されませんでした。
ターゲット:この属性は、アクション属性で指定されたURLによって返されるURLの結果をどこで指定しますか。値は_blank(新しいウィンドウで開く)、_ sel(同じフレームワークで開く、デフォルト値)、_ parent(親フレームで開く)、_トップ(ウィンドウ全体で開く)、フレームネーム(指定された指定されています中国で開いているフレームワークフレーム)。
タイトル:ウェブサイトの訪問者のマウスがフォーム上の任意の位置に配置されたときに、小さなブイによって表示されるテキストを設定します。
enctype:サーバーに送信する前にフォームデータをエンコードする方法を指定します。値:デフォルト値は、サーバーに送信する前に、アプリケーション/x-www-form-urlencodedです-data:文字コードはありません。ファイルアップロード制御を含むフォームを使用する場合、この値を使用する必要があります。
名前:フォームの名前。 ID属性の違いは、サーバーとの通信中に使用される名前であることに注意してください。 。
2。テーブルユニット要素1。シングルテキストボックス<入力タイプ=テキスト/>(入力のタイププロパティのデフォルト値はテキストです)<入力型=テキスト名= name/>
以下は、シングルラインテキストボックスの主な属性です。
<入力タイプ=パスワードname = name/>3。シングルボタン<入力タイプ= Radio/>
使用方法:異なるラジオの名前を持つ単一の選択ボタンを使用して、異なる値を設定します。ラジオボタンの要素値は、フォームが送信された場合、選択したアイテムの値と名前が詰め込まれ、値が表示されないことに明示的に設定されます。
<入力タイプ=無線名=性別値=男性/> <入力タイプ=ラジオ名=性別値=女性/>4。チェックボックス<入力タイプ=チェックボックス/>
Check Buttonグループ、つまり、同じ名前の同じチェックボタンのセットを使用して、チェックボタンテーブルユニットの要素の値は、式属性によって明示的に設定されます名前はパッケージ化され、エッセンスに送られます复选框的チェック済み属性表示是否被选中、<入力タイプ=チェックボックスチェック />> <入力タイプ=チェックボックスチェック= checked />(推荐)チェックエッセンス
<入力タイプ=チェックボックス名=言語値= java/> <入力タイプ=チェックボックス名= LAINGAGE値= c/> <入力タイプ=チェックボックス名= LAINGAGE VA lUE = C#/>5。非表示ドメイン<入力タイプ= hidden/>
隠しドメインは通常、ユーザーに表示する必要のないサーバーに情報を送信するために使用されます。
<入力型=非表示name = hidden domain/>6。ファイルアップロード<入力タイプ=ファイル/>
ファイルを使用すると、formのenctypeをMultiPart/form-dataに設定する必要があり、メソッド属性はpostです。
<入力名= uploadedfile id = uploadedfile type = file size = 60 accept = text/*/>7。Box<elect>タグを引く
<select>ラベルリストボックスを作成します。<option>ラベルリスト項目を作成します。<select> nested <option>を使用して、一連のオプションに一連のオプションを共同で提供します。
選択するオプションを設定します:<オプション選択> beijing </option>または<option select = selectd> beijing </option>(推奨方法)は、選択項目として設定できます。選択を達成する方法、<オプション値= -1> -not selected- <option>を追加し、選択されていないと見なされた選択されたIF-1で選択された選択された値をプログラミングします。
Select Groupオプションは、グループ自体を選択することはできません。
<select>マークと複数の属性を選択できます(CTRLキーを押します)
<name = country size = 10> <optgroup label = africa> <option value = gambia> gambia </option> <option value = madagascar </option> <option> e = nam> namibia </option> </optgroup > <OptGroup Label = europe> <Option Value = fra> france </option> <option Value = russia </option> <option value = uk> uk> uk> uk </option> tgroup> <optgroup label = North America> <オプション値= can> canada </option> <option value = mex> mexico </option> <option value = usa> usa </option> </oplct>8。Multi -line Text <Textarea> </textarea>
Multi -line Text <Textarea>マルチラインテキストを入力できるテキストボックスを作成します。 、ブラウザがデフォルトのディスプレイを取得しないように指定されていません。
<textarea name = textareAcontent行= 20色= 50>マルチラインテキストボックスの初期表示コンテンツ</textarea>9。<ラベル> </label>ラベル
<入力型=テキスト>の前に変更するために通常のテキストを書くことができますが、Modifierテキストをクリックすると、入力はフォーカスを取得しませんが、Label </label>;、Alt+を押しますu(理解)。 AccessKey = u、ラベルの別の属性。注:変更されたコントロールに一意のIDを設定します。 <label> </label>の2つのラベルは、<入力型= Radio/>および<入力型= Checkbox/>に非常に役立つと思います。
<入力タイプ=無線名=セックスID =男性値= 0チェック=チェック=チェック /> <ラベルfor =男性>男性< /law> <入力タイプ=ラジオname = fmale値= 1 /> <ラベル= fmale>女性</label> <入力タイプ=ラジオname = sex id = secret value = 2/> <label for = secret> comfidential </label>10。<FieldSet> </fieldset>ラベル
Fieldsetタグは、コントロールをエリアのコントロールを分割し、より定期的に見せます。
<FieldSet> <Legend> Hobbies </Legens> <入力タイプ=チェックボックス値=バスケットボール/> <入力タイプ=チェックボックス値=マイル登山/<入力タイプ=チェックボックス値=読書/>> </fildset>11。[Submit Button <入力タイプ=送信/>
ユーザーが<inputt type = submit/>で指定されたサーバー処理プログラムをクリックすると、フォームデータは、<form>ラベルのアクション属性属性によって指定されたサーバー処理プログラムに送信されます。中国のIEに基づくデフォルトのボタンテキストは、Valueプロパティ変更ボタンの表示テキストです。
<入力タイプ=送信値= submit/>12。リセットボタン<入力タイプ=リセット/>
ユーザーが<入力型=リセット/>ボタンをクリックすると、フォームの値が初期値にリセットされます。ユーザーがフォームを送信すると、リセットボタンの名前と値はサーバーに送信されません。
<入力タイプ=リセット値=リセットボタン/>13。通常のボタン<入力タイプ=ボタン/>
通常、通常のボタンはクリックするために使用されてスクリプトコードを実行します。
<入力型=ボタン値=通常のボタン/>14。画像ボタン<入力タイプ=画像/>
画像ボタンのSRC属性は、値属性を持たない画像ソースファイルを指定します。画像ボタンは<input type = submit/>を置き換えることができ、<入力型=送信/>ボタンの外観を画像に直接設定することもできます。
<入力型=画像src = bg.jpg />第三に、形式の例
この例は、フォームを使用してフォームレイアウトを使用して実装された簡単な登録ページです。
< >テーブル{幅:450px:#ffcb29:} td {border:} span; } </style> </body style = block-images:url(/emage/bearjpg); post> <table align = center cellspacing = 0 cellpadding = 0> <td> username:</td> <入力タイプ= text/</tr> </tr> <tr <td>パスワード:</td> < td> <入力タイプ=パスワード/> </td> </tr <tr>/</td> </tr> <l> <td>市場を選択してください:</td> <d> <select> <オプトグループラベル=中国> <オプション>ガンス州</option> <option>河南省河南省</option> <option> shanghai </option> </optgroup> <optgroup label = america> <option> california </オプション> <オプション>シカゴ</option> <option>ニュースon> </optgroup> </select> </td> </tr> <td>性別を選択してください:</td> <td> <入力タイプ=ラジオ名=セックスID =男性値= 0チェック=チェック/>> <ラベルfor =男性>男性</lable> <入力タイプ=ラジオ名=セックスID = 1/> <ラベル= fmale>女性</label </label > <入力タイプ=ラジオname = sex id = secret va lue = 2/> <label for = secret>機密性</label> </td> </tr> <td>職業を選択してください:</td> <入力タイプ=ラジオID =学生名=職業 /> <ラベル=学生>学生> label> <入力タイプ=ラジオID =教師名=プロフェッショナル /> <ラベル=教師> <入力タイプ=ラジオID =その他name = profession/> <label for = others>その他</label> </td> </tr> <td>趣味を選択してください:</td> <fieldset> <legend> Your Hobbies </Legend> <入力タイプ=チェックボックス名=趣味ID = BASKETBOLL CHECKD = CHECKED /> <ラベルfor = Basketboll> Basketball>の再生< /label> <入力タイプ=チェックボックス= hobb y id = run /> <label for = run> label < /label < /label > <入力タイプ=チェックボックス名=趣味ID =読み取り /> <ラベル=読み取り> read> < /label> <入力タイプ=チェックボックス名=趣味id = surfing /> <label = sur fing>インターネットアクセス< /label < /label > </fieldset> </td> </tr> <l> <td>備考:</td> <textarea color = 30>これは、備考コンテンツです</textarea> </td> </tr> tr> <td>&nbsp; </td> <td> <input value = submit = reset = reset/</td> </form>> </body> </ html>