HTML form 元素

admin發表於2018-12-08
HTMLORM

當前網站的功能非常強大，除了能夠給瀏覽者展示資訊之外，也可以進行互動。

比如最為常見的互動操作，註冊會員、跟帖留言或者文章釋出等。

form表單實現上述操作是最為常見方式之一，也可以使用其他方式，比如ajax等。

首先看一個程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密碼:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陸" />
    <input type="reset" value="重置" />
  </li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170419j898grfr1rq8bi1z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一個簡單的使用者登入介面，點選登入按鈕會有一個登入動作。

然而上述程式碼中，點選登入提交按鈕沒有任何反應，這是因為沒有和任何form元素髮生關聯。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<form>
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密碼:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陸" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

在ul的外層巢狀了一個form元素，現在點選提交按鈕，可以發現位址列有明顯變化。

form元素的功能初步得以體現，簡單的講，此元素可以生成一個可互動模組，與之相關聯的表單元素，比如單選按鈕，核取方塊、單行文字框或者多行文字框等可以向伺服器傳輸資料。

一.產生關聯的方式：

（1）.使用form元素巢狀其他表單元素。

（2）.其他表單元素的for屬性與form的id屬性值關聯。

二.form元素主要屬性：

下面介紹一下form元素常用的屬性，分別如下：

1.name屬性:

此屬性可以用來給form元素命名，提供了一種指令碼獲取form元素的手段。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
<script>
window.onload=function(){
  console.log(document.forms["ant"].id)
}  
</script> 
</head>
<body>
<form name="ant" id="antzone">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密碼:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陸" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170516p66ccc8y8lcclw4k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也可以使用document.getElementsByName方法獲取。

2.action屬性:

此屬性規定焦點資料提交的目標頁面，也就是資料將會傳送到哪個檔案。

如果不規定或者屬性值為#等特殊值，會將資料提交到當前頁面。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
<script>
window.onload=function(){
  console.log(document.forms["ant"].id)
  document.getElementsByName
}  
</script> 
</head>
<body>
<form name="ant" action="softwhy.php">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密碼:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陸" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

點選提交按鈕可以將表單資料提交到softwhy.php檔案。

3.method屬性:

此屬性規定表單資料提交的方式。

（1）.get：預設值，通過url提交資料，點選提交按鈕後，可以看到位址列發生變化，後面會出現鍵值對，其實就是表單元素的name屬性值與對應的value屬性值，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170551i44xdne33aaaez3f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

缺點也比較明顯，資料量較小，通常不能夠超過1k，安全性也不是太好。

（2）.post：傳輸上大小上沒有限制，並且安全性良好，不通過url傳輸。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<form method="提交方式">
  <!--表單內容-->
</form>

4.target屬性：

此屬性規定在何處開啟atcion屬性規定的url。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<form target="_blank|_self|_parent|_top|framename">
  <!--表單內容-->
</form>

屬性值功能與<a>元素的target屬性值完全相同，不多介紹，

具體參閱HTML <a> 標籤一章節。

5.accept-charset屬性:

此屬性規定表單提交時使用的字元編碼。

預設值是保留字串 "UNKNOWN"（表示編碼為包含<form>元素的文件的編碼）。

表單提交時使用的字元編碼列表，多個字元編碼使用空格分隔。

[HTML] 純文字檢視 複製程式碼
<form accept-charset="character_set">
  <!--表單內容-->
</form>

6.enctype屬性：

此屬性規定對錶單資料進行編碼的方式，需要注意，method屬性值等於post時有效。

（1）.application/x-www-form-urlencoded：預設值，傳送前對所有字元進行編碼（將空格轉換為 "+" 符號，特殊字元轉換為 ASCII HEX 值）。

（2）.multipart/form-data：不對字元編碼，當使用有檔案上傳控制元件的表單時，該值是必需的。

（3）.text/plain：將空格轉換為 "+" 符號，但不編碼特殊字元。

7.autocomplete屬性：

此屬性是HTML5新增，算是非常人性化的一個舉措。

當使用者在表單元素鍵入內容的時候，會根據歷史以往的輸入自動列出類似於下拉選單的歷史選項。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  list-style:none;
}
</style>
</head>
<body>
<form name="ant" autocomplete="on">
<ul>
  <li>姓名:<input type="text" name="username" /></li>
  <li>密碼:<input type="password" name="pw" /></li>
  <li>
    <input type="submit" value="登陸" />
    <input type="reset" value="重置" />
  </li>
</ul>
</form>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/170738p0p0nne68p7np18z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

具有兩個屬性值on與off，on（預設值）表示開啟此功能，off表示關閉此功能。

8.novalidate屬性：

此屬性是HTML5新增，規定表單提交時是否對錶單元素資料進行正確性驗證。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  text.oninvalid=function(){
    text.setCustomValidity("請輸入正確格式的手機號碼");
  };
}
</script>
</head>
<body>
<form action="do.php" name="ant" novalidate>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
</body>
</html>

上述程式碼不會對輸入文字框的資料進行驗證，novalidate只有一個屬性值"novalidate"，可以省略。

特別說明：此屬性僅會禁止HTML內建的驗證規則，如果自定義的驗證規則，此屬性無效。

相關文章