首页 > web前端 > html教程 > web前端:html_html/css_WEB-ITnose

web前端:html_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:38:12
原创
1163 人浏览过

 一、理解表单的作用

1、web 应用程序不仅仅是给用户显示数据,还应该给用户提供一个可以输入数据的图形用户界面。表单的主要作用在于在网页上提供一个图形用户界面,已采集和提交用户输入的数据。

2、html表单元素和属性可以分为两种类型:

(1)定义表单整体结构,使浏览器知道如处理表单数据的元素;

 (2)  创建输入控件的元素。

3、最小的表单格式

标记最小格式(

4、http cet协议

(http://www.example.com/forums.cgi?id=1234&data=guest)

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 class="brush:php;toolbar:false">预定义标签</per>
登录后复制
<div>相当于区域块</div>
登录后复制
<span>针对一段文字</span><a>行内元素</a>
登录后复制
<strong>块级元素与内嵌元素</strong>
登录后复制
<strong>【块级元素:div,blockquote,列表元素(dl,ol,ul),fiekdset,from,h1-h6,hr,p,pre,table 等】</strong><strong>【内嵌元素:span,a,img,label,所有的表单输入元素,iframe,object 等】1 如果是内嵌元素,下一个元素就显示在该元素同一行上的后续位置。2 如果是块级元素,下一个元素就在浏览器下一行显示。3 元素中的文本按照元素的级别,浏览器使用不同大小的默认字体表示。</strong>
登录后复制

 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板