04 表单/iframe

5/11/2021 html

# form 表单

form 常用数据

  • name

    表单名称

  • action

    规定当提交表单时,向何处发送表单数据
    通常是一个后台文件名(.jsp/.php/.asp/.aspx/.py等),或网址。如果是#,表示提交到当前文件下。
    在有 submit 功能的元素触发时执行

  • method

    规定如何发送表单数据(表单数据发送到 action 属性所规定的页面),常见的用 post,get方式请求。

# 表单元素

input 、 textarea 、 button 、 select

# input 类:主用用来输入,选择或发出指令

input:输入(表单输入)元素 - HTML(超文本标记语言) | MDN (opens new window)

type: text/password/radio/checkbox/file/button/image/submit/reset

<input type="text" /> : 定义供文本输入的单行输入字段
<input type="password" /> :定义密码字段
<input type="submit" /> :定义提交表单数据至表单处理程序的按钮
<input type="image" /> :定义图片提交按钮
<input type="radio" /> : 定义单选按钮 checked {boolean} :属性为选中状态,true为选中,false 为未选中
<input type="checkbox" /> : 定义复选框 checked {boolean} :属性为选中状态,true为选中,false 为未选中
<input type="button" /> : 定义普通按钮
<input type="reset" /> : 定义重置按钮
<input type="file" /> :定义文件框

name 属性对应提交数据的参数名称

  • text

    单行文本输入框 type="text"可以不写,默认值。
    属性:placeholder(提示)/ name(命名)/ minlength 和 maxlength(最少/多输入的字符个数)
    / disabled(失效)/ readonly(只读)/ value(默认值)/ pattern(正则匹配)

  • password

    密码框 属性与text一样

  • radio

    单选钮,通常是两项以上。
    常用属性有:name(必须要有)/value/checked(选中)/disabled(失效)/readonly(只读)
    分组:使用 name 分组,多个 radio name 一致

  • checkbox

    复选框,可以用来选择0项、1项或多项。
    常用属性有:name(必须要有)/value/checked(默认选中)/disabled(失效)/readonly(只读)
    分组:使用 name 分组,多个 checkbox name 一致

  • file

    文件上传按钮

  • button

    普通按钮,通常用它去调用脚本代码。
    常用属性有:value(按钮的标题)/disabled(失效)

  • image

    图片按钮,用法与button一样。
    有一个特殊属性:src(用来加载提示图片,用它替换了value)
    它有提交功能,与submit功能一样。

  • submit

    提交按钮,用来将表单数据提交到后台。
    常用属性有:value(按钮的标题)/disabled(失效)

  • reset

    重置按钮,将表单所有组件输入的内容全部清空,还原为初始状态。
    常用属性有:value(按钮的标题)/disabled(失效)

# textarea

textarea - HTML(超文本标记语言) | MDN (opens new window)

文本域(也可以叫多行文本框),主要用于输入大批量的文本内容。

常用属性:name/id/cols(列数)/rows(行数)/placeholder/minlength/maxlength/required(必须输入)/value

# select

select - HTML(超文本标记语言) | MDN (opens new window)

下拉列表框,默认用于单项选择。用option呈现每个选项。

multiple属性:表示可以多选,这时的下拉列表框变成了列表框
size:最多显示的行数

<form action="">
    <label for="course">选课:</label>
    <select id="course" multiple size="10">
        <option value="语文">语文</option>
        <option value="数学">数学</option>
        <option value="计算机">计算机</option>
        <option value="其它">其它</option>
    </select>
</form>

label label - HTML(超文本标记语言) | MDN (opens new window)

# button

普通按钮,具有提交功能。可以单独使用,不写在form元素中;如果写在form中,有提交功能。

button - HTML(超文本标记语言) | MDN (opens new window)

# iframe

iframe 元素会创建包含另外一个文档的内联框架,也是镶嵌在一个网页中的另一个网页。相当网页中又嵌套了一个窗口

iframe - HTML(超文本标记语言) | MDN (opens new window)

src 属性:规定在框架中显示的文档的 URL。
name 属性:规定框架的名称。
width 属性:iframe设置宽度。
height 属性:iframe设置高度。
frameborder 属性:设置框架边框。
scrolling 属性:设置滚动条。

a 标签的 target 属性,可以是某个 iframe 的 name

name
用于定位嵌入的浏览上下文的名称。该名称可以用作 a 标签与 form 标签的 target 属性值,也可以用作 input 标签和 button 标签的 formtarget 属性值,还可以用作 window.open() 方法的 windowName 参数值。

<!-- 此处是一个内嵌框架:地址为百度,宽度1200 高度500 无滚动条 框架边框为0 -->
<iframe src="http://www.baidu.com"
    name="baiduIframe"
    width="1200"
    height="500"
    frameborder="0"
    scrolling="no">
</iframe>
更新时间: Wednesday, May 12, 2021 23:10