web前端：html

時間 2019-11-18

標籤 web 前端 html 欄目 HTML 简体版

原文原文鏈接

1、理解表單的做用html

一、web 應用程序不單單是給用戶顯示數據，還應該給用戶提供一個能夠輸入數據的圖形用戶界面。表單的主要做用在於在網頁上提供一個圖形用戶界面，已採集和提交用戶輸入的數據。web

二、html表單元素和屬性能夠分爲兩種類型：瀏覽器

（1）定義表單總體結構，使瀏覽器知道如處理表單數據的元素；安全

(2) 建立輸入控件的元素。post

三、最小的表單格式字體

<form>標記最小格式（<form action=「表單處理程序的url」 method=「get|post」>）編碼

四、http get協議url

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

http post協議orm

http post 方法將數據在http數據流中編碼發送。所以，對用戶來講是不可見的，是一個較爲安全的傳遞數據的方法，可是比較難實現。可是html表單和不少其它web技術使經過post傳遞數據變的很容易

五、使用輸入控件

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;寄票日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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"/>
              已收&nbsp;&nbsp;出票經手
              <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>&nbsp;<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 元素中的文本按照元素的級別，瀏覽器使用不一樣大小的默認字體表示。

1. Web前端——HTML
2. Web前端 | HTML
3. WEB前端-003-HTML
4. web前端之html
5. web前端－HTML連接－007
6. web前端－HTML標題－004
7. web前端之 HTML介紹
8. web前端總結HTML篇
9. web前端－HTML段落－005
10. web前端-html標籤
更多相關文章...
• ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
• ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。