web前端：html_html/css_WEB-ITnose-html教學-PHP中文網

标题

首頁

web前端

html教學

web前端：html_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

一、理解表单的作用

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 id="标题">标题</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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1249

Related knowledge

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles

web前端：html_html/css_WEB-ITnose

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題