# 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>
# 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>