iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

網頁程式設計so easy系列 第 6

Day5 [HTML語法介紹-2]

  • 分享至 

  • xImage
  •  

表單與內嵌網頁

  • 表單
    表單(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>

http://ithelp.ithome.com.tw/upload/images/20161206/201033854pEQztLpFj.png

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

範例

  • 強化表單介面及操作的便利性
  1. fieldset:將多個輸入欄位框在一起
  2. legend:標示fieldset方框上的說明文字
    http://ithelp.ithome.com.tw/upload/images/20161206/20103385XQ7H2ewg4b.png
    此為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、不能使用表單、不能開新視窗等等

上一篇
Day1 [網頁程式設計簡介]
下一篇
Day6 [CSS介紹-1]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言