整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
多數(shù)PHP程序都使用HTML表單從用戶(hù)那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶(hù)單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。
包含表單的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è)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>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶(hù)鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(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)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶(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><input type="hidden" name="text"value=""><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
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">個(gè)好看的表單 前端靜態(tài)頁(yè)面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁(yè)</title>
<style type="text/css">
/* Basic Grey */
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #E4E4E4;
margin: -10px -15px 30px -10px;
color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
display: block;
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
/* background: #FFF url('down-arrow.png') no-repeat right;*/
/* background: #FFF url('down-arrow.png') no-repeat right);*/
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background: #E27575;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #9E3F3F;
cursor: pointer;
}
.basic-grey .button:hover {
background: #CF7A7A
}
</style>
</head>
<body>
<form action="" method="post">
<div class="basic-grey">
<h1>Contact Form
<span>Please fill all the texts in the fields.</span>
</h1>
<label>
<span>Themplate :</span>
<select id="template" name="themplate" οnchange="changeStyle();">
<option value="basic-grey">basic-grey</option>
<option value="elegant-aero">elegant-aero</option>
<option value="smart-green">smart-green</option>
<option value="white-pink">white-pink</option>
<option value="bootstrap-frm">bootstrap-frm</option>
<option value="dark-matter">dark-matter</option>
</select>
</label>
<label>
<span>Your Port :</span>
<input id="port" type="text" name="port" placeholder="The port number you want to open" />
</label>
<label>
<span>Your Port :</span>
<input id="ip" type="text" name="port" placeholder="The port number you want to open" />
</label>
<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span> </span>
<input type="button" class="button" value="Send" />
</label>
</div>
</form>
<script>
function changeStyle() {
var template = document.getElementById("template");
var index = template.selectedIndex;
var templatevalue = template.options[index].value;
var templatecss = document.getElementById("templatecss");
templatecss.setAttribute("href","css/" + templatevalue + ".css");
document.getElementsByTagName("form")[0].setAttribute("class",templatevalue);
}
</script>
</body>原文鏈接：https://blog.csdn.net/ldy199911/article/details/109111665?utm_medium=distribute.pc_category.none-task-blog-hot-9.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-9.nonecase&request_id=
原作者：ldy199911
來(lái)源：CSDN
單的作用就是采集用戶(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表單
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
