html表單(HTML表單有什么用)

來源：互聯網轉載時間：2024-05-02 17:02:48

html是什么

html的全稱為超文本標記語言,它是一種標記語言,包含了一系列標簽.通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說明文字,圖形、動畫、聲音、表格、鏈接等,主要和css+js配合使用并構建優雅的前端網頁。

HTML 表單是用于搜集不同類型的用戶輸入的,表單是一個包含表單元素的區域;表單元素是允許用戶在表單中(比如:文本域、下拉列表、單選框、復選框等等)輸入信息的元素;表單使用表單標簽(<form>)定義。

一、介紹

1.表單概念:

表單最重要的表現是在客戶端接收用戶的信息,然后將數據遞交給后臺的程序來操控這些數據,從技術的概念上說,表單就是用來操作form對象,對象是一種基本的數據類型

2.創建表單:

表單通過<form>標簽來創建,其中放置表單的對象,如表單域、按鈕和其他事物,<form>標簽中可擴展幾個屬性:

a.action屬性

通過<form>標簽定義的表單里面必須有action屬性才可以將表單中的數據遞交上去

<formaction="some.php"></form>

以上代碼表示這個表單的作用是用來提交some.php這個頁面的數據

b.method屬性

該屬性的作用是告訴瀏覽器數據是以何種方式提交上去的,該屬性下有兩個選擇:"get"和"post",默認情況下,數據被提交的方式是get,表單域中輸入的內容會添加在action指定的URL中,當表單提交后用戶便獲得一個明確的URL,由于這種方式下數據會添加到URL中,所以好處是可以保存在收藏夾中和他人分享,直接訪問主頁的URL可以達到和填寫注冊后一樣的效果,如有些時候,用戶將自己已經注冊過的一些網站主頁加入到自己的收藏夾,再次從收藏夾中打開時,會發現已經是登錄的狀態。而post 這種方式,數據將以HTTP頭的形式發送,表單數據不再是URL中的一部分。二者區別是get在安全性上較差,所有表單域的值直接呈現,而post除了可見的處理腳本程序以外,別的東西都可以隱藏,所以在實際運用時通常選擇post這種處理方式

c.name屬性

作用是令提交上去的表單數據可以被處理這些數據的程序識別,大部分頁面中放入的表單很可能不止一個,此時就需要給不同的表單起不同的名字,以便程序識別

<formname="me"></form>...<scriptlanguage="JavaScript">varlength=document.me.length.value;</script>

上述部分代碼說明通過表單me獲取輸入的length數值,代碼中有不同的表單可以通過name來識別

d.enctype屬性

該屬性代表HTML表單數據的編碼方式,分別有application/x-www-form-urlencoded(標準編碼方式,提交的數據被編碼為名稱/ 值對)、multipart/form-data(表示數據編碼為一條信息,為表單定義了MIME編碼方式,創建了一個與傳統不同的POST緩沖區,頁面上每個控件對應消息的一個部分)和text/plain(表示數據以純文本的形式進行編碼,這樣在信息中將不包含控件或格式字符)共三種方式

e.target屬性

目標顯示方式,表示在何處打開目標URL,可以設置4種方式,_blank表示在新的頁面中打開鏈接,_self表示在相同的窗口打開頁面,_parent表示在父級窗口打開頁面,_top表示將頁面載入到包含該鏈接的窗口,取代任何當前在窗口中的頁面.

<formaction="mailo:depp59@gmail.com"method="post"name="me"enctype="text/plain"target="_blank">...</form>

這段代碼表明該表單的動作是發送到郵箱depp59@gmail.com,使用post的傳輸方式,使用text/plain編碼方式的me表單,使之在新頁面中打開

3.表單域:即用戶輸入數據的地方

表單域可以分為input、textarea、select 3個對象,其中大部分表單通過input屬性來實現,textarea和select創建一種控制類型

二、input對象下的多種表單表現形式

頁面中大部分表單的形式都是通過輸入標記input來實現的

<inputname=""type=""value=""size=""maxlength="">

a.其中name表示輸入數據的名字,其作用是為了讓程序明白所提交的數據

<inputtype="text"name="length">這個輸入的數據命名為lengthvarlength=document.me.length.value;

如果缺少了這樣一個name屬性,雖然在瀏覽器中的顯示沒有什么變化,但是后臺程序后JavaScript程序就不能獲得提交的數據

b.type屬性表示所定義的是哪種類型的表單形式,該屬性有九個可選值:

text 單行的文本框
password 將文本替換為"*"的文本框
checkbox 只能做二選一的是或否選擇
radio 從多個選項中確定的一個文本框
submit 確定命令文本框
hidden 設定不可被瀏覽用戶修改的數據
image 用圖片表示的確定符號
file 設置文件上傳
button 用來配合客戶端腳本

c.size:表示文本框字段的長度

d.maxlength:表示可輸入的最長的字符數量

e.value:表示預先設置好的信息

4.text文本框的樣式表單

<html><head><title>text樣式表單</title><styletype="text/css">input{font:50%微軟雅黑;}</style></head><body><formaction="some.php"name="myform">輸入用戶名:<inputtype="text"name="name"size=20maxlength=12><br>輸入郵箱地址:<inputtype="text"name="address"size=20maxlength=20></form></body></html>

代碼中size定義了文本框的長度,而maxlength定義了這個文本框最多只能輸入12個字符,如果超出了這個長度數據將不能輸入,這兩個text樣式的數據定義了不同的名字這很關鍵,否則一旦需要被程序調用數據將無法辨認。

5.password輸入密碼的樣式表單(可以將文本使用保密形式展示出來的一個功能,根據不同的瀏覽器會使用點狀形態或星號符表示)

<html><head><title>password樣式表單</title><styletype="text/css">input{font:50%微軟雅黑;}</style></head><body><formaction="some.php"name="myform">輸入用戶名:<inputtype="text"name="name"size=40maxlength=12><br>輸入郵箱地址:<inputtype="text"name="address"size=20maxlength=20><br>輸入密碼:<inputtype="password"name="password"size=20maxlenght=12></form></body></html>

6.checkbox復選框的表單樣式(瀏覽器會在選擇欄前面提供一個小方框如果選擇小框中會添加小勾符號表示選中)

<html><head><title>checkbox樣式表單</title><styletype="text/css">input{font:50%微軟雅黑;}</style></head><body><formaction="some.php"name="myform"><h4>注冊信息:</h4><inputtype="checkbox"name="truename"checked="checked">使用真實姓名<h4>實名制可以方便您更好地和朋友交流</h4><inputtype="checkbox"name="address"checked="checked">顯示我的地址<h4>如果去除勾選,其他用戶將無法查到你的地址</h4><inputtype="checkbox"name="mail"checked="checked">可以給我發郵件<h4>如果勾選,我們將會為您發送來自廣告商的信息</h4></form></body></html>

上面代碼中添加了checked="checked"表示復選框默認值設置為checked,那么√符號會被默認添加

7.radio單選按鈕的樣式表單(多選一表單)

radio樣式類似于選擇題,在一組選項中選出唯一的一項,發送這列數據,其中給這組選項定義相同的名字,但是通過value屬性來加以區別,因此,這里必須給input對象設定value值,而且不同對象的value值不能相同,否則數據無法辨認

<html><head><title>radio樣式表單</title><styletype="text/css">input{font:50%微軟雅黑;}</style></head><body><formaction="some.php"name="myform"><h4>性別</h4><inputtype="radio"name="gender"value="one">我是男的<br><h4>請正確選擇您的性別哦</h4><inputtype="radio"name="gender"value="two">我是女滴<br><h4>請正確選擇您的性別哦</h4></form></body></html>

8.submit提交數據的樣式表單
該屬性創建一個按鈕,該按鈕的作用就是提交數據。當點擊"提交"按鈕時,數據會發送到指定的地方。其中通過value值可以修改按鈕上顯示的內容。此外還有一個reset屬性,這是一個復位按鈕,當被點擊時表單的內容會被重新設置,回到頁面初始位置

<html><head><title>submit樣式表單</title><styletype="text/css">input{font:100%微軟雅黑;}</style></head><body><formaction="some.php"name="myform"><h4>性別</h4><inputtype="radio"name="gender"value="one">我是男的<br><h4>請正確選擇您的性別哦</h4><inputtype="radio"name="gender"value="two">我是女滴<br><h4>請正確選擇您的性別哦</h4><inputtype="submit"name="submit"value="確定"><inputtype="reset"name="submit"value="復位"></form></body></html>

9.hidden隱藏域的樣式表單
hidden屬性可以創建一個隱藏域,數據會被隱藏起來,用戶無法對其進行操作(這些數據通常是用戶不關心的但是必須被提交的數據)
10.image樣式的表單(可以看做圖像替換按鈕的技術,當圖像被點擊時,數據一并被提交至服務器)
<input type="image" src="" alt="確定">
使用src屬性指定這張圖像的路徑,使用alt屬性來添加文本注釋,此時提交按鈕被替換成一個小小的圖像,當點擊圖像時,其作用就相當于submit按鈕,但是當表單數據被提交的同時,用戶所單擊的圖像的位置坐標(image.x=23 image.y=59)也會被發送
表單中還有一種觸發事件的button表單,它只是一個按鈕,單個button按鈕并不會提交任何數據,它的作用是用來調用前端頁面,即客戶端的腳本程序
<input type="button" value="運行" onclick="calculate();">
11.file上傳文件的樣式表單
該表單允許用戶上傳自己的文件,例如用戶上傳自己的圖像給服務器,用來改變用戶在不同網站上的形象圖片。需要注意的是,當使用file樣式的表單時,必須在<form>標簽中說明編碼方式,這樣服務器才可以接收到正確信息

<body><h4>上傳我的文件</h4><formaction="some.php"enctype="multipart/form-data"name="myform"><inputtype="file"name="uploadfile"></form></body>

三、textarea對象的表單
該對象就像是input對象中的text表單,只不過是擴展過的text樣式表單,可以通過行(rows)屬性和列(cols)屬性來編輯文本域的大小,常見于留言板、論壇中回帖時的文本框等

<html><head><title>textarea對象的表單</title><styletype="text/css">textarea{font:100%微軟雅黑;color:navy;}</style></head><body><formaction="some.php"method="post"enctype="multipart/form-data"name="myform"><textareaname="some"rows=10cols=50value="say">請文明用語:</textarea></form></body></html>

textarea屬性標簽必須要封閉,且生成頁面時在文本框中會預先設置好文本“請文明用語”,但是用戶不得不先刪去預先的文本再編輯自己的內容。當文本框中輸入的內容超出預先設置的行數時會自動出現滾動條,如果沒有超出文本框的范圍則滾動條是灰色的
四、select對象表單
使用select將創建一個列表樣式的表單,顯示為出現一個下拉列表框,令用戶可以方便的選擇其中一個目錄,通常在一些要求填寫地區、生日等信息中,設計者可以給使用者準備好選項,需要使用<option>標簽來定義可供選擇的每一項

<html><head><title>select對象的表單</title><styletype="text/css">select{font:100%微軟雅黑;color:Green;}</style></head><body><formaction="some.php"method="post"enctype="multipart/form-data"name="myform"><h4>地址</h4><selectname="上海"><option>黃浦區</option><option>虹口區</option><option>靜安區</option><option>寶山區</option></select></form></body></html>

用戶可以通過下拉列表框選擇一個“地址”,而這個數據會被表單發送到服務器,此外還可以通過value屬性為每一個option指定不同的值,這樣的話value設置的值將取代option的文本內容。注意如果設計者希望預先設置初始值,那么在所希望的option中添加 selected="selected"就可以了,如<option selected="selected">浦東新區</option>,否則默認初始值應該是第一個出現的<option> 的文本內容。
如果下拉列表內內容太多,可以使用<optgroup>標簽配合label屬性來給選項分類

<selectname="上海"><optgrouplabel="Team1"><option>黃浦區</option><optionselected="selected">虹口區</option><option>靜安區</option><option>寶山區</option></optgroup><optgrouplabel="Team2"><option>長寧區</option><option>楊浦區</option><option>徐匯區</option><option>普陀區</option></optgroup></select>

此外如果不希望select對象以下拉列表框的形式展現出來,有一種方式可以將目錄項以滾動條的樣式表現出來,只需要在select 標簽中加入size屬性,如"size=6"表示是一個能容納6行文字的文本框,當目錄項超出設置的行數時將出現滾動條

<selectname="上海"size="5"><option>黃浦區</option><optionselected="selected">虹口區</option><option>靜安區</option><option>寶山區</option><option>長寧區</option><option>楊浦區</option><option>徐匯區</option><option>普陀區</option></select>

五、表單域集合
如果表單的項目過多或為了修飾表單部分,可以通過使用表單域將表單分組,表單域的代碼由<fieldset>標簽和<legend>標簽組合而成,默認情況下,<fieldset>標簽勾畫出表單域的框形,<legend>標簽的對象像標題一樣出現在框的左上角

<html><head><title>表單域</title></head><body><formaction="some.php"method="post"name="myform"><fieldset><legend>注冊信息:</legend>輸入用戶名:<inputtype="text"name="name"size=20maxlength=12><!--這里可以放入許多樣式的表單--></fieldset></form></body></html>

感謝你的閱讀,希望你對“HTML表單有什么用”這一關鍵問題有了一定的理解,具體使用情況還需要大家自己動手實驗使用過才能領會,快去試試吧,如果想閱讀更多相關知識點的文章,歡迎關注本站行業資訊頻道!

本文由 貴州做網站公司 整理發布，部分圖文來源于互聯網，如有侵權，請聯系我們刪除，謝謝！

標簽：html表單-

上一篇：dhcp snooping(dhcp snooping有什么用)

下一篇：端口被占用怎么解決(解決端口被占用的方法)