PHP筆記(二) HTML表單

多數PHP程序都使用HTML表單從用戶那里獲取數據并計算結果。

HTML表單的一些基本原則

選擇適合于收集的數據類型和提供交互方式的控件。
清楚標記每一個控件，這樣用戶就可以理解其功能。
盡可能將標簽對齊。將控件的左邊緣對齊。
將相關的標簽分組，并且通過設計中使用空白將每一個分組分開。
表單上的控件順序應該類似于用戶操作他們的順序。

創建基本HTML表單

首先創造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數據發送到服務器。）一個單獨的HTML頁面可以包含多個表單。

創建HTML結構

包含表單的HTML結構和和普通的HTML結構一樣。

<HTML>
  <HEAD>
  <TITLE>標題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁面中可以使用任何HTML標簽。基本的表單使用FROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數據，可以是絕對路徑或者相對路徑。

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

合并控件

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

文本框：允許用戶鍵入信息以發送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準確訪問其內容，因此它應該是唯一的且符合PHP變量命名規則（但不需要$符號），單標簽。VALUE屬性指明出現在提交按鈕上面的標題。創建方式如下：

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

提交按鈕：允許用戶將一個表單的內容發送到服務器，一個HTML表單對應應該有一個提交按鈕。

示例：一個完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標題</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>

使用多個表單

可以在一個HTML頁面中包含多個表單，注意下一個表單的FORM開始之前需要結束前一個FORM表單。

<HTML>
  <HEAD>
  <TITLE>標題</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屬性用于設置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。

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

創建文本區域

文本區域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區域內可以看到的文本行數，充滿時會滾動。COLS屬性指明可見文本列數與行數類似。WRAP屬性指明文本區域內單詞換行的方式，可以指定如下值。該標簽為雙標簽。

值	說明
off	禁止單詞換行但用戶可以輸入換行符強制換行
virtual/soft	各行顯示為換行，但是換行并沒有被發送到服務器
physica/hard	啟用了單詞換行

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

創建密碼框

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

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

創建復選框

取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現，該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發送到服務器的值，默認發送on值。法如下：

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

創建單選按鈕

語法與復選框屬性含義相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

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

創建列表框

用戶可以選擇一個或者多個選項，它是一個滾動菜單。

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

name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們

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

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

創建隱藏域

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

實現上傳文件的HTML表單

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

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

超文本標記語言文本 .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音樂文件：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂文件 .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">

個好看的表單前端靜態頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</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

來源：CSDN

單的作用就是采集用戶填寫的信息,將其發往服務器做相應的處理

表單的元素必須寫在form標簽中,一個form就是一個表單,表單中最重要的元素是input

input元素有一個type屬性,type的可選值有：1)button(普通按鈕)2checkbox(復選框)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">
        用 戶 名:<input type="text" value="張三" size="8" name="txtName" /><br /><br />
        用戶密碼:<input type="password" size="8" /><br /><br />
        用戶性別:<input type="radio" name="rdGender" value="1" />男<input type="radio" name="rdGender"
            value="0" />女<br /><br />
        興趣愛好:<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">
				北京百度網訊科技有限公司
				統一社會信用代碼/注冊號：91110000802100433B
				注冊資本：1342128萬元
				法定代表人：梁志祥
				成立日期：2001-06-05
				營業期限：2001-06-05 至 長期
				企業類型：有限責任公司(自然人投資或控股)
				注冊地址：北京市海淀區上地十街10號百度大廈2層
				經營范圍：技術轉讓、技術咨詢、技術服務、技術培訓、技術推廣；設計、開發、銷售計算機軟件；經濟信息咨詢；利用www.baidu.com、www.hao123.com(www.hao222.net、www.hao222.com)網站發布廣告；設計、制作、代理、發布廣告；貨物進出口、技術進出口、代理進出口；醫療軟件技術開發；委托生產電子產品、玩具、照相器材；銷售家用電器、機械設備、五金交電（不含電動自行車）、電子產品、文化用品、照相器材、計算機、軟件及輔助設備、化妝品、衛生用品、體育用品、紡織品、服裝、鞋帽、日用品、家具、首飾、避孕器具、工藝品、鐘表、眼鏡、玩具、汽車及摩托車配件、儀器儀表、塑料制品、花、草及觀賞植物、建筑材料、通訊設備、汽車電子產品、器件和元件、自行開發后的產品；預防保健咨詢；公園門票、文藝演出、體育賽事、展覽會票務代理；翻譯服務；通訊設備和電子產品的技術開發；計算機系統服務；車聯網技術開發；汽車電子產品設計、研發、制造（北京市中心城區除外）；演出經紀；人才中介服；經營電信業務；利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說（網絡文化經營許可證有效期至2020年04月17日）；因特網信息服務業務（除出版、教育、醫療保健以外的內容）；圖書、電子出版物、音像制品批發、零售、網上銷售。（市場主體依法自主選擇經營項目，開展經營活動；演出經紀、人才中介服務、利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說、經營電信業務以及依法須經批準的項目，經相關部門批準后依批準的內容開展經營活動；不得從事國家和本市產業政策禁止和限制類項目的經營活動。）
			</textarea><br /><br />
        <input type="button" value="按鈕" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

還有一些次要的表單元素以后需要用到再說;關于瀏覽器兼容性自己測試不再截圖

絕大多數表單元素必須有name與value屬性,這樣的表單元素才能將此元素的的value值傳遞給服務器;如果method屬性值為get,點擊submit這個按鈕時在網址中就能看到填寫的值

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

button:只是一個普通按鈕,以后會通過JavaScript進行操作;submit:自動將填寫在此網頁表單元素的值發送給action指定的服務器相應的程序去處理;reset:將表單元素中填入的值還原為默認值

HTML表單

在線咨詢

上一篇：HTML頭部 <head>
下一篇：HTML基礎之HTML常用標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。