格式化

格式化(Formating)

List
Tables
Forms

清單 (List)

分為有序的 <ol> 和無序的 <ul> 清單，前者會有清單項目編號，後者則無。

有序(ordered)清單

以下是有序的清單 (看效果)：

<ol>
<li>General Information
<li>Course Outline
<li>Textbook and References
<li>Schedule and Notes
<li>Homework Assignments
<li>Course-related On-line Resources
</ol>

無序(unordered)清單

以下是無序的清單 (看效果)：

<ul>
<li>General Information
<li>Course Outline
<li>Textbook and References
<li>Schedule and Notes
<li>Homework Assignments
<li>Course-related On-line Resources
</ul>

definition list

<dl>
<li><dt>WWW
<li><dd>World-Wide Web
<li><dt>HTML
<li><dd>Hyper Text Markup Language
<li><dt>URL
<li><dd>Uniform Resource Locators
<li><dt>CGI
<li><dd>Common Gateway Interface
</dl>

Example:dl.htm

表格(Tables)

有些資訊使用表格呈現此較方便。一個表格至少使用下列標籤:

   <table>     表格起頭
   <tr>        表格列
   <th>        表格列標題
   <td>        表格列資料
   </table>    表格末尾

Example:看效果

<table class="main" border="1" summary="Table examples">
<caption>Terms Frequently Used

 <tr>
 <th>Acronym
 <th>Full words
 </tr>

 <tr>
 <td>WWW
 <td>World-Wide Web
 </tr>

 <tr>
 <td>HTML
 <td>Hyper Text Markup Language
 </tr>

 <tr>
 <td>URL
 <td>Uniform Resource Locators
 </tr>

 <tr>
 <td>CGI
 <td>Common Gateway Interface
 </tr>
</table>

表單(Form)

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤<form> 來設置:

<form>
.
input 元素
.
</form>

表單輸入元素

多數情況下被用到的表單標籤是輸入標籤（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

文本域（Text Fields）

文本域通過 <input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

看效果：

<form>
First name: <input type="text" name="firstname"> <br>
Last name: <input type="text" name="firstname">
</form>

注意:在大多數瀏覽器中，文本域的預設寬度是20個字符。

密碼字段

密碼字段通過標籤<input type="password"> 來定義:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。

單選按鈕（Radio Buttons）

<input type="radio"> 標籤定義了表單單選框選項

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

複選框（Checkboxes）

<input type="checkbox"> 定義了複選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕. 當用戶單擊提交按鈕時，表單的內容會被傳送到另一個程式。表單的動作屬性 action 定義了目的程式的名稱。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。 :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如您在上面的文本框內鍵入幾個字母，然後點擊提交按鈕，那麼輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。使用表單輸入的資料，在後端使用 cgi 、php 或 servlet 等程式處理，結果呈現在前端的網頁。

cgi(common gate interface)
Demo: cgi
Java servlet
Demo: servlet