表單與內嵌網頁

• 表單
  表單(form)就是網頁上用來接收使用者輸入的互動性元素。常見的像是註冊表單、登入表單...等。

<form name="..." action="..." method="...">
    帳號：<input ...>
    密碼：<input ...>
</form>

form有幾個基本屬性：

1. name：表單的名稱，之後介紹javascript，就會透過此名稱來存取表單內容。
2. action：指定表單內容要傳送給哪一個伺服器端的程式處理。
3. method：指定表單送出方式，可設為GET或POST。GET表示將表單資料附在URL後面直接送出。POST表示將資料另外包在HTTP通訊封包中送出，如果傳送之資料較為隱私或大量，適合使用POST。

注意：form之中不可加入另一個form元素，也就是不能建立巢狀的表單。

• 建立各種表單欄位
  輸入欄位：
  <input type="text" name="名稱" value="值">
  只要設定不同type屬性值，就會出現不同的輸入欄位。

1. type="text"：一般的文字輸入欄位。
2. type="password"：密碼輸入欄位。
3. type="submit"：代表送出資料的按鈕。
4. type="checkbox"：表多選。要將他們的name設為一樣。
5. type="radio"：表單選。要將他們的name設為一樣。ex:性別。
6. type="reset"：其會將表單內容全部清除或回復預設值。
7. type="date"：表日期。
8. type="time"：表時間。
   如果想看更多type，請見範例

只要設定某種type，其在提交時皆會依照type做檢核。例如type="email"，則他就會檢查所輸入之值是否符合email的格式。

輸入欄位其他屬性：
<input type="text" name="名稱" value="值">

1. name：設定欄位名稱，必須明確指定欄位的名稱才能送出表單資料。
2. value：對於一般輸入欄位，此屬性可設定欄位預設值。
3. size：指定輸入欄位在畫面上的寬度，單位為字元數。
   如果想看更多屬性，及其使用方式，請見範例

下拉選單：

<select name="favorite" id="country" required>
    <optgroup label="Asian"> 
        <option value="Taiwan" selected>Taiwan</option>
        <option value="Singapore" >Singapore</option>
    </optgroup>
    <optgroup label="North America"> 
        <option value="USA">USA</option>
        <option value="Canada">Canada</option>
    </optgroup>
    <optgroup label="Africa"> 
        <option value="S_Africa">South Africa</option>
        <option value="Egypt">Egypt</option>
    </optgroup>
</select>

將optgroup去掉也可正常運行。只是沒有小分類而已。

範例

• 強化表單介面及操作的便利性

1. fieldset：將多個輸入欄位框在一起
2. legend：標示fieldset方框上的說明文字
   
   此為fieldset範例，上面的"Your General Details"則為legend
   範例程式碼

• 使用iframe建立內嵌窗格

<iframe src="網站URL/內嵌的網站" width="窗格寬度" height="窗格高度" sandbox="allow-forms allow-popups"></iframe>

安全控管
可利用sandbox屬性指定iframe網頁允許的功能：

• allow-froms：內嵌的窗格中允許使用表單
• allow-popups：允許內嵌窗格開啟新視窗
• allow-scripts：允許內嵌窗格執行JavaScript程式
• allow-top-navigation：允許內嵌窗格在載入網頁時，將網頁載到上層的網頁。(即非開新視窗)
• 只寫屬性sandbox：採最嚴格的安全限制，不能執行JavaScript、不能使用表單、不能開新視窗等等