9.2 HTML<form>標簽_HTML入門知識

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 9.2 HTML<form>標簽

9.2 HTML<form>標簽

編輯：HTML入門知識

一、表單標簽<form>

創建一個表單看上去就像創建一個表格，表格的行、列和單元格都放在<table>標簽中，而創建表單的方式跟創建表格的一樣。如果你要創建一個表單，那你就要把表單的那些各種標簽放在表單標簽<form>內部。

語法：

<form>表單各種標簽</form>

舉例：

在線測試

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <form>
        <input type="text" value="這是一個文本框"/><br/>
        <textarea></textarea><br/>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

在浏覽器預覽效果如下：

二、form標簽屬性

<form>標簽有幾個屬性，分別是action、method、enctype和target屬性。這幾個屬性由於實際操作性不是很強，比較抽象，就像<head>標簽中的內部標簽一樣，對於剛剛學習HTML入門教程的初學者可能不太理解。不過沒關系，我們只需要對這幾個屬性有個大致概念就行了，在ASP.NET入門課程學習了動態頁面制作之後，我們就會有很深的了解了。

1、表單名稱name

一個頁面你的表單可能不止一個，為了區分這些表單，我們使用name屬性來給表單進行命名。這樣也是為了防止表單提交之後到後台程序出現混亂。

語法：

 
    <form name="表單名稱">
    ……
    </form>

表單名稱中不能包含特殊字符和空格。

舉例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <form name="form1">
    </form>
</body>
</html>

name="form1"表示表單的名稱是form1。

2、提交表單action

action用於指定表單數據提交到哪個地址進行處理。

語法：

 
    <form  action="表單的處理程序">
    ……
    </form>

說明：

表單的處理程序是表單要提交的地址，這個程序地址用來處理從表單搜集的信息。這個地址可以是相對地址，也可以是絕對地址，還可以是一些其他形式的地址。

舉例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <p>如果您對 學習網有任何意見和建議，請發郵件給我們</p>
    <form  name="form1" action="mailto:lvyestudy@foxmail.com"></form>
</body>
</html>

"mailto:lvyestudy@foxmail.com"是程序提交地址，表示使用郵件形式。

3、傳送方法method

表單method屬性作用是告訴浏覽器，指定將表單中的數據使用哪一種HTTP提交方法，取值為get或post。

form標簽的method屬性 method屬性值說明 get 默認值，表單數據被傳送到action屬性指定URL，然後這個新URL被送到處理程序上 post 表單數據被包含在表單主體中，然後被傳送到處理程序上

這兩種方式的區別在於，get在安全性上較差，所有的表單域的值直接顯示出來。而post除了只有可見的處理腳本程序之外，其他的信息都可以隱藏。所以實際的開發當中通常都選擇post這種處理方式。

語法：

 
    <form  method="傳送方法">
    ……
    </form>

舉例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <p>如果您對 學習網有任何意見和建議，請發郵件給我們</p>
    <form  name="form1" action="mailto:lvyestudy@foxmail.com" method="post"></form>
</body>
</html>

4、目標顯示方式target

<form>標簽的target屬性跟<a>標簽的target屬性一樣，都是用來指定目標窗口的打開方式。具體用法參考“超鏈接a標簽”這一節。

<form>標簽target屬性 target屬性值說明 _self 默認值，表示在當前的窗口打開頁面 _blank 表示在新的窗口打開頁面 _parent 表示在父級窗口中打開頁面 _top 表示頁面載入到包含該鏈接的窗口，取代當前在窗口中的所有頁面，因此其他所有

：target這4個屬性值都是以下劃線“_” 開頭的，書寫的時候很容易遺漏。

一般情況下，target采用默認屬性值（即“_self”）和”_blank”這兩種方式，跟a標簽的target屬性類似，其他兩種用得比較少。

語法：

 
    <form  target="目標顯示方式">
    ……
    </form>

舉例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <p>如果您對 學習網有任何意見和建議，請發郵件給我們</p>
    <form  name="form1" action="mailto:lvyestudy@foxmail.com" method="post" target="_blank"></form>
</body>
</html>

5、編碼方式enctype

<form>標簽的enctype屬性用於設置表單信息提交的編碼方式。

表3 <form>標簽的enctype屬性 enctype屬性值說明 application/x-www-form-urlencoded 默認的編碼方式 multipart/form-data MIME編碼，對於“上傳文件”這種表單必須選擇該值

：一般情況下，采用默認值就行了（即enctype屬性不需要設置）。

舉例：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表單form標簽</title>
</head>
<body>
    <p>如果您對 學習網有任何意見和建議，請發郵件給我們</p>
    <form  name="form1" action="mailto:lvyestudy@foxmail.com" method="post" target="_blank" enctype="application/x-www-form-urlencoded"></form>
</body>
</html>