HTML表單有什么用
這篇“HTML表單有什么用”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“HTML表單有什么用”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、呼中ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的呼中網(wǎng)站制作公司
html是什么
html的全稱(chēng)為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。
HTML 表單是用于搜集不同類(lèi)型的用戶(hù)輸入的，表單是一個(gè)包含表單元素的區(qū)域；表單元素是允許用戶(hù)在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素；表單使用表單標(biāo)簽（<form>）定義。
一、介紹
1.表單概念：
表單最重要的表現(xiàn)是在客戶(hù)端接收用戶(hù)的信息，然后將數(shù)據(jù)遞交給后臺(tái)的程序來(lái)操控這些數(shù)據(jù)，從技術(shù)的概念上說(shuō)，表單就是用來(lái)操作form對(duì)象，對(duì)象是一種基本的數(shù)據(jù)類(lèi)型
2.創(chuàng)建表單:
表單通過(guò)<form>標(biāo)簽來(lái)創(chuàng)建，其中放置表單的對(duì)象，如表單域、按鈕和其他事物，<form>標(biāo)簽中可擴(kuò)展幾個(gè)屬性:
a.action屬性
通過(guò)<form>標(biāo)簽定義的表單里面必須有action屬性才可以將表單中的數(shù)據(jù)遞交上去
<form action="some.php"> </form>
以上代碼表示這個(gè)表單的作用是用來(lái)提交some.php這個(gè)頁(yè)面的數(shù)據(jù)
b.method屬性
該屬性的作用是告訴瀏覽器數(shù)據(jù)是以何種方式提交上去的，該屬性下有兩個(gè)選擇:"get"和"post"，默認(rèn)情況下，數(shù)據(jù)被提交的方 式是get,表單域中輸入的內(nèi)容會(huì)添加在action指定的URL中，當(dāng)表單提交后用戶(hù)便獲得一個(gè)明確的URL,由于這種方式下數(shù)據(jù)會(huì)添 加到URL中，所以好處是可以保存在收藏夾中和他人分享，直接訪問(wèn)主頁(yè)的URL可以達(dá)到和填寫(xiě)注冊(cè)后一樣的效果，如有些時(shí) 候，用戶(hù)將自己已經(jīng)注冊(cè)過(guò)的一些網(wǎng)站主頁(yè)加入到自己的收藏夾，再次從收藏夾中打開(kāi)時(shí)，會(huì)發(fā)現(xiàn)已經(jīng)是登錄的狀態(tài)。而post 這種方式，數(shù)據(jù)將以HTTP頭的形式發(fā)送，表單數(shù)據(jù)不再是URL中的一部分。二者區(qū)別是get在安全性上較差，所有表單域的值 直接呈現(xiàn)，而post除了可見(jiàn)的處理腳本程序以外，別的東西都可以隱藏，所以在實(shí)際運(yùn)用時(shí)通常選擇post這種處理方式
c.name屬性
作用是令提交上去的表單數(shù)據(jù)可以被處理這些數(shù)據(jù)的程序識(shí)別，大部分頁(yè)面中放入的表單很可能不止一個(gè)，此時(shí)就需要給不同 的表單起不同的名字，以便程序識(shí)別
<form name="me"> </form> ... <script language="JavaScript"> var length=document.me.length.value; </script>
上述部分代碼說(shuō)明通過(guò)表單me獲取輸入的length數(shù)值，代碼中有不同的表單可以通過(guò)name來(lái)識(shí)別
d.enctype屬性
該屬性代表HTML表單數(shù)據(jù)的編碼方式，分別有application/x-www-form-urlencoded（標(biāo)準(zhǔn)編碼方式，提交的數(shù)據(jù)被編碼為名稱(chēng)/ 值對(duì)）、multipart/form-data（表示數(shù)據(jù)編碼為一條信息，為表單定義了MIME編碼方式，創(chuàng)建了一個(gè)與傳統(tǒng)不同的POST緩沖 區(qū)，頁(yè)面上每個(gè)控件對(duì)應(yīng)消息的一個(gè)部分）和text/plain（表示數(shù)據(jù)以純文本的形式進(jìn)行編碼，這樣在信息中將不包含控件或格 式字符）共三種方式
e.target屬性
目標(biāo)顯示方式，表示在何處打開(kāi)目標(biāo)URL，可以設(shè)置4種方式，_blank表示在新的頁(yè)面中打開(kāi)鏈接，_self表示在相同的窗口打開(kāi) 頁(yè)面，_parent表示在父級(jí)窗口打開(kāi)頁(yè)面，_top表示將頁(yè)面載入到包含該鏈接的窗口，取代任何當(dāng)前在窗口中的頁(yè)面.
<form action="mailo:depp59@gmail.com" method="post" name="me" enctype="text/plain" target="_blank"> ... </form>
這段代碼表明該表單的動(dòng)作是發(fā)送到郵箱depp59@gmail.com，使用post的傳輸方式，使用text/plain編碼方式的me表單，使之 在新頁(yè)面中打開(kāi)
3.表單域：即用戶(hù)輸入數(shù)據(jù)的地方
表單域可以分為input、textarea、select 3個(gè)對(duì)象，其中大部分表單通過(guò)input屬性來(lái)實(shí)現(xiàn)，textarea和select創(chuàng)建一種控制類(lèi)型
二、input對(duì)象下的多種表單表現(xiàn)形式
頁(yè)面中大部分表單的形式都是通過(guò)輸入標(biāo)記input來(lái)實(shí)現(xiàn)的
<input name="" type="" value="" size="" maxlength="">
a.其中name表示輸入數(shù)據(jù)的名字，其作用是為了讓程序明白所提交的數(shù)據(jù)
<input type="text" name="length"> 這個(gè)輸入的數(shù)據(jù)命名為length var length=document.me.length.value;
如果缺少了這樣一個(gè)name屬性，雖然在瀏覽器中的顯示沒(méi)有什么變化，但是后臺(tái)程序后JavaScript程序就不能獲得提交的數(shù)據(jù)
b.type屬性表示所定義的是哪種類(lèi)型的表單形式，該屬性有九個(gè)可選值:
text 單行的文本框
password 將文本替換為"*"的文本框
checkbox 只能做二選一的是或否選擇
radio 從多個(gè)選項(xiàng)中確定的一個(gè)文本框
submit 確定命令文本框
hidden 設(shè)定不可被瀏覽用戶(hù)修改的數(shù)據(jù)
image 用圖片表示的確定符號(hào)
file 設(shè)置文件上傳
button 用來(lái)配合客戶(hù)端腳本
c.size:表示文本框字段的長(zhǎng)度
d.maxlength:表示可輸入的最長(zhǎng)的字符數(shù)量
e.value:表示預(yù)先設(shè)置好的信息
4.text文本框的樣式表單
<html>
<head>
<title>text樣式表單</title>
<style type="text/css">
input{
font:50% 微軟雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
輸入用戶(hù)名:<input type="text" name="name" size=20 maxlength=12> <br>
輸入郵箱地址:<input type="text" name="address" size=20 maxlength=20>
</form>
</body>
</html>代碼中size定義了文本框的長(zhǎng)度，而maxlength定義了這個(gè)文本框最多只能輸入12個(gè)字符，如果超出了這個(gè)長(zhǎng)度數(shù)據(jù)將不能輸入，這兩個(gè)text樣式的數(shù)據(jù)定義了不同的名字這很關(guān)鍵，否則一旦需要被程序調(diào)用數(shù)據(jù)將無(wú)法辨認(rèn)。
5.password輸入密碼的樣式表單（可以將文本使用保密形式展示出來(lái)的一個(gè)功能，根據(jù)不同的瀏覽器會(huì)使用點(diǎn)狀形態(tài)或星號(hào)符表示）
<html>
<head>
<title>password樣式表單</title>
<style type="text/css">
input{
font:50% 微軟雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
輸入用戶(hù)名:<input type="text" name="name" size=40 maxlength=12> <br>
輸入郵箱地址:<input type="text" name="address" size=20 maxlength=20><br>
輸入密碼:<input type="password" name="password" size=20 maxlenght=12>
</form>
</body>
</html>6.checkbox復(fù)選框的表單樣式（瀏覽器會(huì)在選擇欄前面提供一個(gè)小方框如果選擇小框中會(huì)添加小勾符號(hào)表示選中）
<html>
<head>
<title>checkbox樣式表單</title>
<style type="text/css">
input{
font:50% 微軟雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h4>注冊(cè)信息:</h4>
<input type="checkbox" name="truename" checked="checked">使用真實(shí)姓名
<h4>實(shí)名制可以方便您更好地和朋友交流</h4>
<input type="checkbox" name="address" checked="checked">顯示我的地址
<h4>如果去除勾選，其他用戶(hù)將無(wú)法查到你的地址</h4>
<input type="checkbox" name="mail" checked="checked">可以給我發(fā)郵件
<h4>如果勾選，我們將會(huì)為您發(fā)送來(lái)自廣告商的信息</h4>
</form>
</body>
</html>上面代碼中添加了checked="checked"表示復(fù)選框默認(rèn)值設(shè)置為checked,那么√符號(hào)會(huì)被默認(rèn)添加
7.radio單選按鈕的樣式表單（多選一表單）
radio樣式類(lèi)似于選擇題，在一組選項(xiàng)中選出唯一的一項(xiàng)，發(fā)送這列數(shù)據(jù)，其中給這組選項(xiàng)定義相同的名字，但是通過(guò)value屬性 來(lái)加以區(qū)別，因此，這里必須給input對(duì)象設(shè)定value值，而且不同對(duì)象的value值不能相同，否則數(shù)據(jù)無(wú)法辨認(rèn)
<html>
<head>
<title>radio樣式表單</title>
<style type="text/css">
input{
font:50% 微軟雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h4>性別</h4>
<input type="radio" name="gender" value="one">我是男的<br>
<h4>請(qǐng)正確選擇您的性別哦</h4>
<input type="radio" name="gender" value="two">我是女滴<br>
<h4>請(qǐng)正確選擇您的性別哦</h4>
</form>
</body>
</html>8.submit提交數(shù)據(jù)的樣式表單
該屬性創(chuàng)建一個(gè)按鈕，該按鈕的作用就是提交數(shù)據(jù)。當(dāng)點(diǎn)擊"提交"按鈕時(shí)，數(shù)據(jù)會(huì)發(fā)送到指定的地方。其中通過(guò)value值可以修 改按鈕上顯示的內(nèi)容。此外還有一個(gè)reset屬性，這是一個(gè)復(fù)位按鈕，當(dāng)被點(diǎn)擊時(shí)表單的內(nèi)容會(huì)被重新設(shè)置，回到頁(yè)面初始位置
<html>
<head>
<title>submit樣式表單</title>
<style type="text/css">
input{
font:100% 微軟雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h4>性別</h4>
<input type="radio" name="gender" value="one">我是男的<br>
<h4>請(qǐng)正確選擇您的性別哦</h4>
<input type="radio" name="gender" value="two">我是女滴<br>
<h4>請(qǐng)正確選擇您的性別哦</h4>
<input type="submit" name="submit" value="確定">
<input type="reset" name="submit" value="復(fù)位">
</form>
</body>
</html>9.hidden隱藏域的樣式表單
hidden屬性可以創(chuàng)建一個(gè)隱藏域，數(shù)據(jù)會(huì)被隱藏起來(lái)，用戶(hù)無(wú)法對(duì)其進(jìn)行操作（這些數(shù)據(jù)通常是用戶(hù)不關(guān)心的但是必須被提交 的數(shù)據(jù)）
10.image樣式的表單（可以看做圖像替換按鈕的技術(shù)，當(dāng)圖像被點(diǎn)擊時(shí)，數(shù)據(jù)一并被提交至服務(wù)器）
<input type="image" src="" alt="確定">
使用src屬性指定這張圖像的路徑，使用alt屬性來(lái)添加文本注釋?zhuān)藭r(shí)提交按鈕被替換成一個(gè)小小的圖像，當(dāng)點(diǎn)擊圖像時(shí)，其作 用就相當(dāng)于submit按鈕，但是當(dāng)表單數(shù)據(jù)被提交的同時(shí)，用戶(hù)所單擊的圖像的位置坐標(biāo)（image.x=23 image.y=59）也會(huì)被發(fā)送
表單中還有一種觸發(fā)事件的button表單，它只是一個(gè)按鈕，單個(gè)button按鈕并不會(huì)提交任何數(shù)據(jù)，它的作用是用來(lái)調(diào)用前端頁(yè) 面，即客戶(hù)端的腳本程序
<input type="button" value="運(yùn)行" onclick="calculate();">
11.file上傳文件的樣式表單
該表單允許用戶(hù)上傳自己的文件，例如用戶(hù)上傳自己的圖像給服務(wù)器，用來(lái)改變用戶(hù)在不同網(wǎng)站上的形象圖片。需要注意的 是，當(dāng)使用file樣式的表單時(shí)，必須在<form>標(biāo)簽中說(shuō)明編碼方式，這樣服務(wù)器才可以接收到正確信息
<body> <h4>上傳我的文件</h4> <form action="some.php" enctype="multipart/form-data" name="myform"> <input type="file" name="uploadfile"> </form> </body>
三、textarea對(duì)象的表單
該對(duì)象就像是input對(duì)象中的text表單，只不過(guò)是擴(kuò)展過(guò)的text樣式表單，可以通過(guò)行(rows)屬性和列(cols)屬性來(lái)編輯文本域的大 小，常見(jiàn)于留言板、論壇中回帖時(shí)的文本框等
<html>
<head>
<title>textarea對(duì)象的表單</title>
<style type="text/css">
textarea{
font:100% 微軟雅黑;
color:navy;
}
</style>
</head>
<body>
<form action="some.php" method="post" enctype="multipart/form-data" name="myform">
<textarea name="some" rows=10 cols=50 value="say">請(qǐng)文明用語(yǔ):
</textarea>
</form>
</body>
</html>textarea屬性標(biāo)簽必須要封閉，且生成頁(yè)面時(shí)在文本框中會(huì)預(yù)先設(shè)置好文本“請(qǐng)文明用語(yǔ)”，但是用戶(hù)不得不先刪去預(yù)先的文本再 編輯自己的內(nèi)容。當(dāng)文本框中輸入的內(nèi)容超出預(yù)先設(shè)置的行數(shù)時(shí)會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，如果沒(méi)有超出文本框的范圍則滾動(dòng)條是灰 色的
四、select對(duì)象表單
使用select將創(chuàng)建一個(gè)列表樣式的表單，顯示為出現(xiàn)一個(gè)下拉列表框，令用戶(hù)可以方便的選擇其中一個(gè)目錄，通常在一些要求填 寫(xiě)地區(qū)、生日等信息中，設(shè)計(jì)者可以給使用者準(zhǔn)備好選項(xiàng)，需要使用<option>標(biāo)簽來(lái)定義可供選擇的每一項(xiàng)
<html>
<head>
<title>select對(duì)象的表單</title>
<style type="text/css">
select{
font:100% 微軟雅黑;
color:Green;
}
</style>
</head>
<body>
<form action="some.php" method="post" enctype="multipart/form-data" name="myform">
<h4>地址</h4>
<select name="上海">
<option>黃浦區(qū)</option>
<option>虹口區(qū)</option>
<option>靜安區(qū)</option>
<option>寶山區(qū)</option>
</select>
</form>
</body>
</html>用戶(hù)可以通過(guò)下拉列表框選擇一個(gè)“地址”，而這個(gè)數(shù)據(jù)會(huì)被表單發(fā)送到服務(wù)器，此外還可以通過(guò)value屬性為每一個(gè)option指定不 同的值，這樣的話(huà)value設(shè)置的值將取代option的文本內(nèi)容。注意如果設(shè)計(jì)者希望預(yù)先設(shè)置初始值，那么在所希望的option中添加 selected="selected"就可以了，如<option selected="selected">浦東新區(qū)</option>,否則默認(rèn)初始值應(yīng)該是第一個(gè)出現(xiàn)的<option> 的文本內(nèi)容。
如果下拉列表內(nèi)內(nèi)容太多，可以使用<optgroup>標(biāo)簽配合label屬性來(lái)給選項(xiàng)分類(lèi)
<select name="上海"> <optgroup label="Team1"> <option>黃浦區(qū)</option> <option selected="selected">虹口區(qū)</option> <option>靜安區(qū)</option> <option>寶山區(qū)</option> </optgroup> <optgroup label="Team2"> <option>長(zhǎng)寧區(qū)</option> <option>楊浦區(qū)</option> <option>徐匯區(qū)</option> <option>普陀區(qū)</option> </optgroup> </select>
此外如果不希望select對(duì)象以下拉列表框的形式展現(xiàn)出來(lái)，有一種方式可以將目錄項(xiàng)以滾動(dòng)條的樣式表現(xiàn)出來(lái)，只需要在select 標(biāo)簽中加入size屬性，如"size=6"表示是一個(gè)能容納6行文字的文本框，當(dāng)目錄項(xiàng)超出設(shè)置的行數(shù)時(shí)將出現(xiàn)滾動(dòng)條
<select name="上海" size="5"> <option>黃浦區(qū)</option> <option selected="selected">虹口區(qū)</option> <option>靜安區(qū)</option> <option>寶山區(qū)</option> <option>長(zhǎng)寧區(qū)</option> <option>楊浦區(qū)</option> <option>徐匯區(qū)</option> <option>普陀區(qū)</option> </select>
五、表單域集合
如果表單的項(xiàng)目過(guò)多或?yàn)榱诵揎棻韱尾糠?，可以通過(guò)使用表單域?qū)⒈韱畏纸M，表單域的代碼由<fieldset>標(biāo)簽和<legend>標(biāo)簽組 合而成，默認(rèn)情況下，<fieldset>標(biāo)簽勾畫(huà)出表單域的框形，<legend>標(biāo)簽的對(duì)象像標(biāo)題一樣出現(xiàn)在框的左上角
<html> <head> <title>表單域</title> </head> <body> <form action="some.php" method="post" name="myform"> <fieldset> <legend>注冊(cè)信息:</legend> 輸入用戶(hù)名:<input type="text" name="name" size=20 maxlength=12> <!--這里可以放入許多樣式的表單--> </fieldset> </form> </body> </html>
感謝你的閱讀，希望你對(duì)“HTML表單有什么用”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：HTML表單有什么用
網(wǎng)頁(yè)地址：http://chinadenli.net/article12/gidedc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、企業(yè)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、服務(wù)器托管
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)
- 不能不看：成都移動(dòng)網(wǎng)站建設(shè)7大注意事項(xiàng) 2022-08-12
- 煙臺(tái)移動(dòng)網(wǎng)站建設(shè)：做手機(jī)網(wǎng)站如何保證一個(gè)較快的加載速度？ 2021-11-11
- 企業(yè)移動(dòng)網(wǎng)站建設(shè)需要注意哪些用戶(hù)反感的設(shè)定？ 2022-10-25
- 移動(dòng)網(wǎng)站建設(shè)的基本技巧有哪些？ 2022-09-25
- 移動(dòng)網(wǎng)站建設(shè)過(guò)程有哪些地方需要重視呢 2021-12-11
- 移動(dòng)網(wǎng)站建設(shè)如何做好極簡(jiǎn)設(shè)計(jì) 2022-08-20
- 移動(dòng)網(wǎng)站建設(shè)需要注意哪些？ 2013-11-20
- 汕頭移動(dòng)網(wǎng)站建設(shè)：做移動(dòng)網(wǎng)站這些問(wèn)題必須要引起注意！ 2021-08-31
- 成都移動(dòng)網(wǎng)站建設(shè)公司的六大重要步驟 2021-12-09
- 廣州移動(dòng)網(wǎng)站建設(shè)未來(lái)會(huì)成為主流嗎？ 2022-12-31
- 移動(dòng)網(wǎng)站建設(shè)需要注意的問(wèn)題 2022-12-17
- 成都企業(yè)移動(dòng)網(wǎng)站建設(shè)要怎樣建設(shè)才能適應(yīng)互聯(lián)網(wǎng)的新時(shí)代要求？ 2022-10-24