• 今日课堂学习笔记03


    今日学习了很多内容。有iframe框架和表单。

    现在进入主题:

    iframe 内嵌框架

    iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容。

    标签属性常用的有 width、height、scrolling、frameboder

    scrolling的值是yes/no/auto与css里的overflow不一样,容易混淆。

    滚动条的出现是嵌入网页大小与框架的大小对比为准的,就是当网页大于框架大小时在允许的情况下,它就会出现滚动条。

    frameboder是设置窗口的边线

    语法:

    <iframe url="地址" name="名字"></iframe>

    iframe的开始标签到结束标签之间可以放内容,当浏览器不支持的时候就会出现这个内容,一般为提示内容。

    如:

    <iframe src="http://www.baidu.com" name="frame">你的浏览器不支持iframe框架</iframe>

    例子:
    <iframe name="frame" src="http://www.baidu.com" frameborder="1" width="200" height="200" scrolling="no"></iframe>

    例子的效果图:

    form表单

    表单用于向服务器传输数据。

    例子解析:

    <form action="#" method="get" target="_blank"></from>

    target打开方式,类似a标签的target

    target="_blank|_self|_top"

    action要提交到的页面地址,#为本页面

    提交方式method是有分get和post

    get:是提交到URL后面

    post:直接提交到后台

    例子:
    <form action="#" method="get">

    用户名:<input type="text" name="username">

    密码:<input type="password" name="pwd">

    <input type="submit" value="提交">

    </form>

    效果图:

    本例子说明了一个get的方式提交会在URL的后面出现你所填的内容和信息就是问号(?)后,

    如下我在name为username的表单里填写了“大大”,在name为pwd表单填写了“dfsfsfs”

    input标签

    然后是重要的value值-》  默认值

    比如:

    <input type="text" value="1234">

    那么在输入框里先会有这个默认值

    size 以字符为单位的宽度

    readonly 是否只读

    是设置只能读取,不能修改或填写

    maxlength 输入字符的最大长度

    这个是为了更好的用户体验,方便填写

    disabled 是否禁用

    就是禁止这个标签被填写或使用之类的,是为了达到某种效果,比如完整的填写注册才能点击注册之类的。

    readyonly与disabled的区别:

    disabled会使文本框变灰,而且通过js获取内容也获取不了(在有内容的前提下),

    而readonly只是使文本框不能输入,外观没有变化,但通过js还是可以获取它的内容的。

    js获取readonly时,js是区分大小写的,所以readonly的正确写法是readOnly;

    它返回的是一个布尔值。可以从js里设置或修改。

    isabled在js里可以获取到的也是一个布尔值。

    disabled的修改是在js里修改的,就是对其值的修改,而它在标签属性里直接修改是行不通的。

    如:

    HTML代码

    <input type="text" name="disabled" value="用户名" disabled>

    javascript代码:

    var oFrom=document.getElementsByTagName("form")[0];

    oFrom.disabled.disabled=false || “”;

    HTML标签例子:

    <input type="text" name="disabled" value="用户名" disabled>
    <input type="text" name="readonly" value="用户名" readonly>

    效果图:

    label标签

    为了更好的用户体验,就是关联到你所需要的标签去。

    例子:

    <label for="ure">用户名:</label><input type="text" name="username1" id="ure">

    for是指向ID的,就是说有ID它才能关联上。

    label 元素不会向用户呈现任何特殊效果,不过,它为鼠标用户改进了可用性。

    就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    单选按钮(radio)

    设置单选时需要把name值设置成一致的,那么就可以达到单选的效果。

    例子:

    <label for="male">male</label><input type="radio" id="male" name="sex" value="1">
    <label for="female">female</label><input type="radio" id="female" name="sex" value="2">

    value的设置是给服务器看的,让其来识别选择了什么,后提交到所需要的结果。

    accesskey="k"设置快捷按钮

    只要 (Alt+设置值) 的按钮就可以实现。

    checked设置默认选择项

    tabindex Tab的次序,就是可以设置它的按键次序,但当在radio里只能设置到其中一个有效,其他的不会

    被选择到,而是跳过到下个可获取光标的元素。

    checkbox 多选项复选框

    设置成一组的复选框需要设置一致的name值,而它的特点与单选按钮差不多,区别在于可以选多个选项。

    input标签关于按钮的type属性

    提交按钮(submit),提交表单数据的。

    重置按钮(reset),表单内容全部重置。

    图片按钮(image),有提交表单的作用,它是一张图片的来的,怎么可以简单的制作自己所需的按钮。

  • 相关阅读:
    抽象类与接口的区别
    模板模式(Template Pattern)
    KVM虚拟化
    find文本处理(locate)实例学习记录
    AWK-文本处理测试实例记录
    Linux系统中如何查找大文件
    吞吐量和Iops、测试工具FIO使用
    linux了解
    了解docker
    语言资源国际化
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/5727237.html
Copyright © 2020-2023  润新知