PHP與Web頁面互動

表單

Ｗeb表單的功能是讓浏覽者和網站有一個互動的平台。Web表單主要用來在網頁中發送資料到伺服器，例如，送出注冊資訊時需要使用表單．當使用者填寫資訊後做送出（submit）操作，即将表單的内容從用戶端的浏覽器傳送到服務端，經過伺服器上的PHP程式進行處理後，再将使用者所需的資訊傳遞回用戶端的浏覽器上．通過獲得使用者資訊，使用PHP與Web表單實作了互動。

如何建立表單

使用<form>标記，并在其中插入相關的表單元素，即可建立一個表單．

表單結構如下：

<form name="form_name" method="method" action="url" enctype="value" target="target_win" id="id">

......插入的表單元素

</form>

From标記的屬性

Name：表單名稱

Method：定義表單中資料的送出方式，可取值為GET 和POST中的一個。

Action：将表單中的資料送出到哪個檔案中進行處理，這個位址可以是絕對的URL，也可以是相對的URL。

Enctype：application/x-www-form-urlencoded：預設的MIME類型，表示表單資料應該被編碼成一個長串。

Multipart/form-data：上傳檔案專用類型，表示将每一個編碼作為一個獨立的部分使用。

Target：該屬性和連結中的同名屬性類似，用來指定目标視窗和目标幀。target的屬性值。

_blank：将傳回頁面資訊顯示在新的視窗中。

Parent：将傳回資訊顯示在父級視窗中。

Self：将傳回資訊顯示在目前視窗中。

Top：将傳回資訊顯示在頂級視窗中。

表單元素

表單（form）由表單元素組成。常用的表單元素有以下幾種标記：輸出域标記<input>、選擇域标記<select>、文字域标記<textarea>等。

1、輸入域标記<input>

輸入域标記<input>是表單中最常的标記之一。常用的輸入域标記有文本框、按鈕、單選按鈕、複選框、檔案域等。

文法格式如下：

<input name="filed_name" type="type_name">

參數name是指輸入域的名稱，參數type是指輸入域的類型。使用者選擇使用的類型由type屬性決定，type屬性取值

2.選擇域标記<select>和<option>

通過選擇域标記<select>和<option>可以建立一個清單或者菜單。菜單的使用是為了節省空間，正常狀态下隻能看到菜單的一個選項，單擊右側的下三角按鈕打開菜單後才能看到全部的選擇，清單可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，浏覽者可以通過拖動滾動條看各選項。

3、文本域标記<textarea>

文本标記<textarea>用來制作多行的文本域，可以在其中輸入更多的文本。

<textarea name="名稱"　 rows=”行數”　 cols=”列數”  wrap="soft|hard">

文本内容

</textarea>

其中參數name表示文本域的名稱；row表示文本域的行數；cols表示文本域的列數；參數value表示文字域的預設值；參數wrap用于設定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行。wrap的值

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

        <fieldset>

                 <legend>學生檔案</legend>

                 <label for="">

                         姓名: <input type="text" required autofocus placeholder="請輸入姓名">

                 </label>

                         學号: <input type="tel" pattern="1\d{10}" placeholder="學号 ">

                         郵箱位址: <input type="email" placeholder="請輸入郵箱位址">

                         所屬學院: <input type="text" list="course" placeholder="新華電腦專修學院">

                         <datalist id="course">

                                  <option value=" 新華電腦專修學院"></option>

                                  <option value="PHP"></option>

                                  <option value="JAVA"></option>

                                  <option value="Android"></option>

                                  <option value="IOS"></option>

                                  <option value="UI設計"></option>

                                  <option value="C++"></option>

                         </datalist>

                         入學成績: <input type="number" max="100" id="score" step="10" value="80">

                         基礎水準: <meter min="0" max="100" low="60" high="80" value="80" id="level"></meter>

                         入學日期: <input type="date" value="2016-01-01">

                         畢業時間: <input type="date" value="2016-05-01">

                         課程進度: <progress min="0" max="100" value="10"></progress>

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

        </fieldset>

秦鵬

本文轉自 

新網學會 51CTO部落格，原文連結：http://blog.51cto.com/xwxhvip/2050363 ，如需轉載請自行聯系原作者