close

網頁程式設計 學習紀錄(七) 表單與後端處理

 

包含以下六個部分：

  1. 建立表單- <form>、<input>元素
  2. HTML4.01既有的輸入類型
  3. HTML5新增的輸入類型
  4. 標籤文字 <label>元素
  5. 將表單欄位框起來 <fieldset>、<legend>元素
  6. 其他新增的表單元素

1.建立表單- <form>、<input>元素

表單可以提供輸入介面、讓使用者輸入資料，再將資料傳回Web伺服器做進一步處理。

(1)<form元素>

<form>元素用來在HTML文件中插入表單，屬性如下：

 

屬性 說明

accept-charset

 指定表單資料的字元編碼方式
action="uri" 指定表單處理程式的相對或絕對位址
accept="..." 指定MIME類型(網際網路媒體類型)
enctype="..." 指定將表單傳回Web的編碼方式
method="{get,post}" 指定表單資料傳送給表單處理程式的方式(預設為get)
target="..." 指定用來顯示表單處理程式之目標框架
name="n" 指定表單的名稱(限定英文且唯一)
autocomplete="{on,off,default}" 指定是否啟用自動完成功能(開啟,關閉,繼承form)
novalidate 指定再提交表單時不要進行驗證

 

(2)<input元素>

<input>元素用來在表單中插入樹入欄位或按鈕其屬性如下：

屬性 說明
align="{left,center,right}"  指定圖片提交按鈕的對齊方式
accept="..."  指定提交檔案時的MIME類型
checked  將選擇按鈕或核取方塊預設為已選取按鈕
disable  取消表單欄位，使表單資料無法被接受或提交
maxlength="n"  指定單行文字方塊、密碼欄位、搜尋欄位等表單欄位的最多字元數
name="..."  指定表單欄位之名稱(限定英文且唯一)
notab  不允許使用者使用[Tab]鍵的方式移動至表單欄位
readonly  不允許使用者變更表單欄位的資料
size="n"  指定單行文字方塊、密碼欄位、搜尋欄位等表單欄位的寬度(n不是指可輸入字元數，而是指在畫面上可以看到的字元數)
scr="uri"  圖片提交按鈕的位址(當type="image"時)
type="state"  指表單欄位的輸入類型
usemap  指定瀏覽器端影像地圖所在的檔案位址及名稱
value="n"  指定表單欄位的初始值
form="formid"  指定表單欄位隸屬於ID為formid的表單
min="n"、max="n"、step=:"n"  指定數字輸入類型或日期輸入類型的最小值、最大值、間隔值
required  指定使用者必須在表單欄位中輸入資料
multiple  允許使用者提交多個檔案，若允許使用者輸入以逗號隔開的多個墊子郵件地址
pattern="..."  針對表單欄位指定進一步的輸入格式(格式化輸出)
autocomplete="{on,off,default}"  指定是否啟用自動完成功能(開啟,關閉,繼承form)
autofocus  指定載入網頁的當下，令焦點自動移至表單欄位
placeholder="..."  指定在表單欄位內顯示提示文字，待使用者將焦點移至表單欄位，該題是文字會自動消失
list  list屬性可以和HTML5新增的<datalist>元素搭配，讓使用者從預先輸入的清單中選擇資料或自行輸入其他資料

(3)<type="state"屬性>

HTML4.01既有的TYPE屬性值  輸入類型 HTML4.01既有的TYPE屬性值 輸入類型
type="text"  單行文字方塊 type="reset"  重新輸入按鈕
type="password"  密碼欄位 type="file"  上傳檔案
type="radio"  選擇鈕 type="image"  圖片提交按鈕
type="checkbox"  核取方塊 type="hidden"  隱藏欄位
type="submit"  提交按鈕 type="botton"  一般按鈕
HTML5 新增的TYPE屬性值  輸入類型 HTML5 新增的TYPE屬性值  輸入類型
type="email"  電子郵件地址 type="date"  日期
type="url"  網址 type="time"  時間
type="search"  搜尋欄位 type="datetime" UTC世界標轉時間
type="tel"  電話號碼 type="month"  月份
type="number"  數字 type="week"  一年的第幾週
type="ranger"  指定範圍內的數字 type="datetime-local"  本地日期時間
type="color"  色彩    

 

2.HTML4.01既有的輸入類型

(1)按鈕、單行文字方塊、選擇鈕、核取方塊

13.JPG

以下為範例程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單</title>
</head>
<body>
    <form>
        <!-- 單行文字方塊 -->
        姓  名：<input type="text" name="Username" size="40"><br>
        E-Mail：<input type="text" name="UserMail" size="40" value="Username@mailserver"><br>
        <!-- 選擇鈕 -->
        年  齡：
        <input type="radio" name="Userage" value="age1">未滿20歲
        <input type="radio" name="Userage" value="age2" checked>20~29
        <input type="radio" name="Userage" value="age3">30~39
        <input type="radio" name="Userage" value="age4">40~49
        <input type="radio" name="Userage" value="age5">50歲以上<br>
        <!-- 核取方塊 -->
        常使用的電子產品：
        <input type="checkbox" name="Useproduct" value="computer" checked>電腦
        <input type="checkbox" name="Useproduct" value="cellphone">手機
        <input type="checkbox" name="Useproduct" value="tablet"> 平板電腦<br>
        <!-- 提交與重新輸入按鈕 -->
        <input type="submit" value="提交">
        <input type="reset" value="重新輸入">
    </form>

</body>
</html>

(2)多行文字方塊、下拉式選單

多行文字方塊可以使用<textarea>元素

下拉式選單則使用<select>搭配<option>元素

14.JPG

以下為範例程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單</title>
</head>
<body>
    <form>
        <!-- 單行文字方塊 -->
        姓&nbsp;&nbsp;&nbsp;名：<input type="text" name="Username" size="40"><br>
        E-Mail：<input type="text" name="UserMail" size="40" value="Username@mailserver"><br>
        <!-- 選擇鈕 -->
        年&nbsp;&nbsp;&nbsp;齡：
        <input type="radio" name="Userage" value="age1">未滿20歲
        <input type="radio" name="Userage" value="age2" checked>20~29
        <input type="radio" name="Userage" value="age3">30~39
        <input type="radio" name="Userage" value="age4">40~49
        <input type="radio" name="Userage" value="age5">50歲以上<br>
        <!-- 核取方塊 -->
        使用的電子產品：
        <input type="checkbox" name="Useproduct" value="computer" checked>電腦
        <input type="checkbox" name="Useproduct" value="cellphone">手機
        <input type="checkbox" name="Useproduct" value="tablet"> 平板電腦<br>
        <!-- 多行文字方塊 -->
        使用電子產品時遇到的問題：<br>
        <textarea name="UserTrouble" cols="45" rows="4" placeholder="請輸入訊息"></textarea><br>
        <!-- 下拉式選單 -->
        玩過的遊戲？(可複選)：<br>
        <select name="Usergame" size="4" multiple>
            <option value="救世者之樹">救世者之樹
            <option value="少女前線" selected="">少女前線
            <option value="碧蘭航線">碧蘭航線
            <option value="劍靈">劍靈
        </select><br>
        <!-- 提交與重新輸入按鈕 -->
        <input type="submit" value="提交">
        <input type="reset" value="重新輸入">
    </form>

</body>
</html>

3.HTML5新增的輸入類型

有E-Mail類型、Number類型、range類型、

color類型、tel類型、日期時間類型

以下為範例程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>表單2</title>
</head>
<body>
    <form>
        <!-- E-mail -->
        <input type="email"><br>
        <!--URL -->
        <input type="url"><br>
        <!--Search -->
        <input type="search"><br>
        <!--Number -->
        <input type="number" min="0"max="10" step="2">
        <!--Range -->
        <input type="number" min="0"max="12" step="2">
        <!--Color -->
        <input type="Color"><br>
        <input type="submit" value="提交">
    </form>

</body>
</html>

4.標籤文字 <label>元素

許多欄位會有預設的標籤文字，例如用來將<label>與<input>的id做綁定

此時可以使用<label>元素來指定，屬性如下：

for="fieldid"：指定標籤文字是與ID為fieldid的表單欄位產生關聯

form,="formid"：指定<label>元素隸屬於ID為formid的表單

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單3</title>
</head>
<body>
    <form>
        <p><label>姓名：<input type="text" name="username"></label></p>
        <p><label>年齡：<input type="number" name="userage" min="1"></label></p>
        <input type="submit">
        <input type="reset">
    </form>

</body>
</html>

 

5.將表單欄位框起來 <fieldset>、<legend>元素

(1)<fieldset>元素

<fieldset>元素用來將表單欄位框起來，其屬性如下：

屬性 說明
disable  取消<fieldset>所框起來之表單欄位，使之無法存取
name="..."  指定<fieldset>元素的名稱
form="formid"  指定<fieldset>元素隸屬於ID為formid的表單

 

(2)<legend>元素

<legend>元素用來在方框上加上說明文字，其屬性如下：

align="{left,centet,right}"：指定說明文字的位置

 

範例程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>個人資料</legend>
            <!-- 單行文字方塊 -->
            姓&nbsp;&nbsp;&nbsp;名：<input type="text" name="Username" size="40"><br>
            E-Mail：<input type="text" name="UserMail" size="40" value="Username@mailserver"><br>
            <!-- 選擇鈕 -->
            年&nbsp;&nbsp;&nbsp;齡：
            <input type="radio" name="Userage" value="age1">未滿20歲
            <input type="radio" name="Userage" value="age2" checked>20~29
            <input type="radio" name="Userage" value="age3">30~39
            <input type="radio" name="Userage" value="age4">40~49
            <input type="radio" name="Userage" value="age5">50歲以上<br>
        </fieldset>
        <fieldset>
        <legend>產品調查</legend>
            <!-- 核取方塊 -->
            使用的電子產品：
            <input type="checkbox" name="Useproduct" value="computer" checked>電腦
            <input type="checkbox" name="Useproduct" value="cellphone">手機
            <input type="checkbox" name="Useproduct" value="tablet"> 平板電腦<br>
            <!-- 多行文字方塊 -->
            使用電子產品時遇到的問題：<br>
            <textarea name="UserTrouble" cols="45" rows="4" placeholder="請輸入訊息"></textarea><br>
            <!-- 下拉式選單 -->
            玩過的遊戲？(可複選)：<br>
            <select name="Usergame" size="4" multiple>
                <option value="救世者之樹">救世者之樹
                <option value="少女前線" selected="">少女前線
                <option value="碧蘭航線">碧蘭航線
                <option value="劍靈">劍靈
            </select><br>
            <!-- 提交與重新輸入按鈕 -->
            <input type="submit" value="提交">
            <input type="reset" value="重新輸入">
        </fieldset>
    </form>

</body>
</html>

15.JPG

6.其他新增的表單元素

HTML5除了上述表單元素，還新增了<output>、<progress>、<meter>、<keygen>、<optgroup>等表單元素

(1)<output>元素

<output>元素用來顯示計算結果

(2)<progress>元素

<progress>元素用來顯示進度列，代表某個工作的完成進度

(3)<meter>元素

<meter>元素用來顯示某個範圍內的比例或量標

(4)<keygen>元素

<keygen>元素會根據RSA演算法產生一對金鑰

(5)<outgroup>元素

<outgroup>元素可以替一群<option>元素加上標籤，且沒有結束標籤。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 ivankao 的頭像
    ivankao

    IvanKao的部落格

    ivankao 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄