HTML基础篇之内嵌框架和表单
内嵌框架:
<iframe src="http://www.baidu.com" name="d"></iframe>
网页会显示一个这样的效果
在网页里面会有另外一个网页而且内嵌框架也有它的属性
属性 属性值 说明
width px , % 指定框架的宽度
height px , % 指定框架的高度
scrolling yes,no,auto 是否显示滚动条
frameborder 1, 0 是否显示边框
<iframe width=”100%” height=”600” scrolling=”yes” frameborder=”0” src="http://www.baidu.com" name="d"></iframe>
图例:
HTML表单(重点)
<form>标签:
<form action=”要发送到哪里” method=”get/post” enctype=”MIME信息 target=_blank/_top/_self” ></form>
Action:把当前文档发送到哪个服务器,
Metho:发送请求的方式为网址可见还是不可见。(这里不建议用get提交方式最好用post保证安全性)
Enctype:如果是上传文件的话请写multipart/form-data
Target:_blank/_top/_self这三个之前超链接那里有说明就不说了
<input>输入框
这里连同属性一起将比较好
type input元素类型 type还可以规定有几种输入框的类型下面会一个一个讲
name input 元素的名称
value input 元素的值
size input 元素的宽度
readonly 是否只读
maxlength 输入字符的最大长度
disabled 是否禁用
<form action=”login.php” method=”post”>
用户名:<input type=”text” name=”username”/>
</form>
浏览器中会显示一个可输入的文本框在用户名单后面。
<form action=”login.php” method=”post”>
密码:<inout type=”password” name=”passsword”/>
</form>
这是一个密码输入框你在输入时是看不到自己输入的东西。
<form action=”login.php” method=”post”>
<input type=”hidden” name=”aaaa” value=”我想发这条消息能看到吗”/>
</form>
这是一个隐藏域,你在浏览器上是看不到的。
<form action=”login.php” method=”post”>
性别:<input type=”radio” name=”gender” vaule=”1”/>boy
<input type=”radio” name=”sgender” value=”2”/>girl
</form>
这是一个单选按钮分别有boy和girl两个选项你只能选其中一个。
<form action=”login.php” method=”post”>
爱好:<input type=”checkbox” name=”love” value=”1”/>听音乐
<input type=”checkbox” name=”love” vallue=”2”/>看电影
<input type=”checkbox” name=”love” vaule=”3”/>玩游戏
</form>
这是一个复选框可以同事对多个选项进行选择。
<form action=”login.php” method=”post” enctype=”mulitipart/ form-data”>
上传图片:<input type=”file” name=”mypic” multiple=”2”/>
</form>
这是一个文件上传框它能上传图片,如果要上传多个图片想我上面一样加一个multiple设置最高可上传个数就可以了。不同浏览器有不同的文件上传框IE的比较好看。
<form action=”login.php method=”post”>
<h4>这是下拉效果</h4> <!--这里可有可无-->
地区:<select nam=”area”>
<optgroup label=”城市” selected>
<option value=”1”>北京</option>
<option value=”2”>上海</option>
</select>
这个是下拉选择框,上面的我设置了selected就是打开在选择框下第一个显示城市。这个只能单选。
<form action=”login.php method=”post”>
<h4>这是多选效果</h4> <!--这里可有可无-->
地区:<select nam=”area” size=”3” multiple>
<optgroup label=”城市” selected>
<option value=”1”>北京</option>
<option value=”2”>上海</option>
<option value=”3”>杭州</option>
<option value=”4”>广州</option>
</select>
这是一个多选的选择框首先我们先要把选择框设置大一点不然多选不到,size=”3”显示了三个。按住shift可以多选。
还有一个optgoup标签是标签经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。 label是指定组合选项名称。
个人简介:<textarea name=”desc” cols=”50” rows=”10” wrap=”virtual”></textarea>
这是一个个人简介的多行文本输入框你可以在里面输入文字字幕符号等。
<form action method=”post”>
<p>First Name:<input type=”text” name=”fname”/></p>
<p>Last name:<input type=”text” name=”lname” disabled=”disabled”/></p>
<input type=”submit” value=”submit” />
</form>
你会发现Last name怎么点都点不了这就是禁用diasabled标签,而且文本框会变成灰色。
<form action method=”post”>
Name:<input type=”text” name=”email”/>
Country:<input type=”text” name=”country” value=”china” readonly=”readonly”/>
<input type=”submit” value=”submit”/>
</form>
我用了readonly标签后你会发现在浏览器里面country的输入框的china去不掉,也不能输入东西。
表单的按钮
<form aciton> <input type=”submit” name=”sub” value=”提交按钮”/> <input type=”reset” name=”res” value=”重置按钮”/> <input type=”button” name=”btn” value=”普通按钮”/> <inout type=”image” name=”img” src=”按钮图片文件名加格式”/> </form>
这里介绍了四个表单中的提交、重置、普通、图片按钮。
提交按钮是用来提交网页上的填写的东西
重置按钮是用来把填写错的东西重置
图片按钮是美化你的按钮做出一个漂亮的按钮
其他相关表单标签
<fieldset>
<legend>注册</legend>
<form name=”f” action=”a.php” method=”post”>
用户名<input type=”text” name=”username”/><br />
密码<input type=”password” name=”password”/><br />
<input type=”submit” name=”sub” value=”提交”/>
</form>
</fieldset>
Fieldset作用是把表单中的元素组合起来。legend标签为fieldset元素定义的标题。
<label>标签
<form name”f” action method=”post”>
<input type=”aido” name=”sex” value=”1” id=”male”/>
<label for=”male”>男</label>
<input type=”radio” name=”sex” vaule=”2” id=”female”/>
<label for=”female”>女</label>
</form>
Label作用将输入选项或选项及其标签文字关联起来,它本身不会呈现任何效果,使用时For属性应当与id属性相同,不然不能关联,效果将呈现不出来。
HTML5新增元素
请看此链接:http://www.runoob.com/html/html5-new-element.html
HTML基础篇之内嵌框架和表单的更多相关文章
- SpringMVC.入门篇《二》form表单
SpringMVC.入门篇<二>form表单 项目工程结构: 在<springmvc入门篇一.HelloWorld>基础上继续添加代码,新增:FormController.ja ...
- Flask10 登录模块、表单框架、表单渲染、表单验证、bookie、请求之前钩子、g对象、编写装饰器
from flask import Flask from flask import request from flask import render_template from flask_wtf i ...
- 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- 来玩Play框架04 表单
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 表单(form)是最常见的从客户往服务器传递数据的方式.Play框架提供了一些工具 ...
- HTML静态网页 图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- dwz框架---(2)表单回调函数
dwz中的表单回调函数大概有下面几种: /** * 普通ajax表单提交 * @param {Object} form * @param {Object} callback * @param {Str ...
- Python——Flask框架——Web表单
一.框架Flask-WTF 安装: pip install flask-wtf 需要程序设置一个密钥 app = Flask(__name__) app.config['SECRET_KEY'] = ...
随机推荐
- java中readLine()方法为什么有的行读不到?
今天在使用java对IO操作时,readLine()输出到控制台的行少了很多.后来发现readLine()实际上是一次读取一行.如果我们不话readLine()读取的行内容赋给一个字符串的话,每直接调 ...
- Web网站的几个并发量级
评价一个网站的“大小”,处于视角的不同,有很多种衡量的方法,类似文章数,页面数之类的数据非常明显,也没有什么可以争议的.但对于并发来说,争议非常之多,这里就从一个技术的角度开始,谈谈几个Web网站的数 ...
- Swift - 点击事件奇偶次判断
// 按钮点击事件 func onTouchUpInside() { struct touchUpInside { static var count: Int = 0 } touchUpInside. ...
- win7(x64)下安装cocos2d并编译安卓项目
好吧,不为啥,就是如题. win7 x64 脑袋内存比较小,说不定明儿就忘了,今天记录一下. 没有什么经验,所有步骤基本都是百度出来的,这里边操作边记录,为了保护原创作者,这里我都附上我查找的链接. ...
- HEAP CORRUPTION DETECTED :after Normal block 错误
http://blog.csdn.net/zhccl/article/details/7889590
- 安装zeppelin
安装zeppelin 1.默认安装好spark集群 2.安装zeppelin 1.解压安装包 tar zxvf zeppelin-0.5.5-incubating-bin-all.tgz 2.配置环境 ...
- Mesos高可用解决方案剖析
本文作者王勇桥,80后的IT攻城狮,供职于IBM多年,Mesos和Swarm社区的贡献者.本文是他根据自己对Mesos的高可用(High-Availability)设计方案的了解以及在Mesos社区贡 ...
- python学习 3笔记
merge dict def merge(defaults, override): r = {} for k, v in defaults.items(): if k in override: if ...
- Unable to convert MySQL date/time value to System.DateTime 错误
C#读取MySql时,如果存在字段类型为date/datetime时的可能会出现以下问题“Unable to convert MySQL date/time value to System.DateT ...
- ajax返回json数据,对其中日期的解析
JS 对其格式化 方法如下 function ChangeDateFormat(d){ //将时间戳转为int类型,构造Date类型 var date = new Date(parseInt(d.ti ...