HTML-表單 211

單的作用就是采集用戶(hù)填寫(xiě)的信息,將其發(fā)往服務(wù)器做相應(yīng)的處理

表單的元素必須寫(xiě)在form標(biāo)簽中,一個(gè)form就是一個(gè)表單,表單中最重要的元素是input

input元素有一個(gè)type屬性,type的可選值有：1)button(普通按鈕)2checkbox(復(fù)選框)3text(單行文本框)4password(密碼框)5radio(單選按鈕)6image(圖片按鈕)7file(文件選擇框)8hidden(隱藏字段)9<input type="file" />submit(提交按鈕)10reset(重置按鈕)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>表單元素</title>
</head>
<body>
    <form action="http://www.bd.com/register.aspx" method="post">
        用 戶(hù) 名:<input type="text" value="張三" size="8" name="txtName" /><br /><br />
        用戶(hù)密碼:<input type="password" size="8" /><br /><br />
        用戶(hù)性別:<input type="radio" name="rdGender" value="1" />男<input type="radio" name="rdGender"
            value="0" />女<br /><br />
        興趣愛(ài)好:<input type="checkbox" value="0" checked="checked" />乒乓球<input type="checkbox" value="1" />籃球<input
            type="checkbox" value="2" />排球<br /><br />
        省市選擇:省:<select>
            <option value="0">北京</option>
            <option selected="selected" value="1">河南</option>
            <option value="2">河北</option>
        </select>
        市:<select>
            <option value="0">密云</option>
            <option selected="selected" value="1">鄭州</option>
            <option value="2">石家莊</option>
        </select><br /><br />
        上傳文件:<input type="file" /><br/><br/>
        <textarea cols="50" rows="10" readonly="readonly">
				北京百度網(wǎng)訊科技有限公司
				統(tǒng)一社會(huì)信用代碼/注冊(cè)號(hào)：91110000802100433B
				注冊(cè)資本：1342128萬(wàn)元
				法定代表人：梁志祥
				成立日期：2001-06-05
				營(yíng)業(yè)期限：2001-06-05 至 長(zhǎng)期
				企業(yè)類(lèi)型：有限責(zé)任公司(自然人投資或控股)
				注冊(cè)地址：北京市海淀區(qū)上地十街10號(hào)百度大廈2層
				經(jīng)營(yíng)范圍：技術(shù)轉(zhuǎn)讓、技術(shù)咨詢(xún)、技術(shù)服務(wù)、技術(shù)培訓(xùn)、技術(shù)推廣；設(shè)計(jì)、開(kāi)發(fā)、銷(xiāo)售計(jì)算機(jī)軟件；經(jīng)濟(jì)信息咨詢(xún)；利用www.baidu.com、www.hao123.com(www.hao222.net、www.hao222.com)網(wǎng)站發(fā)布廣告；設(shè)計(jì)、制作、代理、發(fā)布廣告；貨物進(jìn)出口、技術(shù)進(jìn)出口、代理進(jìn)出口；醫(yī)療軟件技術(shù)開(kāi)發(fā)；委托生產(chǎn)電子產(chǎn)品、玩具、照相器材；銷(xiāo)售家用電器、機(jī)械設(shè)備、五金交電（不含電動(dòng)自行車(chē)）、電子產(chǎn)品、文化用品、照相器材、計(jì)算機(jī)、軟件及輔助設(shè)備、化妝品、衛(wèi)生用品、體育用品、紡織品、服裝、鞋帽、日用品、家具、首飾、避孕器具、工藝品、鐘表、眼鏡、玩具、汽車(chē)及摩托車(chē)配件、儀器儀表、塑料制品、花、草及觀賞植物、建筑材料、通訊設(shè)備、汽車(chē)電子產(chǎn)品、器件和元件、自行開(kāi)發(fā)后的產(chǎn)品；預(yù)防保健咨詢(xún)；公園門(mén)票、文藝演出、體育賽事、展覽會(huì)票務(wù)代理；翻譯服務(wù)；通訊設(shè)備和電子產(chǎn)品的技術(shù)開(kāi)發(fā)；計(jì)算機(jī)系統(tǒng)服務(wù)；車(chē)聯(lián)網(wǎng)技術(shù)開(kāi)發(fā)；汽車(chē)電子產(chǎn)品設(shè)計(jì)、研發(fā)、制造（北京市中心城區(qū)除外）；演出經(jīng)紀(jì)；人才中介服；經(jīng)營(yíng)電信業(yè)務(wù)；利用信息網(wǎng)絡(luò)經(jīng)營(yíng)音樂(lè)娛樂(lè)產(chǎn)品、演出劇（節(jié)）目、動(dòng)漫產(chǎn)品、游戲產(chǎn)品（含網(wǎng)絡(luò)游戲虛擬貨幣發(fā)行）、表演、網(wǎng)絡(luò)游戲技法展示或解說(shuō)（網(wǎng)絡(luò)文化經(jīng)營(yíng)許可證有效期至2020年04月17日）；因特網(wǎng)信息服務(wù)業(yè)務(wù)（除出版、教育、醫(yī)療保健以外的內(nèi)容）；圖書(shū)、電子出版物、音像制品批發(fā)、零售、網(wǎng)上銷(xiāo)售。（市場(chǎng)主體依法自主選擇經(jīng)營(yíng)項(xiàng)目，開(kāi)展經(jīng)營(yíng)活動(dòng)；演出經(jīng)紀(jì)、人才中介服務(wù)、利用信息網(wǎng)絡(luò)經(jīng)營(yíng)音樂(lè)娛樂(lè)產(chǎn)品、演出劇（節(jié)）目、動(dòng)漫產(chǎn)品、游戲產(chǎn)品（含網(wǎng)絡(luò)游戲虛擬貨幣發(fā)行）、表演、網(wǎng)絡(luò)游戲技法展示或解說(shuō)、經(jīng)營(yíng)電信業(yè)務(wù)以及依法須經(jīng)批準(zhǔn)的項(xiàng)目，經(jīng)相關(guān)部門(mén)批準(zhǔn)后依批準(zhǔn)的內(nèi)容開(kāi)展經(jīng)營(yíng)活動(dòng)；不得從事國(guó)家和本市產(chǎn)業(yè)政策禁止和限制類(lèi)項(xiàng)目的經(jīng)營(yíng)活動(dòng)。）
			</textarea><br /><br />
        <input type="button" value="按鈕" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

還有一些次要的表單元素以后需要用到再說(shuō);關(guān)于瀏覽器兼容性自己測(cè)試不再截圖

絕大多數(shù)表單元素必須有name與value屬性,這樣的表單元素才能將此元素的的value值傳遞給服務(wù)器;如果method屬性值為get,點(diǎn)擊submit這個(gè)按鈕時(shí)在網(wǎng)址中就能看到填寫(xiě)的值

如果是radio(單選按鈕)name屬性值必須一樣,這樣此元素值就會(huì)只能選擇其中一個(gè)

button:只是一個(gè)普通按鈕,以后會(huì)通過(guò)JavaScript進(jìn)行操作;submit:自動(dòng)將填寫(xiě)在此網(wǎng)頁(yè)表單元素的值發(fā)送給action指定的服務(wù)器相應(yīng)的程序去處理;reset:將表單元素中填入的值還原為默認(rèn)值

HTML表單

現(xiàn)代web開(kāi)發(fā)中，表單是用戶(hù)與網(wǎng)站互動(dòng)的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類(lèi)型，讓收集和驗(yàn)證用戶(hù)輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個(gè)方面，包括基本結(jié)構(gòu)、輸入類(lèi)型、驗(yàn)證方法和提交過(guò)程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個(gè)基本的表單結(jié)構(gòu)如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個(gè)例子中，表單有兩個(gè)輸入字段：姓名和電子郵箱。每個(gè)輸入字段都有一個(gè)<label>標(biāo)簽，這不僅有助于用戶(hù)理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類(lèi)型

HTML5提供了多種輸入類(lèi)型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請(qǐng)輸入用戶(hù)名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動(dòng)條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話(huà)號(hào)碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時(shí)間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂(lè)</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國(guó)</option>
  <option value="usa">美國(guó)</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

<input type="text" name="username" required>

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請(qǐng)輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長(zhǎng)度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶(hù)填寫(xiě)完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會(huì)自動(dòng)檢查所有輸入字段的有效性。如果所有字段都滿(mǎn)足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會(huì)顯示錯(cuò)誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來(lái)自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯(cuò)誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請(qǐng)求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個(gè)FormData對(duì)象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個(gè)空對(duì)象來(lái)存儲(chǔ)表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對(duì)象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對(duì)象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對(duì)話(huà)框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個(gè)例子中：

我們定義了一個(gè)包含姓名和電子郵件輸入字段的表單，以及一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)會(huì)調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個(gè)FormData對(duì)象。然后，我們遍歷FormData對(duì)象，將表單數(shù)據(jù)復(fù)制到一個(gè)普通的JavaScript對(duì)象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個(gè)包含JSON字符串的對(duì)話(huà)框。

注意，這個(gè)例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會(huì)處理所有的邏輯，并且通過(guò)返回false來(lái)阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個(gè)onsubmit="return submitForm()"屬性來(lái)代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開(kāi)發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶(hù)友好且安全的網(wǎng)站。通過(guò)使用HTML5的輸入類(lèi)型和驗(yàn)證方法，可以確保用戶(hù)輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶(hù)體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

多數(shù)PHP程序都使用HTML表單從用戶(hù)那里獲取數(shù)據(jù)并計(jì)算結(jié)果。

HTML表單的一些基本原則

選擇適合于收集的數(shù)據(jù)類(lèi)型和提供交互方式的控件。
清楚標(biāo)記每一個(gè)控件，這樣用戶(hù)就可以理解其功能。
盡可能將標(biāo)簽對(duì)齊。將控件的左邊緣對(duì)齊。
將相關(guān)的標(biāo)簽分組，并且通過(guò)設(shè)計(jì)中使用空白將每一個(gè)分組分開(kāi)。
表單上的控件順序應(yīng)該類(lèi)似于用戶(hù)操作他們的順序。

創(chuàng)建基本HTML表單

首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶(hù)單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。

創(chuàng)建HTML結(jié)構(gòu)

包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁(yè)面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁(yè)面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來(lái)說(shuō)明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過(guò)表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

合并控件

兩個(gè)常用的基本控件：文本框和提交按鈕。

文本框：允許用戶(hù)鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱(chēng)，PHP腳本可以通過(guò)名稱(chēng)準(zhǔn)確訪(fǎng)問(wèn)其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按鈕：允許用戶(hù)將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。

示例：一個(gè)完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

使用多個(gè)表單

可以在一個(gè)HTML頁(yè)面中包含多個(gè)表單，注意下一個(gè)表單的FORM開(kāi)始之前需要結(jié)束前一個(gè)FORM表單。

<HTML>
  <HEAD>
  <TITLE>標(biāo)題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創(chuàng)建表單控件

創(chuàng)建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶(hù)鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

創(chuàng)建文本區(qū)域

文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿(mǎn)時(shí)會(huì)滾動(dòng)。COLS屬性指明可見(jiàn)文本列數(shù)與行數(shù)類(lèi)似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。

值	說(shuō)明
off	禁止單詞換行但用戶(hù)可以輸入換行符強(qiáng)制換行
virtual/soft	各行顯示為換行，但是換行并沒(méi)有被發(fā)送到服務(wù)器
physica/hard	啟用了單詞換行

<inputarea name="" rows="" cols="" wrap="">

創(chuàng)建密碼框

創(chuàng)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

創(chuàng)建復(fù)選框

取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：

<input type="checkbox" name="" checked value="">

創(chuàng)建單選按鈕

語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

創(chuàng)建列表框

用戶(hù)可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶(hù)可以通過(guò)按下crtl鍵并單擊多個(gè)選項(xiàng)來(lái)選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

創(chuàng)建隱藏域

<input type="hidden" name="text"value="">

實(shí)現(xiàn)上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過(guò)使用MIME碼指定。常用的格式如下：

超文本標(biāo)記語(yǔ)言文本 .html,.html text/html

　　普通文本：txt text/plain

　　word文檔：application/msword

　　RTF文本：rtf application/rtf

　　GIF圖形：gif image/gif

　　JPEG圖形：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂(lè)文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂(lè)文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

整合營(yíng)銷(xiāo)服務(wù)商