ext orm ike 技術分享 res asp checkbox method inpu

一. <a>標簽

0. 用圖片當鏈接，就是把圖片當成鏈接文字即可

<a href="http://www.baidu.com/" title="跳轉到百度">
  <img src=‘images/pic.jpg" alt="蘋果"/>
</a>

　　

1. <a href="#">新聞標題</a> 這裏的#表示缺省值，會使鏈接跳到頁面頂部，如果寫成href="" ,效果一樣 如果想點鏈接啥都不做，需要寫成<a href="javascript:;">缺省值</a> 2. 鏈接時打開一個新網頁,使用target屬性，默認為target="_self",修改為如下 <a href="http://www.baidu.com/" title="跳轉到百度" target="_blank">百度</a> 說明： target屬性規定了在何處打開超鏈接的文檔。 _blank使瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。 3. 頁面內定義滾動跳轉,使用id屬性 例如有三個標題1，2，3，需求是想點擊鏈接名到指定標題位置

<a href="#mao1">標題1</a>
<a href="#mao2">標題2</a>
<a href="#mao3">標題3</a>
 
 
<h3 id="mao1">標題1</h3>
........
<h3 id="mao2">標題2</h3>
........
<h3 id="mao3">標題3</h3>

　　

二. 表單

1. input為text類型時，也可以預先寫入值

<form action="form_action.asp" method="get">
name: <input type="text" name="username" value="George" /><br />
password: <input type="text" name="pwd" value="Bush" /><br />
<input type="submit" value="Submit form" />
</form>

註意：action的值為提交地址 2. 互斥單選框，需要加上name屬性，並且值要相同，否則兩個都能選

<label>性別：</label>
<input type="radio" name="gender" value="0" />男
<input type="radio" name="gender" value="1" />女

　　

3. checkbox為多選框，name也要定義為一樣的

<label>愛好：</label>
<input type="checkbox" name="like" value="game" />遊戲
<input type="checkbox" name="like" value="shopping" />購物
<input type="checkbox" name="like" value="study" />學習

　　

4. 提交，重置表單項

<input type="submit" name="" value="提交">
 
<!-- input類型為reset定義重置按鈕 -->
<input type="reset" name="" value="重置">
 

　　

value屬性的定義和用法 value 屬性為 input 元素設定值，對於不同的輸入類型，value 屬性的用法也不同：

• type="button", "reset", "submit" - 定義按鈕上的顯示的文本
• type="text", "password", "hidden" - 定義輸入字段的初始值
• type="checkbox", "radio", "image" - 定義與輸入相關聯的值

註意： <input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。 value 屬性無法與 <input type="file"> 一同使用。 5. select定義下拉框

<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
 

　　

6. input類型為file定義上傳照片或文件等資源

<label>照片：</label>
<input type="file" name="person_pic">

　　

效果如下

7. 定義多行文本，如果想精確控制能輸入多少字，需要css

<label>個人描述：</label>
<textarea name="about"></textarea>

　　

8. label標簽中的for屬性，使值等於input中的id屬性，提高用戶體驗，點擊字就可選上選項

<label>性別：</label>
<input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="1" id="female"><label for="female">女</label>

　　

說明：value值的作用 1）. 如果form的提交方式為get，提交的時候，name和value的值會被顯現在地址欄中，用於數據量小且非敏感信息，如下 2）. 對於密碼等敏感信息及數據量較大時，需要使用post方法，它用http協議報文進行提交

三. 內嵌框架，就是在一個網頁中會單獨有一個窗口顯示其他網頁

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>

　　

說明： width, height用於定義窗口大小 frameborder用於設置邊框 scrolling用於設置滾動條 用途： 1）可內嵌多個框架來合成頁面

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>
<iframe src="001列表.html width="900" height="500" frameborder="0" scrolling="no">
</iframe>

　　

2)進行頁面內跳轉

<a href="http://www.baidu.com" target="myframe">百度網</a>
<a href="http://www.itcast.cn" target="myframe">傳智播客</a>
<a href="http://www.qq.com" target="myframe">騰訊網</a>
<br />
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe">
</iframe>

　　

說明： 1. 實現要點是所有<a>標簽的target屬性值要和<iframe>標簽的name屬性值相同 2. 實現效果是，頁面初始顯示百度的內嵌窗口，點擊騰訊網鏈接會在內嵌窗口顯示騰訊網，效果如下

html的<a>標簽，表單，內嵌框架