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