0810HTML(表单)

图片热点:

规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。

<img src="a006.jpg" title="这是企鹅" usemap="ditu" />
<map name="ditu">
<area shape="rect" coords="196,92,296,192" href="http://www.baidu.com" /> ..........rect矩形,coords里代表矩形的一条对角线的两个点的位置
<area shape="circle" coords="540,171,50" href="http://qq.com" />..........circle圆形,coords里代表圆心位置与半径
<area shape="rect" coords="674,64,805,214" href="http://360.com" />
</map>

表单

<form>
账号:<input type="text" value="110" disabled="disabled" /><br />.......文本框 disabled为不可以改动
密码:<input type="password" value="" /><br /><br /> .........密码框
<input type="button" value="登陆" /><br />  ........普通按钮
<input type="submit" value="提交" /><br />..........提交按钮(点击后转到form内的提交的服务器的地址)
<input type="reset" disabled="disabled" /><br />.........重置按钮
<input type="image" src="a006.jpg" width="200" />........图片按钮
<br />
<br />
说说:<textarea cols="字符多少" rows="几行高">qwertyui</textarea>........文本域
<input type="hidden" value="12345" /><br />........隐藏域
<br />
<input type="radio" name="sex" checked="checked" />男<br />(单选按钮;checked,设置默认选项;name内的值用来分组)
<input type="radio" name="sex" />女<br />
<br />
<input type="checkbox" checked="checked" disabled="disabled" />可口可乐<br />(复选按钮)
<input type="checkbox" />百事可乐<br />
<input type="checkbox" />芬达<br />
<br />
<input type="file" /><br />.........(文件上传)
<br />
<select size="1">.........下拉列表框,size=1时,为下拉菜单;>1时为列表;multiple为多选
<option value="11">可口可乐</option>
<option value="22">百事可乐</option>
<option value="33">芬达</option>
</select>
</form>

<iframe src="Untitled-1.html" width="400" height="300px" frameborder="1"></iframe>......内嵌网页,frameborder,边线;scrolling,滚动条

例:QQ注册

<table background="89.jpg" align="center"width="600" height="700" border="0" cellspacing="0" cellpadding="0">
<tr height="30">
<td width="140"><font size="+1">注册账号</font></td>
<td></td>
</tr>
<tr height="50">
<td align="right">昵称&nbsp;&nbsp;</td>
<td><input type="text" /></td>
</tr>
<tr height="50">
<td align="right">密码&nbsp;&nbsp;</td>
<td><input type="password"/></td>
</tr>
<tr height="50">
<td align="right">确认密码&nbsp;&nbsp;</td>
<td><input type="password"/></td>
</tr>
<tr height="50">
<td align="right">性别&nbsp;&nbsp;</td>
<td><input type="radio" name="sex" checked="checked"/><input type="radio" name="sex"/></td>
</tr>
<tr height="50">
<td align="right">生日&nbsp;&nbsp;</td>
<td><select><option value="值">公历</option> <option value="值">农历</option></select>
<select ><option value="值">1989年</option><option value="值">1990年</option><option value="值">1991年</option><option value="值">1992年</option><option value="值">1993年</option><option value="值">1994年</option><option value="值">1995年</option><option value="值">1996年</option><option value="值">1997年</option><option value="值">1998年</option><option value="值">1999年</option><option value="值">2000年</option><option value="值" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;</option></select>
<select><option value="值">1月</option><option value="值">2月</option><option value="值">3月</option><option value="值">4月</option><option value="值">5月</option><option value="值">6月</option><option value="值">7月</option><option value="值">8月</option><option value="值">9月</option><option value="值">10月</option><option value="值">11月</option><option value="值">12月</option><option value="值" selected="selected"></option></select>
<select><option value="值">1日</option><option value="值">2日</option><option value="值">3日</option><option value="值">4日</option><option value="值">5日</option><option value="值">6日</option><option value="值">7日</option><option value="值">8日</option><option value="值">9日</option><option value="值">10日</option><option value="值">11日</option><option value="值">12日</option><option value="值">13日</option><option value="值">14日</option><option value="值">15日</option><option value="值">16日</option><option value="值">17日</option><option value="值">18日</option><option value="值">19日</option><option value="值">20日</option><option value="值">21日</option><option value="值">22日</option><option value="值">23日</option><option value="值">24日</option><option value="值">25日</option><option value="值">26日</option><option value="值">27日</option><option value="值">28日</option><option value="值">29日</option><option value="值">30日</option><option value="值">31日</option><option value="值"    selected="selected"></option></select></td>
</tr>
<tr height="50">
<td align="right">所在地&nbsp;&nbsp;</td>
<td><select><option value="值" selected="selected">中国</option><option value="值">美国</option><option value="值">英国</option><option value="值">俄罗斯</option></select>
<select><option value="值" selected="selected">山东</option><option value="值">北京</option><option value="值">河北</option><option value="值">湖南</option><option value="值">黑龙江</option></select>
<select><option value="值" selected="selected">淄博</option><option value="值">济南</option><option value="值">青岛</option><option value="值">烟台</option></select></td>
</tr>
<tr height="50">
<td>手机号&nbsp;&nbsp;</td>
<td><input type="text"/></td>
</tr>
<tr height="40">
<td></td>
<td><font size="-1">可通过该手机号码快速找回密码<br/>
中国大陆地区以外手机号码&nbsp;&nbsp;&nbsp;&nbsp;<a href="大乐透.exe" target="_blank">点击这里</a></font></td>
</tr>
<tr height="60">
<td></td>
<td><input type="text"/>&nbsp;<input type="submit" value="获取短信验证码"/></td>
</tr>
<tr height="50">
<td></td>
<td align="center"><input type="submit" value="立即注册"/></td>
</tr>
<tr height="50">
<td>&nbsp;</td>
<td><font size="-1"> <input type="checkbox"/>同时开通QQ空间<br/>
<input type="checkbox"/>我已阅读并同意相关服务条款和隐私政策<a target="_blank"href="http://zc.qq.com/chs/agreement1_chs.html">①</a><a href="http://www.qq.com/privacy.htm" target="_blank">②</a> </font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

 placeholder="" required="required"




posted on 2016-08-10 17:05  fei!  阅读(343)  评论(0编辑  收藏  举报