<form><p><input type="reset"></p></form>

<form><p><input type="button" value="按鈕"/></p></form>

<form action="/index/" method="post"><p><input type="file"/></p></form>

<form action="/index/" method="post">

<form action="/index/" method="post">

<form action="/index/" method="get">

什么是HTML表單？

表單form是網(wǎng)頁獲取用戶輸入數(shù)據(jù)的一種方式，如圖：

表單中通常包括各種輸入框、文本標簽、提交按鈕等。

1、一個簡單的表單

首先要有一個form標簽，其他表單控件放到from標簽中，第一個是label標簽用來描述后面的文本框中需要輸入什么內(nèi)容，然后是一個input標簽，type的值是text表示是一個文本框，然后也是一個input標簽，type的值是submit，表示是一個提交按鈕，當然想要真正的提交數(shù)據(jù)還需要一些額外的屬性。

<form action="">

 <label for="">學生姓名</label>

 <input type="text">

 <input type="submit" value="保存">

</form>

2、form標簽不但包含所有的表單控件，還會告訴瀏覽器當你提交表單的時候要把表單數(shù)據(jù)發(fā)送到哪里，以及使用什么方式發(fā)送。

<form action="login.php" method="POST">

</form>

action屬性指定表單數(shù)據(jù)要發(fā)送到哪個服務器腳本上，例如這里發(fā)送到login.php ，method屬性指定服務器發(fā)送的方式，有post和get兩種方式，在表單當中常用post。

3、for屬性和id屬性

label標簽for屬性的值應該和input標簽中id屬性的值一致，這樣這兩個表單控件就會被關(guān)聯(lián)起來。如下，這里將label關(guān)聯(lián)到input上。

<form>

 <label for="student_name">學生姓名</label>

 <input type="text" id="student_name">

 <input type="submit" value="保存">

</form>

當我們點擊文本標簽"學生姓名"時候，文本框會自動獲取輸入光標，等待用戶輸入數(shù)據(jù)。

4、input標簽的type屬性

type屬性決定input標簽顯示成什么樣子，type屬性種類很多，如下：

 <form>

 <input type="text">

 <input type="checkbox">

 <input type="radio">

 <input type="file">

 <input type="password">

 <input type="submit">

 <input type="reset">

 </form>

5、文本區(qū)域

input文本框標簽可以接受少量的單行文本，textarea標簽可以接受用戶輸入的多行文本，如下，和input標簽不同，textarea標簽必須有開始標簽和結(jié)束標簽。

<label for="summary">總結(jié)</label>

 <textarea id="summary" cols="30" rows="10"></textarea>

6、下拉列表

使用select標簽和option標簽創(chuàng)建下拉列表

<select name="" id="">

 <option value="">男</option>

 <option value="">女</option>

 </select>

綜合示例：

<h2>學生信息</h2>

 <form action="success.html">

 <label for="student-name">姓名</label>

 <input type="text" id="student-name" value=""><br>

 <label for="photos">上傳照片</label>

 <input type="file" id="photos"><br>

 <label for="">性別</label>

 <input type="radio" name="gender" id="male" checked><label for="male">男</label>

 <input type="radio" name="gender" id="female"><label for="female">女</label><br>

 <label for="">班級</label>

 <select name="" id="">

 <option value="">一班</option>

 <option value="" selected>二班</option>

 <option value="">三班</option>

 <option value="">四班</option>

 </select><br>

 <label for="teacher-comments">老師評語</label>

 <textarea name="" id="teacher-comments" cols="30" rows="10"></textarea><br>

 <input type="checkbox" id="pass" checked>

 <label for="pass">考試通過</label><br>

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

 <input type="reset" value="重新填寫">

 </form>

每天進步一點點，跟著教頭學開發(fā)。

頁編程之表單詳解。

同學們好，今天我要跟大家分享的是html中前后臺數(shù)據(jù)交互的重要內(nèi)容——form標簽。通過form標簽，用戶可以在前臺填寫資料，然后通過form的method屬性中設置的提交方式，提交至action屬性規(guī)定的后端處理程序中進行處理。

我們經(jīng)常在網(wǎng)頁上看到的填寫、注冊、登錄、修改資料等操作都需要使用form標簽。讓我們來看看今天的實例效果吧。

form標簽對于用戶來說是不可見的，如果沒有這一句話，你們只能看到一個完全空白的網(wǎng)頁。

可以將form標簽想象成一個盒子，其中放置了輸入框、單選框、復選框等控件。當用戶填寫完所有控件的內(nèi)容并點擊提交按鈕時，這個盒子就會被蓋上，并被直接發(fā)送到服務器進行處理。

接下來，我們來看看實現(xiàn)代碼。form標簽是一個圍堵標簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據(jù)需要設置相應的屬性即可。

首先，我要重點介紹幾個常用的屬性：action、name、method。

action屬性設置了服務端處理程序的URL地址。以郵寄盒子的理解來說，action就是收件人地址。

name屬性設置了表單的名稱，這個名稱可以被前臺的JS調(diào)用。同時，在一個網(wǎng)頁中存在多個表單標簽時，它也可以用來給服務器進行區(qū)分。

method屬性設置了表單的提交方式，它有兩個值post和get。post是密文，而get是明文，post沒有數(shù)據(jù)長度限制，而get只能傳遞大約3000個字符。

以郵寄舉例，get是直接將寫著內(nèi)容的信紙寄出，而post則是將信紙裝進信封里寄出。enctype不是常用屬性，但在使用時非常重要。它規(guī)定了從表單數(shù)據(jù)發(fā)送到服務器之前如何對其進行編碼，共有三個值，分別對應文字數(shù)據(jù)、多媒體數(shù)據(jù)和文件數(shù)據(jù)。詳情請參考匯總文檔。值得一提的是，只有在method等于post時，enctype的值才會生效。

除了這三個屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務端可以處理的字符集，autocomplete是否開啟前臺自動填充歷史數(shù)據(jù)及用戶填寫一次之后，再填寫會在瀏覽器中詢問是否根據(jù)過往填寫的內(nèi)容進行自動填充。

·將logo的"novalidate"設置為"true"，可以直接提交未經(jīng)驗證的表單數(shù)據(jù)。通常，我們需要在前臺使用JS或控件驗證用戶填寫的數(shù)據(jù)是否符合格式要求。然而，這個屬性可以直接繞過驗證。

·將"target"設置為"_blank"，可以打開新的窗口進行提交。這與a標簽的"target"屬性相同。現(xiàn)在，我的理解是這樣的。在后面的C#章節(jié)中，我們將結(jié)合具體的使用場景進行詳細的講解。

今天的分享就到這里。希望各位同學能按照我的要求，認真練習寫三次。這樣，即使不看視頻，你們也能寫出正確的代碼。所有的案例和相關(guān)文檔都可以向我索取。我們下期再見。網(wǎng)頁編程、服務端編程、數(shù)據(jù)庫和算法。如果你想學習編程，記得關(guān)注我哦！