zoukankan      html  css  js  c++  java
  • 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>

    这是一个单选按钮分别有boygirl两个选项你只能选其中一个。

    <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

  • 相关阅读:
    记住密码 cookie+MD5 的应用[转]
    TDD测试[转]
    架构模式随笔
    MVC架构探究及其源码实现
    强大的SqlCacheDependency【转】
    使用Nant构建入门
    web架构设计经验分享[转]
    DIV+CSS布局大全
    如何突破Windows 2003 远程桌面连接数限制
    大型互联网网站架构心得[转]
  • 原文地址:https://www.cnblogs.com/azq6252930/p/5740701.html
Copyright © 2011-2022 走看看