HTML の基本必読---フォーム、画像ホットスポット、Web ページの分割と結合の詳細な説明

1. フォーム

<form id="" name="" method="post/get" action="処理を担当するサーバー"> id は繰り返すことができません。name は繰り返すことができます。get 送信には長さ制限があり、エンコードされたコンテンツはアドレスバーに表示されます。post 送信には長さ制限がなく、エンコードされたコンテンツは表示されません。

</フォーム>

1. テキスト入力

テキストボックス <input type="txt" name="" id="" value="" />

注: 上記の値はデフォルト値を設定することを意味します

パスワードボックス<input type="password" name="" id="" value="" />

テキストエリア <textarea name="" id="" cols="" (文字数) rows="" (行数の高さ) ></textarea>

隠しフィールド <input type="hidden" name="" id="" value="" />

2. ボタン

送信ボタン <input type="submit" name="" id="" disabled="disabled" value=""/> クリックするとフォーム内の送信サーバのアドレスに移動します

注: 上記で設定された値は、実行時に上記に表示されるテキストを表します。

リセットボタン <input type="reset" name="" id="" disabled="disabled" value=""/>

通常ボタン <input type="button" name="" id="" disabled="disabled" value=""/>

画像ボタン <input type="image" name="" id="" disabled="disabled" src="画像アドレス"/>

添付ファイル:

disabled の場合、ボタンは無効になります。enable の場合、ボタンは使用可能になります。

3. 入力を選択

ラジオボタングループ <input type="redio" name="" checked="checked" value=""/> 名前の値はグループ化に使用されます。値は表示されず、プログラムに送信されます。チェックされている場合は既定のオプションが設定されます。

注意: ラジオボタングループを選択すると、チェックを外すことはできません。

チェックボックスグループ <input type="checkbox" name="" selected="checked" value=""/>

注: checked="checked" は、すぐに選択され、チェックボックスをオンまたはオフにできることを意味しています。

ファイルのアップロード<input type="file" name="" id="" />

<label> タグは、入力要素のラベル (タグ) を定義します。

ラベル要素はユーザーに対して特別な効果をもたらしません。ただし、マウスユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがタグを選択すると、ブラウザは自動的にフォーカスをタグに関連付けられたフォームコントロールに移動します。

<label> タグの for 属性は、関連付けられている要素の id 属性と同じである必要があります。

ドロップダウンリストボックス

<select name="" id="" size="" multiple="multiple"> --size=1 の場合はメニュー、>1 の場合はリストです。 multiple は複数選択を意味します。

<option value="value">コンテンツ 1</option>

<option value="value" selected="selected">コンテンツ 2</option> --選択済み、デフォルトとして設定

<option value="value">コンテンツ 3</option>

</選択>

要約すると、HTML プログラムは以下を表示します。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" />
< title >無題の文書</ title >
</ヘッド>
<本文背景= "22.jpg" >
<フォーム>
口座番号: <入力タイプ= "テキスト" 値= "12345" disabled = "無効" /> < br /> < br />
パスワード: <入力タイプ= "パスワード" /> < br /> < br />
言う: <テキストエリア列数= "140" 行数= "8" > </テキストエリア> < br /> < br />
質問: 中華人民共和国は何年に建国されましたか? <入力タイプ= "テキスト" />
<入力タイプ= "送信" 値= "送信" />
<入力タイプ= "隠し" 値= "1949" />
<入力タイプ= "リセット" /> < br />
<入力タイプ= "ボタン" 値= "ログイン" /> < br />
<入力タイプ= "画像" src = "55.jpg" /> < br />
<入力タイプ= "ラジオ" 名前= "性別" />男性< br />
<入力タイプ= "ラジオ" 名前= "性別" />女性< br />
<入力タイプ= "チェックボックス" チェック済み= "チェック済み" />コーラ< br />
<入力タイプ= "チェックボックス" />チキンドラムスティック< br />
<入力タイプ= "ファイル" /> < br /> < br />
<選択サイズ= "1" >
<オプション値= "11" >コカコーラ</オプション>
<オプション value = "22" >スプライト</オプション>
<オプション値= "33" selected = "selected" >ファンタ</ option >
</選択>
</フォーム>
</本文>
</html>

実行結果は次のとおりです。

分析例: メールボックスインターフェースプログラムの表示を作成する

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" />
< title >無題の文書</ title >
</ヘッド>
<本文背景= "11.jpg" >
<フォント face = "中国語のリーシュ" >
<表 align = "中央" 幅= "600" 高さ= "600" 境界線= "1" セルパディング= "0" セル間隔= "0" >
< tr >
< td width = "150" >メールアドレス: </ td >
< td > <フォーム> <入力タイプ= "テキスト" / > < /フォーム> </td>
</tr>
< tr >
< td > </ td >
< td valign = "middle" > <フォント color = "#999999" >メールでアカウントを有効化する必要があります。Sohu、21cn、Sogou のメールはサポートされていません。 </ font > </ td >
</tr>
< tr >
< td >ログインユーザー名: </ td >
< td > <フォーム> <入力タイプ= "テキスト" / > < /フォーム> </td>
</tr>
< tr >
< td > </ td >
< td valign = "middle" > <フォント color = "#999999" >ログイン時にのみ使用され、文字数は少なくとも 4 文字である必要があります</ font > </ td >
</tr>
< tr >
< td >表示名: </ td >
< td > <フォーム> <入力タイプ= "テキスト" / > < /フォーム> </td>
</tr>
< tr >
< td > </ td >
< td > <フォント color = "#999999" >ニックネーム、2文字以上</ font > </ td >
</tr>
< tr >
< td >パスワード: </ td >
< td > <フォーム> <入力タイプ= "パスワード" / > < /フォーム> </td>
</tr>
< tr >
< td >パスワードの確認: </ td >
< td > <フォーム> <入力タイプ= "パスワード" / > < /フォーム> </td>
</tr>
< tr >
< td > </ td >
< td > <フォント color = "#999999" >少なくとも 8 文字で、文字、数字、特殊文字を含める必要があります</ font > </ td >
</tr>
< tr >
< td >性別: </ td >
< td > <フォーム> <選択サイズ= "1" >
<オプション値= "1" selected = "selected" >男性</ option >
<オプション value = "2" >女性</ option >
</選択> </フォーム>
</ td >
</tr>
< tr >
< td >設定: </ td >
< td > <フォーム> <選択サイズ= "1" >
<オプション value = "1" >ゲームをプレイする</ option >
<オプション value = "2" >バスケットボールをプレイする</ option >
<オプション value = "3" >映画を見る</ option >
<オプション値= "4" selected = "selected" >音楽を聴く</ option >
<オプション value = "5" >旅行</ option >
</選択> </フォーム>
</ td >
</tr>
< tr >
< td > </ td >
< td > <フォーム> <入力タイプ= "送信" 値= "登録" / > < /フォーム> </td>
</tr>
</表>
</フォント>
</本文>
</html>

実行結果は次のとおりです。

2. 画像のホットスポット

画像上の領域を計画し、ハイパーリンクを作成し、画像領域を直接クリックしてジャンプ効果を実現します。

例：

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" />
< title >無題の文書</ title >
</ヘッド>
<本文>
<画像 src = "a006.jpg" usemap = "ditu" />
<地図名前= "ditu" >
<エリア形状= "長方形" 座標= "0,0,50,50" href = "http://www.baidu.com" />
<エリア形状= "円" 座標= "265,118,80" href = "http://qq.com" />
</マップ>
</本文>
</html>