您的位置：首页 > Web前端 > HTML

HTML 浮动窗口 表单及表单控件 标签汇总 线包字效果

2015-05-13 21:07 393 查看
<html>
<head>
<title>第五讲代码</title>
</head>

<body>
<!--有时我们需要在一个含有<body>的页面嵌入另外一个页面，形成画中画的效果，这时就需要iframe元素（浮动窗口）-->
***************************************************************************************************************************************************
<br><b>1、浮动窗口：</b><br>

<!--iframe 用于在网页内显示网页-->
<iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>

<!--name 对浮动窗口进行命名，以便进行替换-->
<iframe src="http://www.haosou.com/" width="400px" height="300px" name="asd"></iframe>

<br>友情链接：<br>
<a href="http://www.taobao.com/" target="asd">淘宝网</a>

<br><a href="http://www.haosou.com/" target="asd">返回</a>
<br><br>
****************************************************************************************************************************************************
<!--表单元素（form）：
在网页中，我们经常需要把一些数据提交给服务器处理，比如注册用户，发帖等，这样就需要使用到表单元素。
常见的表单元素类型有：
Text:文字输入框
Password：密码输入框
Checkbox：复选框
Radio：单选框
Image:图片提交按钮
hidden：隐藏表单的元素
submit:提交按钮
reset：重置按钮
file：上传文件

基本结构：
<form action=”” method=””>
<input type=”类型” name=”名字”/>
<form>
-->
<img src="http://img.blog.csdn.net/20150513210623372?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM3MjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="400" height="150" alt="" />
<br><b>2、表单元素(form)：<b><br><br>

<b>(1)登录系统:</b>
<!--
<form>表单标记,
action属性的值是要接受提交的数据页面的url
method属性指定数据提交的方式，主要有两种： get 和  post
post的安全性更高，
-->

<form action="ok.html" method="get">

<br>用户名:<input type="text" name="username"/><br><br>
密  码:<input type="password" name = "password"/><br><br>
        <input type= "submit" value="登陆"/>    
<input type="reset" value="重置"/>

<br><br><b>(2)请选择你喜欢吃的水果（复选框）</b><br><br>
<!--对于同一个调查的复选框，他们的name属性值要保持一致-->
<!--注意，服务器真正接收的值是value的值，而尖括号外的值苹果等只是在网页界面上显示给用户看的-->
<!--checked属性，默认选中该项，单选框也是如此-->
<input type="checkbox" name="fruit" value="pingguo">苹果<br>
<input type="checkbox" name="fruit" value= "xiangjiao">香蕉<br>
<input type="checkbox" name="fruit" value= "juzi" checked >橘子<br>
<input type="checkbox" name="fruit" value="lizhi">荔枝<br>
<input type="checkbox" name="fruit" value="taozi">桃子<br>
<input type="checkbox" name="fruit" value="yingtao">樱桃<br>
        <input type= "submit" value="确定">    
<input type="reset" value ="重置">

<br><br><b>(3)请选择你的性别（单选框）</b><br><br>
<!--对于同一个调查的单选框，他们的name属性值要保持一致；
对于每一个input一定要有name值，否则服务器将无法接收-->
<input type="radio" name="sex" value="nan">男<br>
<input type="radio" name="sex" value="nv">女<br>
        <input type= "submit" name="确定">    
<input type="reset" name ="重置">

<br><br><b>(4)隐藏域的使用</b><br><br>
<!--在网页中，如果我们希望提交某些数据（这些数据用户不能看见），但又不影响页面显示效果，可以考虑使用隐藏域-->

<input type="hidden" name="data" value="ok!">

<br><br><b>(5)图片按钮的使用</b><br><br>
<br>用户名:<input type="text" name="username"/><br><br>
密  码:<input type="password" name = "password"/><br><br>
        <input type= "image" src="login.png"/>    
<input type="reset" value="重置"/>

<br><br><b>(6)下拉列表的使用</b><br><br>
<b>请选择你的出生地：</b><br><br>

<!--size属性表示在页面上下拉列表显示几列，默认为1-->
<!--multiple属性表示下拉列表可多选，注意，是用 Ctrl 键配合鼠标实现多选。-->
<!--selected属性，下拉列表中默认选中该项-->
<select name="address" size="2" multiple>
<option value="qingdao">青岛</option>
<option value="jinan">济南</option>
<option value="weifang" selected>潍坊</option>
<option value="jining">济宁</option>
<option value="yantai">烟台</option>
<option value="weihai">威海</option>

</select>

<br><br><b>(7)文本域的使用</b><br><br>
<!--文本域的大小用行和列表示-->
<textarea name = "my_textarea" rows="10" cols="50">请输入...</textarea>

<br><br><b>(8)文件上传的控件</b><br><br>
<input type="file" name="my_file">文件上传</br>
        <input type= "submit" value="上传">    
<input type="reset" value ="重置">

</form>

<br><br><b>(9)相关表单元素分组标记</b><br><br>
<img src="http://img.blog.csdn.net/20150513210727832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM3MjQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="500" height="100" alt="" />
<form>
<!--fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
<fieldset style="width:300px">
<!--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题-->
<legend>健康信息</legend>
身高：<input type="text" name="shengao"/><br>
体重：<input type="text" name="tizhong" />
</fieldset>
</form>

</body>
</html>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航