Home >Web Front-end >HTML Tutorial >web前端：html_html/css_WEB-ITnose

web前端：html_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-06-24 11:38:121227browse

一、理解表单的作用

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：【HTML】仿淘宝五星评价显示任何分数_html/css_WEB-ITnoseNext article：商城导航代码_html/css_WEB-ITnose

See more

web前端：html_html/css_WEB-ITnose

Related articles