iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

網頁前端工程探討系列 第 8

認識HTML(六):表格與表單

基本的表格構成
在HTML中的表格結構是以欄位定義出來的。

表格會用到以下三個元素:tabletrtd,標示出表格的位置。

  1. table:標示出表格位置
  2. tr:在table元素之中用tr元素標示出每一列。表格如果有3列,就要有3個tr元素。
  3. td:在tr元素內,用td元素標示出每一個儲存格的內容。例如:每列有3個儲存格,每個tr元素中就要有 3個td元素。

在HTML文件中其語法格式如下:

https://ithelp.ithome.com.tw/upload/images/20210923/20141905lA5hfxVTu9.png

程式執行後的結果如下:

https://ithelp.ithome.com.tw/upload/images/20210923/201419058Jkr3rh3eG.png


表單
何謂表單(form)
網頁中的表單,主要是用來收集瀏覽者的資訊。像是網路上常見的的註冊登入表單。瀏覽者只要填完表單中的調查欄位,輸入資料並送出時,就可以把資料傳回WWW伺服器端,做進一步處理。程式讀取資料處理完成後,也會以網頁的形式回應。例如註冊成功、登入成功
圖例:

https://ithelp.ithome.com.tw/upload/images/20210923/20141905XehJPro1UN.png

建立表單form元件
在網頁中建立表單需使用HTML的form元素來製作,而且所有表單的控制元件都要放在form元素之中。
<FORM>
<!-- 表單的控制元件 -->
</FORM>
你可以在 <FORM> 標籤中設定以下的屬性:

  • action:指定表單內容要傳送給哪一個伺服器端的程式處理。若未設定此屬性,表示由目前的檔案本身處理, 我們所寫的HTML文件,並無處理表單的能力。
  • method:指定表單資料送出方式,可設定為GET或POST。
  • name: 指定表單的名稱客戶端程式(如 JavaScript)或伺服端程式(如 ASP 或 PHP)可以用這個名稱來 存取表單的內容。

上一篇
認識HTML(五):建立超連結和清單
下一篇
認識HTML(七):表單欄位(上)
系列文
網頁前端工程探討30

尚未有邦友留言

立即登入留言