ホームページ >ウェブフロントエンド >htmlチュートリアル >Web フロントエンド: html_html/css_WEB-ITnose
Web フロントエンド: html_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:121163ブラウズ
1. フォームの役割を理解する
1. Web アプリケーションは、ユーザーにデータを表示するだけでなく、データを入力できるグラフィカル ユーザー インターフェイスもユーザーに提供する必要があります。フォームの主な機能は、ユーザーが入力したデータを収集して送信するためのグラフィカル ユーザー インターフェイスを Web ページに提供することです。
2. HTML フォームの要素と属性は 2 つのタイプに分類できます:
(1) ブラウザがフォーム データの要素を処理する方法を認識できるように、フォームの全体的な構造を定義します。
(2) 要素を作成します。入力コントロールの。
3. 最小フォーム形式
ff9c23ada1bcecdd1a0fb5d5a0f18437 最小形式をマークします (2fc24eb216e51bf177b0b341c322902e)4. http cet プロトコル
( http: //www.example.com/forums.cgi?id=1234&data=guest)
5. 入力コントロールの使用
1 inpu: この要素は、type 属性を使用して、テキスト フィールド、パスワード フィールド、チェック ボックスなどのさまざまなコントロールを定義します。ボックス、ラジオ ボタン、送信ボタンとリセット ボタン、非表示のフィールドと画像
2 選択とオプション: 2 つの組み合わせを使用してドロップダウン リストを作成します
3 テキストエリア: 複数行の入力テキスト ボックスを作成します
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <table border="1"> <tr> <th colspan="4" bgcolor="aqua" >机票信息查询</th> </tr> <tr> <td bgcolor="#7fffd4">查询年份：</td> <td style="width: 400px" bgcolor="#a9a9a9"> <select name="year" id="year"> <option value="">2014</option> <option value="">2015</option> <option value="">2016</option> <select> 机票状态 <select name="year" id="year" style="width: 100px"> <option value=""></option> </select> </td> <td bgcolor="#7fffd4">模糊查询：</td> <td style="width: 400px" bgcolor="#a9a9a9"> <input type="text" id="firstname"> </td> </tr> <tr> <td bgcolor="#7fffd4">支付方式：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 150px"></select></td> <td bgcolor="#7fffd4">航空公司：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 200px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">机票经手：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 250px"></select></td> <td bgcolor="#7fffd4">未尽事宜：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" name="city" id="sh" style="width: 20px" /> <input type="text" id="firstname"/></td> </tr> <tr> <td bgcolor="#7fffd4">证件状态：</td> <td bgcolor="#a9a9a9"> 寄票日期 </td> <td bgcolor="#7fffd4">出票机构：</td> <td bgcolor="#a9a9a9"> <select name="food" id="food" style="width: 200px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">订票日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td> <td bgcolor="#7fffd4">出发日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td></td> </tr> <tr> <td bgcolor="#7fffd4">出票日期：</td> <td bgcolor="#a9a9a9"> <input type="text" id="good" style="width: 50px" /> <input type="text" style="width: 50px" /></td></td> <td bgcolor="#7fffd4">应收结清：</td> <td bgcolor="#a9a9a9"> <select name="good" id="good" style="width: 250px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">订票号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> <td bgcolor="#7fffd4">事故状态：</td> <td bgcolor="#a9a9a9"> <select name="good" style="width: 100px"></select></td> </tr> <tr> <td bgcolor="#7fffd4">所在国家：</td> <td bgcolor="#a9a9a9"> <select name="good" style="width: 150px"></select></td> <td bgcolor="#7fffd4">王朝号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> </tr> <tr> <td bgcolor="#7fffd4">机票号码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 200px"/></td> <td bgcolor="#7fffd4">价格代码：</td> <td bgcolor="#a9a9a9"> <input type="text" style="width: 70px"/> <button>每页行数：</button> <input type="text" style="width: 50px"/></td> </tr> <tr> <td bgcolor="#7fffd4">成都收款：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" name="city" id="sh" style="width: 20px"/> 已收 出票经手 <select name="food" style="width: 50px"></select> </td> <td bgcolor="#7fffd4">对账核实：</td> <td bgcolor="#a9a9a9"> <select name="food" style="width: 70px" ></select></td> </tr> <tr> <td bgcolor="#7fffd4">利润限定：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" style="width: 20px"/>仅显示利润小于10</td> <td bgcolor="#7fffd4">指定列表：</td> <td bgcolor="#a9a9a9"> <input type="radio" id="gender" value="male" >出票</input> <input type="radio" id="gender" value="male" >收款</input> <input type="radio" id="gender" value="male" >地址</input> <input type="radio" id="gender" value="male" >联系</input> <input type="radio" id="gender" value="male" >销售</input> <input type="radio" id="gender" value="male" >收款2</input> </td> </tr> <tr> <th colspan="4" bgcolor="aqua">退款选项</th> </tr> <tr> <td bgcolor="#7fffd4">退票清单：</td> <td bgcolor="#a9a9a9"> <input type="checkbox" style="width: 20px"/>只显示退款信息 </td> <td bgcolor="#7fffd4">入账未到：</td> <td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td> </tr> <tr> <td bgcolor="#7fffd4">出账未到：</td> <td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td> <td bgcolor="#7fffd4">退款经手：</td> <td bgcolor="#a9a9a9"><select name="food" style="width: 200px" ></select> </td> </tr> <tr> <th colspan="4" bgcolor="#ff7f50"><button>确定</button> <button>退出</button></th> </tr> </table></body></html>RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。