表单和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;那么你可以从系统设置中轻松找到这些信息。但…

matlab设置图片背景透明_Matlab中得到透明背景图片的方法

MATLAB输出的矢量图往往不是透明背景的&#xff0c;这样插在其他文件中就会很难看。关于在MATLAB中如何得到透明背景的矢量图&#xff0c;我有个经验就是&#xff1a;用MATLAB导出pdf图形(而不是eps图形)&#xff0c;然后用Acrobat另存成eps图形&#xff0c;往往就是透明的了。…

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

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

IE中window的模态框与返回值

window.returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模态窗口时,用于返回窗口的值: 在父页面中使用window.showModalDialog可以弹出一个模态框 var result window.showModalDialog("child.htm",n…

numpy降序排序

np.sort是升序排序 为了降序排序&#xff0c;可以先升序排序然后在反转数组 shang_sort np.sort(shang) shang_sort shang_sort[::-1] 同理&#xff0c;numpy.argsort() 函数返回的是数组值从小到大的索引值。 为了得到降序排序的索引值&#xff0c;可以通过先用numpy.ar…

快手用户群体分析_快手发布《2020快手用户及营销报告》

11月30日&#xff0c;在快手2020磁力大会现场&#xff0c;清华大学新闻与传播学院沈阳教授团队与快手磁力引擎联合发布《2020快手用户及营销报告》&#xff0c;以快手内容、社交、商业三个维度为切口&#xff0c;创造性地提出“星云生态”概念。沈阳教授在现场生动地解读了此份…

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

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

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

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

TypeError: only integer scalar arrays can be converted to a scalar index

在取某些索引下的值时&#xff0c;报错TypeError: only integer scalar arrays can be converted to a scalar index data data[index] 解决方法&#xff1a; 首先需要将data转换为numpy array data numpy.array(data) data data[index]

protobuf string类型_Protobuf

介绍Google Protocol Buffer(简称Protobuf)是一种轻便、高效的结构化数据存储格式&#xff0c;平台无关、语言无关、可扩展、可用于通讯协议和数据存储等领域。Protocol Buffers 是一种灵活&#xff0c;高效&#xff0c;自动化机制的结构数据序列化方法&#xff0d;可类比 XML&…

word中怎样单独删除某一页的页码

假设目标是去掉页码为4的那一页 点击第4页中的任意空行&#xff0c;之后点击“页面布局”选项卡中的“分隔符”&#xff0c;之后选择“连续” 双击页脚部分&#xff0c;点击第4页页眉的任意位置&#xff0c;之后取消掉“链接到前一条页眉” 之后第4页的页脚&#xff0c;第5页的…

关于 webapi ajax进度条信息设置

1、Web.config 设置跨域 <httpProtocol><customHeaders><add name"Access-Control-Allow-Origin" value"*" /><add name"Access-Control-Allow-Headers" value"Content-Type" /><add name"Access-Con…

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最新跑分出炉…

openwrt 格式化_openwrt 挂载硬盘步骤详解

确认硬盘设备符号方法1&#xff1a;>>> ls /dev/sd*/dev/sda /dev/sdb方法2&#xff1a;>>> cat /proc/partitionsmajor minor #blocks name31 0 128 mtdblock031 1 129920 mtdblock131 2 1024 mtdblock231 …

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

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

使用svnsync同步svn

使用svnsync实现已有版本库的镜像 svn不支持分布式开发&#xff0c;所以把svn版本库保存在一台服务器上是不安全的。制作一个镜像svn版本库有多种方式&#xff0c;我采用subversion自带的svnsync程序。 源版本库路径&#xff1a;http://192.168.0.100/svn/project 镜像版本库路…

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.由于在赋值符“”右边的…