1、web 应用程序不仅仅是给用户显示数据，还应该给用户提供一个可以输入数据的图形用户界面。表单的主要作用在于在网页上提供一个图形用户界面，已采集和提交用户输入的数据。
2、html表单元素和属性可以分为两种类型：
（1）定义表单整体结构，使浏览器知道如处理表单数据的元素；
(2) 创建输入控件的元素。
3、最小的表单格式
<form>标记最小格式（<form action=“表单处理程序的url” method=“get|post”>）
4、http get协议
(http：//www.example.com/forums.cgi?id=1234&data=guest)
http post协议
http post 方法将数据在http数据流中编码发送。因此，对用户来说是不可见的，是一个较为安全的传递数据的方法，但是比较难实现。但是html表单和很多其它web技术使通过post传递数据变的很容易
5、使用输入控件
1 inpu：该元素使用type属性定义不同的控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域和图像
2 select和option：二者组合使用，创建一个下拉列表
3 textarea：创建一个多行输入的文本框
<!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>
<h1>标题</h1>
<p>段落</p>
<blockquote>引用</blockquote>
<ul>无序列表</ul>
<ol>有序列表</ol>
<dl>定义列表</dl>
<pre>预定义标签</per>
<div>相当于区域块</div>
<span>针对一段文字</span> <a>行内元素</a>
块级元素与内嵌元素
【块级元素：div，blockquote，列表元素（dl，ol，ul），fiekdset，from，h1-h6，hr，p，pre，table 等】【内嵌元素：span，a，img，label，所有的表单输入元素，iframe，object 等】1 如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。2 如果是块级元素，下一个元素就在浏览器下一行显示。3 元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。
时间： 2024-08-25 01:34:18