圖片熱點：

?規劃出圖片上的一個區域，可以做出超鏈接，直接點擊圖片區域就可以完成跳轉的效果。示例：

?

網頁劃區：

在一個網頁里，規劃出一個區域用來展示另一個網頁的內容。示例：

?

?

網頁的拼接：

在一個網絡頁面內，規劃出多個頁面窗口，以表格拼接的形式展示出來。

示例：

?

?表單：

<form id="" name="" method="post/get" action="負責處理的服務端">

id不可重復，name可重復，get提交有長度限制，并且編碼后的內容在地址欄可見，

post提交沒有長度限制，且編碼后內容不可見。

</form>（目前先不用寫）

?一、文本輸入：

?文本框<input type="text" name="" id="" value="" /> 【<form>賬號:<input type="text" requid="requid"(必須填寫在文本框)></form>】

??? 密碼框<input type="password" name="" id="" value="" />【密碼：input type="password" placeholder="請輸入密碼"（顯示在文本框的提示）】

??? 文本域<textarea name="" id="" cols=""(字符多少) rows=""(幾行高)></textarea>【說說：<textarea cols="35" rows="20"></textarea>】

??? 隱藏域<input type="hidden" name="" id="" value="" />

?二、按鈕：

?提交按鈕<input type="submit" name="" id="" disabled="disabled" value="" />【點擊后轉到form內的提交服務器的地址，其中submit-以上內容打包提交，value=上方顯示提交或者注冊】

??? 重置按鈕<input type="reset" name="" id="" disabled="disabled" value="" />【disabaled 代表按鈕失效】

??? 普通按鈕<input type="button" name="" id="" disabled="disabled" value="" />

??? 圖片按鈕<input type="image" name="" id="" disabled="disabled" src="圖片地址" />

??? disabled使按鈕失效

??? enable使按鈕可用

三、選擇輸入

??? 單選按鈕組<input type="radio" name="" checked="checked" value="" />【在本組當中只允許選擇一個，用 name來分組比如：<input type="radio" name="sex" checked="checked" disabled='disable"?/>男<input type="radio" name="sex"/>女?】必須選擇男的

??? 復選框組<input type="checkbox" name="" checked="checked" value="" />[checked="checked",表示必須被選中，<input type="checkbox>百事可樂<input type="checkbox>可口可樂<input type="checkbox>芬達] 從這三個里面可以選擇多選。

??? 文件上傳<input type="file" name="" id="" />

四、下拉列表框

4.下拉列表框

??? <select name="" id="" size="" multiple="multiple">

??? --size為1時，為菜單；>1時，為列表。multiple為多選。

??????? <option value="值">內容1</option>

????? ??<option value="值" selected="selected">內容2</option>

??????? --selected,設為默認

??????? <option value="值">內容3</option>

??? </select>【當size="1"時下拉的內容只能選擇一個。selected="selected"設為默認選中的。】

用以上做一個郵箱注冊的頁面如下；

源代碼：

<title>郵箱注冊</title>
</head>
<form>
<table background="0817/未標題-3.jps"align="left" width="100%" height="700" border="0" cellpadding="0" cellspacing="0">
<tr height="20"><td></td></tr>
<tr height="20"><td width="10%">
賬號：</td><td><input type="text" value="" placeholder="請輸入賬號"/>
</td>

</tr>
<tr height="20"><td></td></tr>
<tr height="20"><td width="10%"></td><td><font size="-3" color="#999999">需要通過郵箱激活賬戶，不支持sohu,21cn,sogou的郵箱</font></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>登陸用戶名：</td><td><input type="text" value="" placeholder="請輸入用戶名"/></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td><td><font size="-3" color="#999999">僅在登錄時使用，字符數不少于4個</font></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>顯示名稱：</td><td><input type="text" value="" placeholder="請輸入名稱"/></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td><td><font size="-3" color="#999999">即昵稱，字符數不少于2個</font></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>密碼:</td><td><input type="password" value="" placeholder="請輸入密碼"/></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>確認密碼：</td><td><input type="password" value="" placeholder="請輸入密碼"/></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td><td><font size="-3" color="#999999">至少8位，必須包含字母、數字、特殊字符</font></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>性別：</td><td><input type="radio" name="sex" value=""/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex" value=""/>女</td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td>喜好:</td><td><select name="" size="1" >
<option value="" selected="selected">唱歌</option>
<option value="">游泳</option>
<option value="">踢足球</option>
<option value="">打籃球</option>
<option value="">跳舞</option>
<option value="">跑步</option>
</select></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td><td><input type="submit" name="" value="注冊" /></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td></tr>
<tr height="20"><td></td></tr>

</table>



</form>
</html>

效果：

?

?

快速制作網頁的方法：

??? 利用Photoshop中的切片工具來規劃出要設置鏈接的位置，保存時注意選擇html和圖片的格式保存，設置好后存儲為web可使用的html格式。

用DREAMWEAVER打開，打開設計頁面，選擇切片弄好的位置，在屬性中輸入超鏈接的網址即可。

?

?

轉載于:https://www.cnblogs.com/diaozhaojian/p/5785634.html

總結

以上是生活随笔為你收集整理的表单和iframe的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。