一般的にWebフォームで使用されるWeb制作を学ぶためのアプリケーション例

それはASP、PHPやJSPネットワークプログラミングに時間があるかどうか、真実を伝えるために、彼らは切っても切れないと、ユーザインタラクションです。

インタラクティブなプラットフォームは、基本的には、適切なテキスト入力、リストボックスで行われ、その後、ボタンを介してデータベースに送信されます。

ネットワークプログラミングを学ぶため、これらのプラットフォームに入る事を認識する必要があり、次のようにフォーム(フォーム)は、その基本的な形式は次のとおりです。

<フォーム名= "Form1の"アクション= "xxx.asp"メソッド= "ポスト">
の<input type = "text"の名= "yournameの">
<SELECT NAME = "selectwhat">
 <オプション> AAA </オプション>
 <オプション> AAA </オプション>
</ select>の
<textareaの名前= "textinit"行= 5つのCOLS = 10> </ TEXTAREA>
</フォーム>

即ち、<FORM> ... </ form>を含むコンテンツ内のフォームの:それは、と結論付けることができます。

インテリアは、次の3つのカテゴリに分けることができます特徴:入力、選択し、テキストエリア

初見の<form>の内部パラメータ

パラメータ名:フォームの一意の名前を表すために使用される、ページはもちろん、混乱することなく、複数のフォームを容易にするために、作成されましたが、また関係の確認ページを受け入れること。

アクションパラメータ:明らかに、現在の形がに対処するためにページのすべての内容に送信されますされています。情報処理の受け入れを含め、データベースの比較、追加、変更、およびように。

パラメータ法:すなわち、フォームの送信方法、を含む二つの方法:ポストと取得。ポストは、情報コンテンツの送信で、転送URL値を取得し、で「ビルトインオブジェクト要求」は、次のセクション内の特定の使用に導入される新しいフロントエンド学習qun438905713、グループのほとんどは、我々はお互いを助け、相互のゼロベースの学習者です答えは、また、学習教材をたくさん用意し、交換するゼロベースのジュニアパートナーを歓迎しました。

第二に、関連する入力を見て

入力フォームの入力オブジェクトが意味順番にタイプタイプ部分テキスト入力ボックス、パスワード入力ボックス、ラジオ/チェックボックス、提出/リセットボタン等によって変わる形は、以下の一つ一つを導入しました。

1、タイプ=テキスト

入力タイプには、ユーザー名を入力し、登録は、電話番号、電子メール、自宅の住所を入力して、その上、このような着陸など私たちはほとんどが最も使用されて表示されるテキスト、です。もちろん、これはまた、入力のデフォルトタイプです。

パラメータ名:同じテキスト入力ボックスの名前です。

パラメータサイズ:入力フレーム長のサイズ。

パラメータMAXLENGTH:入力ボックスには、最大入力文字数を可能にします。

パラメータ値:デフォルトの入力ボックス

特別なパラメータは読み取り専用:ボックスのみ変更、追加することはできません、表示できることを示しています。

<FORM>
名前:
の<input type = "text" NAME = "yournameの"サイズ= "30" MAXLENGTH =値"20は" = "の入力ブロック30で、文字の最大数は20であるの長さは"> <BR>
<入力タイプ=「テキスト」名前= 「yournameの」サイズ=「30」MAXLENGTH =「20」読み取り専用値=「 あなたは読み取り専用ではなく、変更することはできません」>
</フォーム>

2、タイプ=パスワード

私は、この入力ボックスに情報を入力する際の最大の違いは、秘密の文字として表示され、1はパスワード入力ボックスを理解することができ、言うことはありません。

パラメータおよび「タイプ=テキストは」似ています。

<フォーム>
パスワード:
密码长度小于15の<input type = "パスワード"の名前は=サイズ= "20" MAXLENGTH = "15"値= "123456" "yourpwd">
</フォーム>

3、タイプ=ファイル

あなたが何かをしているときBBSは必要不可欠な特定のEMAILで写真、アップロード添付ファイルをアップロードします:)

これは、ディレクトリの入力パラメータ名、サイズのためのプラットフォームを提供します。

<フォーム>
あなたのファイル:
<入力タイプ= "ファイル"名= "yourfile"サイズ= "30">
</フォーム>

4、タイプ=隠さ

ニーズは、時間の次のではなく、に提出するか、表現できないことが非常に重要なメッセージとします。それは非常に、一般的に非表示フィールドと呼ばれることは注目に値します。

要するに、あなたはどこに隠されているページに表示されません。最も有用なのは、隠された値です。

<フォーム名= "Form1の">
ここにあなたの隠された情報:
の<input type =名= "yourhiddeninfo"値= "webjx.com" "隠された">
</ FORM>
<スクリプト>
警告( "隐藏域的值是" + document.form1.yourhiddeninfo.value)
</スクリプト>

図5に示すように、タイプ=ボタン

標準のWindowsスタイルのボタンは、当然のことながら、ボタンも書き込みにJavaScriptコードを追加する必要があるページにジャンプします

<フォーム名= "Form1の">
あなたのボタン:
の<input type = "ボタン"名前= "yourhiddeninfo"値= "!ゴー、ゴー、ゴー" οnclick= "window.open( 'http://www.webjx.com 「) ">
</フォーム>

図6に示すように、タイプ=チェックボックス

チェックボックスは、登録、人格、およびその他の情報に趣味の共通を選択します。パラメータの名前、値、および特殊なパラメータ(デフォルト表現で選択)がチェックされています

実際には、最も重要なことは、処理ページに送信された値の値が、値がされています。(:名前の値が異なる可能性がありますが、お勧めできません添付。)

<FORM NAME = "Form1の">
の<input type = "チェックボックス" NAME = "checkit"値= ""チェック> <BR>
B:の<input type = "チェックボックス" NAME = "checkit"値= "B "> <BR>
C:の<input type ="チェックボックス"NAME = "checkit"値= "C"> <BR>
</フォーム>
名前值可以不一样、但不推荐<BR>
<フォーム名=" Form1の">
の<input type ="チェックボックス」NAME = "checkit1"値= ""チェック> <BR>
B:の<input type = "チェックボックス" NAME = "checkit2"値= "B"> <BR>
C <入力タイプ= "チェックボックス" NAME = "checkit3"値= "C"> <BR>
</フォーム>

図7に示すように、タイプ=ラジオ

その単一のボックスは、複数の選択肢のページ設定に表示されます。パラメータは、名前、値、チェック特別なパラメータを持っています。

それ以外の場合は、多くの1することはできません、名前の値が同じでなければなりません、チェックボックスは異なっています。もちろんそれはまだ価値値処理のページに取り組んでいます。

<FORM NAME = "Form1の">
:の<input type = "ラジオ" NAME = "checkit"値= ""チェック> <BR>
B:の<input type = "ラジオ" NAME = "checkit"値= "B "> <BR>
C:の<input type ="ラジオ」NAME = "checkit"値= "C"> <BR>
</フォーム>
下面是名值不同的一个例子、就不能实现多选一的效果了<BR>
<フォーム名= "Form1の">
の<input type = "ラジオ" NAME = "checkit1"値= ""チェック> <BR>
B:の<input type = "ラジオ" NAME = "checkit2"値= "B"> <BR>
C:の<input type = "ラジオ" NAME = "checkit3"値= "C"> <BR>
</フォーム>

図8に示すように、タイプ=画像

代替の比較は、あなたがスタイルの写真として提出することができ、自分自身でそれの効果を確認します

<フォーム名= "Form1の"アクション= "xxx.asp">
あなたのImgsubmit:
の<input type = "画像" SRC = "../ブログ/画像/ face4.gif">
</フォーム>

9、タイプ=提出し、タイプ=リセット

「送信」ボタン2を「リセット」されています

主な機能は、フォームが処理されるすべてのコンテンツページにアクションを提出提出機能のすべての内容を空に高速な塗り潰しからそれをリセットすることです。

<フォーム名= "Form1の"アクションは= "xxx.asp">
の<input type = "text"の名= "yournameの">
の<input type = "提交"値= "を提出">
の<input type = "リセット"値= "重置">
</フォーム>

10、または多く、ハァッ、ハァッがあるダウン型の概要入力

三、次に該当する選択を見て

ジャンプメニュー(ドロップダウン)リストを行うには、メインドロップダウンメニューを選択します。

それ自体は、インラインコード<オプション>を持っている... </ option>を、オプションの値は、パラメータ値、同様に処理されるように選択されたオプションのパラメータは、選択されたデフォルトを示し渡されます。

1、プルダウンメニュー

しかし、メニュー表示。

<フォーム名= "Form1の">
<SELECT NAME = "selectwhat">
 <オプション値= ""> AAA </オプション>
 <オプション値= "B"> BBB </オプション>
 <オプション値= "C"を選択> CCC </オプション>
</ select>の
</フォーム>
<スクリプト>
警告( "菜单的默认选取值是" + document.form1.selectwhat.value)
</スクリプト>

2ジャンプメニュー

ドロップダウンメニューごとにジャンプメニューであることをJavaScriptを追加します。

< "; this.selectedIndex = 0の場合(!this.selectedIndex && this.selectedIndex = 0){window.open(this.value)}"のonChange =を選択>
<オプションの選択>网站连接...... </オプション>
<オプション値= "http://www.webjx.com/"> Webjx.Com </オプション>
<オプション値= "http://www.sina.com.cn/"> Sina.com.cn </オプション>
<オプション値= "http://www.163.com/"> 163.com </オプション>
</ seclect>

3、ドロップダウンリスト

そして、最大の違いは、リストを上下に1つの以上のサイズの大きさの長さではない値が、高さを選択し、ドロップダウンメニューです。

もちろん、主なものは次のとおりです。唯一のメニューを選択し、リストに複数の複数のサイズなどの特殊なパラメータの選択することができます= 1は、単にドロップダウンメニューです

<フォーム名= "Form1の">
<SELECT NAME = "selectwhat" SIZE = 1>
 <オプション値= ""> AAA </オプション>
 <オプション値= "B"> BBB </オプション>
 <オプション値=」 C "> CCC </オプション>
</選択>
</フォーム> <BR>
サイズ> 1你会发现了大不同
<フォーム名=" Form1の">
<SELECT NAME ="「selectwhatサイズ= 3>
 <オプション値= ""> AAA </オプション>
 <オプション値= "B"> BBB </オプション>
 <オプション値= "C"> CCC </オプション>
</選択>
</ FORM> <BR>
加入了複数发现可以多个选择了、包括シフト进行快速全选及Ctrlキー进行点选
<フォーム名= "Form1の">
<名前を選択= "selectwhat"サイズ= 3の倍数>
 <オプション値= ""> AAA </オプション>
 <オプション値= "B"> BBB </オプション>
 <オプション値= "C"> CCC </オプション>
</ select>の
</フォーム> <BR>

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

第四に、最終的に懸念のテキストエリア

テキストエリアテキストエリアの拡大は、テキスト入力ボックスとして理解することができます。

デフォルト値は<TEXTAREA> ... </ TEXTAREA>の間に設定された値、パラメータません。

他のパラメータも、行、テキスト領域の行数、パラメータCOLS、テキスト領域の列数。

オフ領域反りが=テキストが折り返されない、もちろん、デフォルトのラップを書いていないことを示してワープパラメータとしても、。

<フォーム名= "Form1の">
<テキストエリア名= "textinit"行= "5" COLS = "20"ラップ= "オフ"> 5行20列、不自动换行</ TEXTAREA>
</フォーム>

公開された50元の記事 ウォンの賞賛5 ビュー30000 +

おすすめ

転載: blog.csdn.net/html168/article/details/104466794