<style> 
 p{margin:0px;} 
</style>

 <em>斜體</em>

 <strong>加粗</strong>

 <style> 
 span{ color:blue; } 
 </style>

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。</p>
在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑?！?這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用<q></q>實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
這里用<q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
補充知識：語義化網頁結構有助于搜索引擎的收錄。同一個效果可以用很多鐘方式實現，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內容，這里如果你使用標簽，那么就告訴瀏覽器這里是引用的話。而且在手持設備或移動設備不能很好支持css的基礎上，瀏覽器會使用默認的效果，因而提供較好可讀性。

<blockquote>明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。</blockquote>

 <br/>

 <br>

<hr>

<hr/>

 <address>聯系地址信息</address>

<address>文檔編寫：lilian 北京市西城區德外大街10號</address>

<code>var i=i+300;</code>

<code>代碼語言</code>

<pre>語言代碼段</pre>

<pre> 
 var message="歡迎"; 
 for(var i=1;i<=10;i++) { 
 alert(message); 
 } 
</pre>

ul{ list-style:circle; }

ul{ list-style:none }

<ul> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ul>

<ul> 
 <li>精彩少年</li> 
 <li>美麗突然出現</li> 
 <li>觸動心靈的旋律</li> 
</ul>

<ol> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ol>

 <ol> 
 <li>前端開發面試心法 </li> 
 <li>零基礎學習html</li>
 <li>JavaScript全攻略</li> 
</ol>

<table summary="表格簡介文本">

<table> 
 <caption>標題文本</caption> 
 <tr> 
 <td>…</td> 
 <td>…</td> 
 … 
 </tr> 
 … 
</table>

 <a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

 <a  title="點擊進入慕課網">click here!</a>

 <a href="目標網址" target="_blank">click here!</a>

例子：
<a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內容">

那么：
1）A知道自己發送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。
2）B1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
3）C1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
4）D1知道這封是A發送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。
5）郵箱地址
 mailto: <a href="mailto:qiujie@staff.weibo.com">發送</a>
6）抄送地址
cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發送</a>
7）密件抄送地址
用分號分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發送</a>
8）多個收件人、抄送人、密送人 ;
bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發送</a>
9）郵件主題
subject: <a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發送</a>
10）郵件內容
body: <a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發送</a>
例子：
<a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對此評論有些想法。">對此影評有何感想，發送郵件給我</a>

 [站外圖片上傳中……(2)] <img src = "myimage.gif" alt = "My Image" title = "My Image" />

src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
路徑有兩種填寫方式：絕對路徑、相對路徑
相對路徑：相對于我們當前 html 文件的位置來寫路徑即可！
./表示當前目錄，../表示上一級目錄

<form method="傳送方式" action="服務器文件">

<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
method ： 數據傳送的方式（get/post）。
 <form method="post" action="save.php"> 
 <label for="username">用戶名:</label> 
 <input type="text" name="username" /> 
 <label for="pass">密碼:</label> 
 <input type="password" name="pass" /> 
 </form>

 <form> 
 <input type="text/password" name="名稱" value="文本" /> 
 </form>

舉例：
 <form> 
 姓名： <input type="text" name="myName"/><br/> 
 密碼： <input type="password" name="pass"/> 
 </form>
 value="xxx" 替換為 placeholder="xxx" 的體驗更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

<input placeholder="text"/>
注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

 <textarea rows="行數" cols="列數">文本</textarea>

 <form method="post" action="save.php"> 
 <label>聯系我們</label> 
 <textarea cols="50" rows="10" >在這里輸入內容...</textarea> 
 </form>

 <select> 
 <option value="提交的值">顯示的值</option> ... 
 </select>
 設置selected="selected"屬性，則該選項就被默認選中。 
 selected="selected"

<select multiple="multiple"> 然后選擇時候按ctrl點鼠標選中

<option disabled="disabled">

 <label for="控件id名稱">

 <form> 
 <label for="male">男</label> 
 <input type="radio" name="gender" id="male" /> <br /> 
 <label for="female">女</label> 
 <input type="radio" name="gender" id="female" /> 
 <label for="email">輸入你的郵箱地址</label> 
 <input type="email" id="email" placeholder="Enter email"> 
 </form>

 <area shape="" coords="" href ="" alt="" />
 shape 屬性：定義鏈接區域的形狀，常用值 rect、circle
 coords 屬性：確定區域的精確位置。填寫坐標即可，以父元素左上角為原點，可借助qq截圖來得到想要的坐標
 href 屬性：填寫鏈接地址即可
 alt 屬性：給鏈接加一些說明信息

 <map id="img1" name="img1"> 
 <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> 
 <area shape="circle" coords="507,287,20"  alt="私房庫我的博客" target="_blank" /> 
 </map>

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標簽都是單標簽例如：br 標簽，不可以這樣<br></br>，只能<br />這樣來關閉標簽。

 li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。

 html,head,body,colgroup,tbody

 例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時候當做 ture
 不寫屬性表示 false

 要求：屬性值不包含 空字符串，<，>，=， ‘

<div>
 <span>我是一個 span 元素</span>
 </div> —— 對 
<span>
 <div>div 元素</div>
</span> —— 錯

<a href="#">
 <span></span>
</a> —— 對

<p><ol><li></li></ol></p> —— 錯 <p><div></div></p> —— 錯

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

在HTML中，表單是用<form>元素來表示的，它與其他各種各樣的表單輸入元素，如<input>、<select>和<button>在客戶端編程中有著重要的地位。

表單的作用是，通過表單元素收集用戶的輸入，再將這些輸入數據提交給服務器，服務器處理接收到的數據并生成一個新的HTML頁面顯示在客戶端；在以前，表單提交數據、服務器返回數據，此時客戶端與服務端并沒有其他交互行為，因此，數據提交交互性差、服務器負擔重。

Javascript的最初的一個應用，就是分擔服務器處理表單的任務，打破處處依賴服務器的局面；雖然現在Web和Javascript有了長足的發展，但Web表單的變化并不明顯；特別是一些常見的形式，web表單并沒有提供特別好的方案；最常見的操作，是使用Javascript增強了一些標準表單控件的默認行為。

表單及其控件都是HTML元素，可以使用標準的DOM技術來操作它們，另外表單已經腳本化了，也有專門的API，所以在表單編程中，最好使用表單API；

取得Form表單對象：

取得<form>元素引用的方式：最常用的方式就是將它看成與其他元素一樣，使用getElementById()或getElementsByTagName()等標準的DOM技術；

var form = document.getElementById("myForm");
var form = document.getElementsByTagName("form")[0];

通過document.forms集合可以取得頁面中所有表單集合，在這個HTMLCollection集合中，可以通過數值索引或name或id值來取得特定的表單：

var firstForm = document.forms[0];
var myForm = document.forms["myForm"];

較早的瀏覽器或者那些支持向后兼容的瀏覽器中，會把每個設置了name特性的表單作為屬性保存在document對象中，如：

var form = document.myForm;

注：不推薦這種方式；
注：可以同時為表單指定id和name屬性，但它們可以設置不同的值；

表單屬性和方法：

表單<form>在HTML中具有action、encoding、method和target等屬性，在Javascript中，它是HTMLFormElement類型，繼承了HTMLElement，因而與其他HTML元素一樣具有相同的默認屬性，但也具有自己獨有的屬性和方法，其中大部分的屬性都與其在HTML中的屬性相對應，這些屬性可以控制表單是如何來提交數據并如何顯示的，如：

• acceptCharset：服務器能夠處理的字符集，等價于HTML中的accept-charset特性；
• action：接受請求的URL，等價于HTML的action特性；
• elements：表單中所有控件的集合(HTMLCollection)；
• enctype：請求的編碼類型（方式），等價于HTML中的enctype特性；
• encoding：編碼，等價于HTML的encoding特性，不般不需要；
• length：只讀，表單中控件的數量；
• method：請求類型（方法），等價于HTML的method特性；
• name：表單的名稱，等價于HTML的name特性；
• target：用于發送請求和接收響應的窗口名稱，等價于HTML的target
• reset()：方法，將所有表單域重置為默認值；
• submit()：方法，提交表單；

以上的大部分屬性是可寫的；

<script>
console.log(form.action); // demo.html
form.action = "/login";
console.log(form.action); // login
// 獲取表單信息
function getFormInfo(){
var info;
var form = document.forms[0];
info = "form.elements:" + form.elements + "\n";
info += "form.length:" + form.length + "\n";
info += "form.name:" + form.name + "\n";
info += "form.acceptCharset:" + form.acceptCharset + "\n";
info += "form.action:" + form.action + "\n";
info += "form.enctype:" + form.enctype + "\n";
info += "form.encoding:" + form.encoding + "\n";
info += "form.method:" + form.method + "\n";
info += "form.target:" + form.target + "\n";
form.elements["txt"].value = info;
}
function setFormInfo(form){
form.name = "yourForm"
form.method = "GET";
form.action = "/member";
form.acceptCharset = "gb2312";
form.enctype = "multipart/form-data";
form.target = "_blank";
var pwd = document.createElement("input");
pwd.type = "password";
pwd.id = "pwd";
form.appendChild(pwd);
}
</script>
<form name="myForm" id="myForm" action="/login" method="POST">
<p><input type="text" id="username" name="username" /></p>
<p><input type="button" value="表單信息" onclick="getFormInfo()" />
<input type="button" value="設置表單" onclick="setFormInfo(this.form)" /></p>
<p><textarea id="txt"></textarea></p>
</form>

也可以使用DOM方法動態創建表單，如：

var form = document.createElement("form");
document.body.appendChild(form);
form.name = "myform";
form.action = "/login";
form.method = "POST";
// form.submit();
// 或者
var btn = document.createElement("input");
btn.type = "submit";
btn.value = "提交";
form.appendChild(btn);

Submit提交表單：
使用<input>的type特性為”submit”或”image”就可以提交表單，或者<button>也可以提交表單；

<input type="submit" value="提交" />
<input type="image" src="images/submit.png" />
<button type="submit">提交表單</button>

以上的按鈕，只要在任何表單元素擁有焦點的情況下，按回車就可以提交表單；如果表單里沒有提交按鈕，按回車鍵不會提交表單，但有個特例，如果只有一個文本框，即使沒有提交按鈕，回車也會提交；
注意：textarea是個例外，如果在文本區中回車會換行，而不是提交表單；

以這種方式提交表單時，瀏覽器會在將請求發送給服務器之前觸發onSubmit事件，利用此事件，可以驗證表單數據，從決定是否允許表單提交；阻止這個事件的默認行為或返回false就可以取消表單提交，如果不阻止，就是提交表單；

var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event){
var input = document.forms[0].elements[0];
if(input.value == ""){
event.preventDefault();
console.log("提交不了");
}
},false);

如果是DOM0級事件處理程序，也可以return false；

myForm.onsubmit = function(e){
var input = document.forms[0].elements[0];
if(input.value == ""){
console.log("input不能為空");
// e.preventDefault();
return false; // 或者
}
}

如果是HTML事件處理程序，可以return false；

<form id="myForm" name="myForm" onsubmit="return validate();">
<script>
function validate(){
var input = document.forms[0].elements[0];
if(input.value == ""){
console.log("input數據不能為空");
return false; // 或者
}
return true;
}
</script>

submit()方法：
在Javascript中，調用submit()方法也可以提交表單；而且，這種方式不需要表單包含提交按鈕，在任何時候都可以正常提交表單；

var myForm = document.getElementById("myForm");
myForm.submit();

在調用submit()方法提交表單時，并不會觸發onSubmit事件，因此在調用此方法之前驗證表單數據；

<input id="btn" type="button" value="普通按鈕" />
var btn = document.getElementById("btn");
// 不會觸發myForm的onSubmit事件，所以數據驗證必須要處理
btn.addEventListener("click",function(e){
if(validate()){ // 數據驗證
console.log("普通按鈕提交");
myForm.submit();
}else{
console.log("不能為空");
}
},false);

另外，調用此方法也不會觸發約束驗證，如：
<p>輸入1-10之間的整數：<input type="number" min="1" max="10" required /></p>
所以，也需要在調用submit()方法前驗證約束，如：

var num = document.querySelector('input[type="number"]');
if(num.required){
if(num.value == ""){
console.log("num不能為空");
return false;
}
}

有個誤區，如果給一個提交按鈕添加onSubmit事件，是無效的，它會直接提交，如：

<input id="mySubmit" type="submit" value="提交" onsubmit="return validate();" />

如果為一個提交按鈕添加onClick事件，可以進行表單提交驗證，同時也會觸發表單的onSubmit事件，例如，把上例的btn的onClick事件處理程序添加到submit提交按鈕，可以看以，onClick事件先于表單的onSubmit事件觸發；

另外，不要為一個表單元素的name或id的值設為submit，因為它會覆蓋表單的submit方法，所以當運行時，會提示不存在的submit()函數；
另外，不僅是提交按鈕或普通按鈕調用submit()方法能提交表單，甚至一個超鏈接調用submit()方法也可以提交，但要注意，需要取消超鏈接的默認行為：

<!-- <a href="javascript：void(0)" id="aBtn">提交</a> -->
<a href="#" id="aBtn">提交</a>
</form>
<script>
var aBtn = document.getElementById("aBtn");
aBtn.onclick = function(e){
e.preventDefault(); // 或者在HTML中執行javascript：void(0)
if(validate()){
console.log("超鏈接提交");
myForm.submit();
}else{
console.log("超鏈接提交數據驗證不通過");
}
}

示例：

<!-- onsubmit="return false" 防止表單自動提交
form 默認為get提交 -->
<form id="myForm" onsubmit="return false">
<p>用戶名：<input type="text" name="username" id="username" /></p>
<p>密碼：<input type="password" name="pwd" id="pwd" /></p>
<p><button type="button" onclick="login()">提交</button></p>
</form>
<script>
function login(){
var username = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
if(username != "" && pwd !=""){
var myForm = document.forms["myForm"];
myForm.method = "get";
myForm.action = "/login";
myForm.submit();
}else{
console.log("數據為空");
}
}
</script>

還有一種重要的提交方式，就是Ajax提交，也就是利用XMLHttpRequest對象進行異步數據提交，它最大的特點是不會提交整個頁面，只會進行局部提交。

自動提交和防止自動提交：

回車、調用提交按鈕的click()方法、調用表單的submit()方法（可以在onLoad事件中，甚至可以利用setTimeout定時提交）等；
如果表單中有提交按鈕，可以為表單添加onsubmit=”return false”；但此時，提交按鈕也會失效；
如果表單中沒有提交按鈕，不會自動提交；
如果表單中只有一個文本框，但沒有提交按鈕，回車會自動提交，可以為表單添加onsubmit=”return false”，就不會自動提交；或者添加一個隱藏的文本框，如：

<input type="text" style="display: none;" />

也不會自動提交，注意，不是隱藏域；

或者監聽文本框的onKeydown事件，如果是回車的話，不做處理，如：

<input type="text" onkeydown="if(event.keyCode==13){return false}" />

如果在表單中有提交按鈕，如果表單任一個控件都處于焦點狀態下，直接回車就可以提交表單，如果沒有控件處于焦點狀態，可以監聽document的keydown事件，從而判斷是否按下回車鍵，再進行提交，如：

document.addEventListener("keydown", function(e){
if(e.keyCode == 13){
document.forms[0].submit();
console.log("表單提交了");
}
},false);

防止重復提交：

提交表單時可能出現的最大問題，就是重復提交表單；解決該問題的方法有兩個：在第一次提交表單后就禁用提交按鈕，或者利用onSubmit事件處理程序取消后續的表單提交操作；

禁用提交按鈕：

var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event){
event.preventDefault(); // 為了能看到效果
var btnSubmit = event.target.elements["btnSubmit"];
btnSubmit.disabled = true;
},false);

注：不能通過onclick事件處理程序來實現這個功能，原因是不同瀏覽器之間存在“時差”：有的會在觸發表單的onSubmit事件前觸發onClick事件，有些相反；對于先觸發onClick事件的，意味著會在提交發生之前禁用按鈕，結果永遠都不會提交表單，因此最好使用onSubmit事件來禁用提交按鈕；
此種方式不適合表單中不包含提交按鈕的情況；

重置表單：

使用type特性為reset的<input>或<button>兩種按鈕可以重置表單：

<input type="reset" value="重置">
<button type="reset">重置</button>

當單擊重置按鈕時，會觸發onReset事件；利用此事件，可以在必要時取消重置操作；取消重置也就是阻止重置的默認行為，如：

var myForm = document.getElementById("myForm");
myForm.addEventListener("reset", function(event){
event.preventDefault();
console.log("重置被禁止了");
},false);

在HTML事件處理程序或DOM0級中的onReset事件中返回false也可以取消默認行為；

也可以使用Javascript調用reset()方法重置，但與調用submit()方法不同，其會觸發onReset事件；

var myForm = document.getElementById("myForm");
myForm.reset();
//...
var btn = document.getElementById("btn");
btn.onclick = function(){
myForm.reset(); // 會觸發onReset事件
};

從用戶體驗角度來說，重置表單并不常見，所以有可能是意外地觸發了表單重置事件，所以這種需求是很少見的，更常見的做法是提供一個取消按鈕，讓用戶能夠回到前一個頁面；

表單元素（控件）：

可以像訪問頁面中的其他元素一樣，使用原生DOM方法訪問表單控件；

var fields = document.getElementById("username");
var fields = document.getElementsByTagName("input")[0];
var fields = document.querySelectorAll('#login input[type="radio"]');
var fields = document.querySelectorAll('#login input[type="radio"][name="color"]');

Form表單具有length屬性，其返回表單元素的數量，但是不包含<input>元素type為“image”元素；所以也可以通過訪問表單的索引或屬性來訪問元素，如form[0]可以取得第一個表單控件或form[“color”] 或form.color獲得第一個命名控件；

console.log(myForm.length);
console.log(myForm[0]);
console.log(myForm["username"]);
console.log(myForm.username);
elements：表單中所有控件的集合(HTMLCollection)；
var formElements = document.forms[0].elements;
console.log(formElements); // HTMLFormControlsCollection
console.log(formElements.length); // 5

其屬于HTMLFormControlsCollection集合類型，繼承自HTMLCollection；這個類型沒有什么特別的屬性和方法；
注意，elements集合中不包括type等于image的input元素；

可以通過表單elements集合索引或name特性訪問所有元素，如：

var form = document.getElementById("myForm");
var field1 = form.elements[0];
var field2 = form.elements["textbox1"];
var fields = form.elements.color;
var fieldCount = form.elements.length;

這種方式和直接利用表單的索引或name特性訪問表單元素是一致的，相比之下，還是推薦使用這種方式，因為前者在未來有可能不支持，并且會引起一些歧義；

示例，所有表單元素的值不能為空，如：

<script type="text/javascript">
function myCheck(){
for(var i=0;i<document.forms[0].elements.length-1;i++){
if(document.forms[0].elements[i].value==""){
alert("當前表單不能有空項");
document.forms[0].elements[i].focus();
return false;
}
}
return true;
}
</script>
<form name="myForm" method="post" action="#" onSubmit="return myCheck()">
用戶名:<input type="text" name="username"><br>
性別:<input type="text" name="sex"><br>
出生時間:<input type="text" name="birthday"><br>
<input type="submit" value="提交">
</form>

如果有多個表單控件使用同一個name，通過elements[“name”]會返回以該name命名的一個NodeList，而通過elements[index]只會返回第一個元素；

<form id="myForm">
<p>
<input type="radio" name="color" value="red" />red<br/>
<input type="radio" name="color" value="green" />red<br/>
<input type="radio" name="color" value="blue" />red<br/>
</p>
</form>
<script type="text/javascript">
var myForm = document.getElementById("myForm");
var colors = myForm.elements["color"];
// var colors = myForm.elements.color; // 或者
console.log(colors); // RadioNodeList
console.log(colors.length); // 3
var firstColor = colors[0];
var firstElement = myForm.elements[0];
console.log(firstColor === firstElement); // true
</script>

因此，在使用索引和name特性時結果有可能是不一樣的；一般來說，優先使用id屬性，但是name屬性在HTML表單提交中有特殊的目的，一般應用在相關的復選按鈕組和強制共享name屬性值的、互斥的單選按鈕組；另外，對于其他表單元素來說，設置name特性的目的就是為了提交到服務端，服務端根據該name特性取得這個表單元素的值；

共有的表單控件屬性：

除了<fieldset>元素外，所有表單控件都擁有相同的一組屬性；由于<input>類型可以表示多種表單元素，因此有些屬性只適用于某些表單元素，但還有一些屬性是所有表單元素所共有的：

• disabled：布爾值，表示當前控件是否被禁用；
• form：只讀，指向當前控件所屬表單的指針；如果表單元素沒有包含在一個<form>中，則值為null；
• name：只讀，當前控件的名稱；
• readOnly：布爾值，表示當前控件是否只讀；
• tabIndex：表示當前控件的切換(tab)序號；
• type：當前控件的類型，如checkbox、radio等；
• value：讀/寫，表單元素的值，也就是將被提交給服務器的值，對file來說，是只讀的，包含著文件在計算機中的路徑；

以上除了form屬性，都可以通過Javascript動態修改，如：

var form = document.getElementById("myForm");
var field = form.elements[0];
field.value = "Another value";
alert(field.form === form);
field.focus();
field.disabled = true;
// 不推薦，但對input是可行的
field.type="checkbox";

type屬性：

除了<fieldset>之外，所有表單元素都有type屬性；對于<input>元素，這個值等于HTML特性type值，如：text、password、radio、checkbox、button、file、hidden、reset、submit；對于其他元素，該值如下：

• 文件域：<textarea> 值為textarea
• 單選列表：<select>…</select> 值為：select-one
• 多選列表：<select multiple>..</select> 值為：select-multiple
• 自定義按鈕：<button>…</button> 值為：submit
• 自定義非提交按鈕：<button type=“button”>..</button> 值為button
• 自定義重置按鈕：<button type=“reset”>..</button> 值為reset
• 自定義提交按鈕：<button type=“submit”>..</button> 值為submit

此外，<input>和<button>的type屬性可以動態修改，而<select>元素的type屬性是只讀的；示例：密碼框的明文和暗文：

<style>
span.icon-eye{
display: inline-block; width:24px; height: 24px;
background: url("images/eye.png") no-repeat; cursor: pointer;
}
span.icon-eye-invisible{
background-position: -24px 0;
}
</style>
<p><input id="pwd" name="pwd" type="password" /><span class="icon-eye icon-eye-invisible"></span></p>
<script>
var iconEye = document.querySelector("span.icon-eye");
iconEye.addEventListener("click", function(event){
var p = document.getElementsByTagName("p")[0];
var pwd = document.getElementById("pwd");
if(p.classList.toggle("icon-eye-invisible")){
pwd.type = "text";
}else{
pwd.type = "password";
}
},false);
</script>

示例：在彈出窗口提交表單

<script>
function popupSend(oForm){
if(oForm.method && oForm.method.toLowerCase() !== "get"){
alert("只允許GET方式提交");
return;
}
var oField, sFieldType, nFile, sSearch = "";
for(var i = 0; i < oForm.elements.length; i++){
oField = oForm.elements[i];
if(!oField.hasAttribute("name"))
continue;
// sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.type.toUpperCase() : "TEXT";
if(sFieldType === "FILE"){
for(nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
}else{
sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
}
}
open(oForm.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oForm.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
</script>
<form id="myForm" name="myForm" action="demo.php" method="get">
<p>First Name:<input type="text" name="firstname" /><br/>
Last Name:<input type="text" name="lastname" /><br/>
Password:<input type="password" name="pwd"><br/>
Photo：<input type="file" name="photo"><br/>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female</p>
<p><input type="checkbox" name="vehicle" value="Bike">自行車<br/>
<input type="checkbox" name="vehicle" value="Car">汽車</p>
<p><input type="submit" value="提交"></p>
</form>
<script>
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(e){
popupSend(this);
e.preventDefault();
})
</script>

共有的表單控件方法：

每個表單元素都有兩個方法：focus()和blur()；其中，focus()方法用于獲得焦點，即激活表單元素，使其可以響應鍵盤事件，如：

window.onload = function(e){
document.forms[0].elements[0].focus();
}

默認情況下，只有表單元素可以獲得焦點；對于其他元素，可以設置其tabIndex設置為-1，然后再調用focus() 方法，也可以讓這些元素獲得焦點；

HTML5為表單控件新增了一個autofocus屬性，在支持這個屬性的瀏覽器中，只要設置這個屬性，不用Javascript就能自動把焦點轉移到相應的控件上，如：

<input type="text" autofocus />

如果在HTML中已經為元素設置這個屬性了，就不用在Javascript中調用focus()了，因此有必要在調用focus()之前先檢測是否設置了該屬性，如：

window.addEventListener("load", function(event){
var element = document.forms[0].elements[0];
if(element.autofocus !== true){
element.focus();
console.log("Js focus");
}
});

blur()方法：從元素中移除焦點；

與focus()方法相對的是blur()方法，它的作用是從元素中移走焦點；在調用blur()時，并不會把焦點轉移到某個特定的元素上，其僅僅是將焦點從調用這個方法的元素上面移走而已，如：

document.forms[0].elements[0].blur();

共有的表單元素事件：

當用戶與表單元素交互時它們往往會觸發鼠標、鍵盤或其他HTML等常規事件，除此之外，表單元素還支持以下3個事件：

• blur：失去焦點時時觸發；
• focus：獲得焦點時觸發；
• change：對于<input>和<textarea>元素，在它們失去焦點且value值改變時觸發；對于<select>元素，在其選項改變時觸發；

如：

var textbox = document.forms[0].elements[0];
textbox.addEventListener("focus", function(event){
if(event.target.style.backgroundColor != "red"){
event.target.style.backgroundColor = "yellow";
}
});
textbox.addEventListener("blur", function(event){
if(/[\d]/.test(event.target.value)){
event.target.style.backgroundColor = "green";
}else{
event.target.style.backgroundColor = "red";
}
console.log("blur");
});
textbox.addEventListener("change", function(event){
if(/[\d]/.test(event.target.value)){
event.target.style.backgroundColor = "green";
}else{
event.target.style.backgroundColor = "red";
}
console.log("change");
});

需要強調的是，change事件對于<input>和<textarea>元素，在它們失去焦點且value值改變時觸發；對于<select>元素，在其選項改變時觸發，如：

var selectbox = document.forms[0].elements["mySelect"];
selectbox.addEventListener("change", function(event){
console.log(this.options[this.selectedIndex].value);
});
selectbox.addEventListener("blur", function(e){
console.log("select blur");
});

當改變選項時，會觸發change事件，但此時，<select>仍處于焦點狀態，當其失去焦點時，才會觸發blur事件，這一點，有<input>有很大區別；

事件處理程序中的this：
事件處理程序中的this是觸發該事件的元素的一個引用；例如，可以通過this.form來取得其所在的Form對象的引用；通過this.form.x來獲取該表單中其它的表單元素；

單元素屬性2

為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。

昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。

建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。

示例代碼如下：

<form>
  最高學歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  <input type = "submit" value = "submit"/>
</form>

因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。

向服務器提交時，name叫做"education"（教育），value對應不同層次。

頁面效果如下：

大家可以點點試試，每次只能有一個被選中。如圖：

綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表單 </title>
  </head> 
  <body>
  <form>
  會員名稱：
  <input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
  會員密碼：
  <input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
  確認密碼：
  <input type = "text" name="confirmPassWord"/><br>
  <input type = "submit" value = "提交"/><br>
  </form>
  <hr>
  <form>
  興趣愛好：
  <br>
  <input type = "checkbox" name = "hobby" value = "reading"/>讀書
  <input type = "checkbox" name = "hobby" value = "film"/>電影
  <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
  <input type = "checkbox" name = "hobby" value = "music"/>音樂
  <br>
  最高學歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  <input type = "submit" value = "submit"/>
  </form>
  </body>
  </html>

頁面效果如下：

密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：

如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：

會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>

頁面效果如下：

上傳文件：使用type="file"可以上傳文件！

示例代碼如下：寫在"submit"的上面即可。

<input type = "file"/><br><input type = "submit" value = "submit"/>

頁面效果如下：

點擊"瀏覽"看下效果：

神奇！

使用圖片制作按鈕：將type="image"即可，代碼如下：

<input type = "image" src = "img/示例圖片/submit.jpg"/><br>

頁面效果如下：用一個src導入圖片即可。

示例圖片：路徑自行設置即可！

為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：

<input type="reset" /><br>

頁面如圖所示：

大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！

舉個例子，如圖：

下面我們點擊"重置"后效果如下：

form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！

type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。

button值以后在JavaScript部分還會細說，這里也先略過。

除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！

今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。

碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！

喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！

喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作