表单和iframe的使用

图片热点:

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

 

网页划区:

在一个网页里,规划出一个区域用来展示另一个网页的内容。示例:

 

 

网页的拼接:

在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来。

示例:

 

 表单

<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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/490095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python计算熵

熵的计算公式&#xff1a; p(x)为概率&#xff0c;全部概率之和为1 假设 probs是网络输出的n分类预测概率&#xff0c;尺寸为[batch_size,n]&#xff0c;那么预测熵的计算代码如下&#xff1a; log_probs np.log2(probs) shang -1 * np.sum(probs * log_probs, axis1)

jq获取id的名称_查找 Linux 发行版名称、版本和内核详细信息 | Linux 中国

我这里给出了一些命令行方法来查找 Linux 系统信息。可能有很多&#xff0c;但这些方法适用于大多数 Linux 发行版。-- Sk本指南介绍了如何查找 Linux 发行版名称、版本和内核详细信息。如果你的 Linux 系统有 GUI 界面&#xff0c;那么你可以从系统设置中轻松找到这些信息。但…

报告 | 中国科学院发布地球大数据报告

地球大数据——具备海量、多源、异构、多时相、多维度、高耦合度、非平稳以及非结构化等特点&#xff0c;是深度认知地球和科学发现的新引擎&#xff0c;在促进可持续发展中可发挥重大作用。当地时间9月26日&#xff0c;在美国纽约联合国总部召开的第74届联合国大会上&#xff…

mugen4g补丁如何使用_CAD如何去除教育版戳记?

如何去除打印时出现的教育版字样&#xff1f;当我们收到甲方提供的建筑图纸时&#xff0c;尤其是设备安装类专业的CAD文件&#xff0c;很多都是教育版&#xff0c;也不知道是为啥。但是作为设计师&#xff0c;打印图纸时出现教育版戳记&#xff0c;那就显得太不专业了&#xff…

新书推荐:《追问人工智能:从剑桥到北京》

写此书的目的是为了探索&#xff1a;能计算的算计能算计的计算

Gartner公布五大新兴技术趋势 AI成主角

市场调研机构Gartner近日发布了2019年度《新兴技术的炒作周期(Hype Cycle)》研究报告&#xff0c;报告显示2019年有五大技术发展趋势十分突出&#xff0c;它们将对企业机构转型产生重要影响。这五大趋势分别是传感和移动、增强人类、后经典计算和通信、数字生态系统以及先进的人…

a12处理器和骁龙855_【性能】骁龙855最新跑分曝光 多核竟超苹果A12?

据之前消息&#xff0c;索尼将在2月24日开始的MWC 2019大展上推出新旗舰Xperia XZ4、Xperia XA3、XA3 Ultra三款新机&#xff0c;其中XZ4将采用21:9 FHD 分辨率的超窄“带鱼屏”&#xff0c;搭载骁龙855处理器&#xff0c;是主打旗舰&#xff0c;今日索尼Xperia XZ4最新跑分出炉…

word如何去掉标题前面的黑点

首先选中标题&#xff0c;点击 在弹出来的框框里取消“ 段中不分页 ”和“ 与下段同页 ” 此时黑点已经取消了

ICLR 2019八大趋势:RNN正在失去光芒,强化学习仍最受欢迎

大数据文摘出品来源&#xff1a;huyenchip编译&#xff1a;笪洁琼、周家乐ICLR 2019过去有几天了&#xff0c;作为今年上半年表现最为亮眼的人工智能顶会共收到1591篇论文&#xff0c;录取率为31.7%。为期4天的会议&#xff0c;共有8个邀请演讲主题&#xff0c;内容包括&#x…

python中赋值语句_python中赋值语句和增强赋值语句的区别

展开全部 赋值语句是2113由赋值表达式再加上分号构成的表5261达式语句。 其一般形式为&#xff1a;4102 变量表达式; 赋值语句的功能和特1653点都与赋值表达式相同。 它是程序中使用最多的语句之一。 在赋值语句的使用中需要注意以下几点&#xff1a; 1.由于在赋值符“”右边的…

word如何设置页眉横线的磅数

首先双击页眉&#xff0c;并选定横线 这样即为选中了横线 之后点击&#xff1a; 选择“边框与底纹” 之后按照下图设置即可

聚焦基础科学 引领未来发展

作者&#xff1a;姜桂兴 来源&#xff1a;光明日报当前&#xff0c;伴随着新一轮科技革命和产业变革的兴起&#xff0c;各国科技创新正在回到基础科学研究的根本问题上来。科学界意识到&#xff0c;技术创新背后的推动力是深层次的科学问题研究&#xff0c;只有聚焦基础问题研究…

word页眉的横线怎么居中

有时候word插入的页眉的横线居然不是居中&#xff0c;是偏左的&#xff08;好无语。。&#xff09; 为了解决这个问题&#xff0c;首先双击页眉&#xff0c;选中当前页眉的所有内容 点击插入对齐制表符 此时横线处于居中状态了 但这时文字不居中了。。此时只需要将文字设成左…

阿里平头哥会和AMD一样成为令英特尔头痛的存在吗?

来源&#xff1a;与非网阿里巴巴通常被认为是中国最大的电子商务和云平台运营商。但是去年9月&#xff0c;这家科技巨头与一家名为平头哥的新子公司正式进入了芯片制造市场。此举是在阿里巴巴收购中国芯片制造商杭州中天微之后的几个月。平头哥将中天微与阿里巴巴自己的研发部门…

extjs中store获取后台数据_Excel实战技巧64: 从工作簿中获取数据(不使用VBA)

学习Excel技术&#xff0c;关注微信公众号&#xff1a;excelperfect这是在研读《Escape From Excel Hell》时学到的技术&#xff0c;从本工作簿中或者其他工作簿中获取所需要的数据&#xff0c;以便于作进一步的分析或者绘制Excel图表。下图1所示是用于获取数据的工作表。图1在…

5G都不能取代的Wi-Fi6,到底有多厉害?

来源&#xff1a;北京物联网智能技术应用协会蜂窝通信与WiFi&#xff0c;就像移动设备上的两大高手。彼此势均力敌&#xff1a;一个主室内&#xff0c;一个主室外。WiFi是移动网络的室内覆盖补充&#xff0c;也承担着大量的数据流量卸载&#xff0c;二者既想各自占山为王&#…

eclipseini设置使用的jdk_系统安全篇(四)-如何升级JDK版本?

最近在做项目时为保证系统安全&#xff0c;使用漏洞扫描工具对程序所在的设备进行安全漏洞扫描&#xff0c;发现了好多JDK的安全漏洞&#xff0c;为了对发现的这些漏洞进行修复&#xff0c;需要升级JDK版本。本章主要介绍如何升级JDK版本。第一步、从oracle官网下载JDK最新版本…

supervisord安装使用简记

What is supervisor Supervisor is a client/server system that allows its users to monitor and control a number of processes on UNIX-like operating systems. 引用自supervisor官网&#xff0c;中文意思就是是一个C/S架构的系统&#xff0c;用来监控管理类UNIX系统上进…

ppt放映显示备注 投影不显示

点击设置幻灯片放映 勾选使用演示者视图 点击从当前幻灯片开始 在放映幻灯片过程中右键鼠标&#xff0c;点击显示演示者视图

懂数学人的都认同:数学的本质[关联]万物(一)

来源&#xff1a;数学职业家本文将会以数学为主线和切入点&#xff0c;进行一次思想和思维上的自由推理探索认知之旅&#xff0c;并将会透过一种有趣视角和观点&#xff0c;窥见一个我们所熟悉又有所不同的世界、万事万物和我们的宇宙。现在就让我们开始这次认知探索的旅程吧。…