HTML5-表單
下述內容主要講述了《HTML5權威指南》第12章關於“表單”。
當使用form提交資料時：在HTML4中，input、button和其他與表單相關的元素必須放在form元素中；在HTML5中，這條限制不復存在。可以將這類元素與文件中任何地方的表單掛鉤（通過表單元素的form屬性【下述示例3】）。
一、製作基本表單
示例1：新標籤頁顯示錶單結果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Target</title 
1. 表單的action屬性
action屬性說明了提交時瀏覽器應該把從使用者收集的資料傳送到什麼地方【上述示例中，提交資料傳送到“”】。
如果action屬性指定相對URL，那麼該值會被嫁接在當前頁的URL（如果使用了base元素，則是該元素的href屬性值）的後面。
2. 配置資料編碼
enctype屬性制定了瀏覽器對傳送給伺服器的資料採用的編碼方式【上述示例中，採用預設編碼方式】。
| 值 | 說明 |
|---|---|
| application/x-www-form-urlencoded | 預設編碼方式；除了不能用來上傳檔案到伺服器外，它適用於各種型別的表單 |
| multipart/form-data | 一般只用於需要上傳檔案到伺服器的表單 |
| text/plain | 謹慎使用；各瀏覽器實現方式不同 |
3. 控制表單自動完成功能
autocomplete屬性，自動填寫表單；預設on，設定為off時，禁止瀏覽器自動填寫表單。
各個input元素對autocomplete屬性的設定可以覆蓋form元素上的行為方式。
4. 指定表單反饋資訊的目標顯示位置
預設情況下瀏覽器會用提交表單後伺服器反饋的資訊替換表單所在的原頁面。這可以用form元素的target屬性予以改變【上述示例中，結果會在新標籤頁顯示】。
| 值 | 說明 |
|---|---|
| _blank | 將瀏覽器反饋資訊顯示在新視窗（或標籤頁）中 |
| _parent | 將瀏覽器反饋資訊顯示在父窗框組中 |
| _self | 將瀏覽器反饋資訊顯示在當前視窗中（預設行為） |
| _top | 將瀏覽器反饋資訊顯示在頂層視窗中 |
| 將瀏覽器反饋資訊顯示在指定窗框中 |
5. 設定表單名稱
name屬性可以用來為表單設定一個獨一無二uerde識別符號。
注意，input元素不設定name屬性，那麼使用者在其中輸入的資料在提交表單時不會被髮送給伺服器【上述示例中，“密碼”欄位不會被提交】。
6. 在表單中新增說明標籤
可以為input元素配一個label元素，將label元素的for屬性設定為input的id值，這樣input元素和label元素就關聯起來，有助於螢幕閱讀器和其他殘障輔助技術對錶單的處理。
7. 自動聚焦到某個input元素
autofocus屬性可以聚焦於某個input元素【上述示例中，“使用者名稱”欄位被自動聚焦】
注意，多個元素都設定了該屬性，那麼瀏覽器將會自動聚焦於其中的最後一個元素。
8. 禁用單個input元素
設定disabled屬性，可以禁用input元素。
注意，被禁用的元素不能被提交【上述示例中，“地址”欄位被禁用未被提交到伺服器】。
二、對錶單元素編組
可以使用fieldset元素將一些元素組織在一起。
示例2：將相關表單元素進行編組
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素分組</title>
</head>
<body>
<form action="http://localhost:8888/form/userInfo" method="post" target="_blank">
<fieldset>
<legend>使用者基本資訊</legend>
<p>
<label for="username">使用者名稱:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address">
</p>
</fieldset>
<fieldset>
<legend>使用者愛好</legend>
<p>
<label for="fave1">#1:</label>
<input type="text" name="fave1" id="fave1">
</p>
<p>
<label for="fave2">#2:</label>
<input type="text" name="fave2" id="fave2">
</p>
<p>
<label for="fave1">#3:</label>
<input type="text" name="fave3" id="fave3">
</p>
</fieldset>
<button>提交</button>
</form>
</body>
</html>
說明：
- 通過設定fieldset元素的disabled屬性，可以一次性地禁用多個input元素；
- 新增lagend元素，可以向用戶提供相關說明，但其必須為fieldset元素的第一個子元素。
三、使用button元素
表：button元素的type屬性的值
| 值 | 說明 |
|---|---|
| submit | 提交表單（預設行為） |
| reset | 重置表單 |
| button | 無具體語義 |
表：type屬性設定為submit時button元素的額外屬性
| 屬性 | 說明 |
|---|---|
| form | 指定按鈕相關的表單 |
| formaction | 覆蓋form元素的action屬性，另行指定表單將要提交到的URL |
| formenctype | 覆蓋form元素的enctype屬性，另行指定表單的編碼方式 |
| formmethod | 覆蓋form元素的method屬性 |
| formtarget | 覆蓋form元素的target屬性 |
| formnovalidate | 覆蓋form元素的novalidate屬性，表明是否應執行客戶端資料有效性檢查 |
示例3：button元素提交表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>button屬性控制表單</title>
</head>
<body>
<form id="myForm"></form>
<p>
<label for="username">使用者名稱:</label>
<input type="text" name="username" id="username" form="myForm">
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" form="myForm">
</p>
<button type="submit" form="myForm" formaction="http://localhost:8888/form/userInfo" formmethod="post">提交</button>
<button type="reset" form="myForm">重置</button>
</body>
</html>相關推薦
HTML5表單
action 網頁 不能 use 定時 tip 顯示 b2c file 新增的input輸入類型 HTML5中增加了表單方面的諸多功能，包括增加input輸入類型、表單元素、form屬性和input屬性等。 新的input輸入類型 email類型的input元素是一種專門
HTML5表單及其驗證
最小值 標準 pattern maxlength phone box reg 再次 其中 HTML5表單及其驗證 HTML表單一直都是Web的核心技術之一，有了它我們才能在Web上進行各種各樣的應用。HTML5 Forms新增了許多新控件及其API，方便我們做更復雜
html5 表單 填表 select 下拉 textarea多行文本 output Js計算結果
size area 如果 out ctrl select png 多行文本 賦值 <select> 下拉 <select>下有很多屬性 name 其實有name就有value了,因為button提交的都是? nam
HTML5 表單提交實例
技術 names java utf-8 分享 img mage text src html <!DOCTYPE html> <html> <head> <title>表單</title> &
html5-表單的綜合實例
padding ace leg tel use radi css label 電子郵箱 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
html5表單自動驗證2：必須是字母開頭驗證
最近在做一個表單驗證，之前的要求是***包含英文大小寫字母、數字、下劃線和減號，現在多加了個條件***須是以字母開頭，在網上學了很多方法，但都是用的js，而我想要的是html5的智慧驗證，不用js，以簡單的粗暴方法來完成，吶，下面直接貼程式碼啦 <input type="tex
html5表單自動驗證1
//css樣式開始： *{ margin:0px; padding:0px; border:0px; text-decoration:none; list-style:none;} form{ width:450px; margin
HTML5-表單新增的type屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <
html5 表單的新增type屬性
提示 表單 name屬性 則表達式 red 最小值 數字 電子郵箱 time <form action=""> 用戶名：<input type="text" name="userName"> <br> 密碼：<input
html5 表單新增事件
<form action=""> 使用者名稱：<input type="text" name="userName" id="userName"><br> 電話：<input type="tel" name="userPhone" id="userPhone
html5 表單的新增元素
<form action=""> <!--專業： <select name="" id=""> <option value="1">前端與移動開發</option> <option value="2">j
HTML5-表單標籤
一、什麼是表單 表單就是專門用來收集使用者資訊的 二、表單元素 1、元素：在html中標籤／標記／元素都是指html的標籤 2、常見表單元素： 2.1、input標籤：有一個type屬性，這個屬性有很多型別的取 值，取值的不同決定了inpu
HTML5表單中password輸入框的文字顯示與隱藏實現
人生苦短，道阻且艱；修行不易，且行且努力。 【專業擅長領域】：iOS開發，遊戲開發，圖形學 【擅長平臺】：iOS平臺，Unity --------------------------------------------------------- 【個人主頁】：信厚
華麗的CSS3+HTML5表單客戶端驗證
最近學習CSS3，看到一個很好的表單驗證，和大家一起仿作一下。 本資源已上傳的我的CSDN 預覽效果： 1.首先從DREAMWEAVER 上把W3C標準的HTML空檔案拿過來 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
html5 表單元素
1.概念 表單是蒐集使用者資訊的各種表單元素的集合區域; 2.表單的作用 a.實現網頁上的資料互動; b.蒐集客戶端輸入的資料資訊，提交到網站伺服器端進行處理;
Html5 表單屬性
熟悉掌握 HTML5 的若干新的表單屬性： 新的 form 屬性：autocomplete、novalidate 新的 input 屬性：autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, f
html5表單pattern屬性配合正則驗證電話和手機號碼
[b]正則解析[/b] “^\d+$” //非負整數（正整數 + 0） “^[0-9]*[1-9][0-9]*$” //正整數 “^((-\d+)|(0+))$” //非正整數（負整數 + 0） “^-[0-9]*[1-9][0-9]*$” //負整數 “^-?\d+$” //整數 “^\d+(
HTML5-表單
下述內容主要講述了《HTML5權威指南》第12章關於“表單”。 當使用form提交資料時：在HTML4中，input、button和其他與表單相關的元素必須放在form元素中；在HTML5中，這條限制不復存在。可以將這類元素與文件中任何地方的表單掛鉤（
HTML5-表單新增元素和屬性
1.表單元素新增和廢棄的屬性 表單新增的屬性可以分成2類： 提交類：提交給伺服器設定的相關屬性，formaction、formmethod、formtype、formtarget 控制類：required、autfocus、labels 1.1.form屬性
HTML5 表單元素
======================================================注：本文原始碼點此下載 ======================================================html5擁有若干涉及表單的元