首页 > 网站开发 > JavaScript教程 >
-
WEB前端第五课——HTML表单
1.<iframe></iframe>标签
iframe(inner frame)为内联框架，iframe元素是可以创建包含另外一个文档的行内框架，是body 的子集
常用属性：
- width 设置内联框架的宽度
- height 设置内联框架的高度
- name 设置框架的名称
- src 设置页面内容的路径
- scrolling 规定在iframe中是否显示滚动条（yes/no/auto）
- frameborder 规定是否显示iframe边框（1默认有边框，0）
iframe语法示例
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>iframe框架测试</title></head><body> <iframe src="" name="topframe" frameborder="0" width="100%" height="300px" >需要的文本</iframe> <a href="http://www.baidu.com" target="topframe">百度</a> <a href="http://www.sina.com.cn" target="topframe">新浪</a></body></html> |
<!-- ######################################################################################################## -->
<body>
<iframe src="0718水平导航栏.html" name="topframe" frameborder="1px" width="1570px" height="100px" ></iframe>
<iframe src="z-test.html" name="leftframe" frameborder="1px" width="266px" height="670px"></iframe>
<iframe src="0718展示网页.html" name="rightframe" frameborder="1px" width="1300px" height="670opx"></iframe>
</body>
2.<form></form>标签
form标签用于创建HTML表单，表单一般应该包含用户填写信息的输入框和提交信息的按钮，即控件
常用属性：
name，表单提交时的名称
action，提交表单的目标地址URL
method，表单提交方式，规定用于发送form-data的HTTP方法，参数值包括 get 和 post，默认未get
get和post的区别：
get提交的数据URL中可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
get最多提交1K数据，post理论上没有限制
get提交的数据在浏览器历史记录中，安全性不好，但速度相对较快
enctype，规定发送表单数据到服务器之前如何对其进行编码，
属性值包含"multipart/form-data"（不对字符编码）、“application/x-www-form-urlencoded”（对所有字符编码）、text/plain（空格转换为“+”但不对特殊字符编码）
3.form表单常用元素input
input为单标签，<input type="" name="" value=""/>，常用属性：
type（默认为text）
text，定义单行文本输入字段，默认宽度为20个字符
password，定义密码字段，该字段中的字符被掩码
button，定义可点击的按钮，多数情况下用于启动JavaScript脚本
checkbox，定义复选框
radio，定义单选按钮，必须通过相同的name属性值来达到单选的控制效果
submit，定义提交按钮，提交按钮会把表单数据发送到服务器
reset，定义重置按钮，重置按钮会清除表单中所有数据
image，定义图像形式的提交按钮
hidden，定义隐藏的输入字段
file，定义输入字段和“浏览”按钮，供文件上传
★★type值为file时的input要注意以下几点：
form表单的method值要为post
form属性必须设置enctype="multipart/form-data"，不对字符编码，这个属性说明文件以二进制方式传输，因为计算机最底层是以二进制显示和传输
enctype默认属性值为“application/x-www-form-urlencoded”，在表单数据发送前对所有字符编码
语法示例：
|
1
2
3
|
<form action="" name="" method="post" enctype="multipart/form-data"> <input type="file" name="bigfile"></form> |
name，input元素的名称
value，规定input元素的值
width / height，设置input字段宽度/高度，适用于“type=image”
checked，规定次input元素在首次加载时默认选中
readonly，规定input字段为只读项
required，规定input字段为必填项
4.<select></select>标签，创建下拉框
语法示例
|
1
2
3
4
5
|
<select name=""> <option value="">显示文本</option> <option value="">显示文本</option> <option value="">显示文本</option></select> |
<select>常用属性：
name，规定下拉列表的名称
size，规定下拉列表中每屏可见选项的数目
mutiple，规定可选多个选项
disabled，规定禁用该下拉列表
required，规定字段为必填项
<option>常用属性：
value，定义<option>选项的值，与显示文本不同，value值是真正发送至服务器的内容
select，规定首次进入页面时，默认选中该项option
<optgroup>可以作为<option>的父级元素配合使用，label是optgroup的必须属性，用于描述选项组或命名
5.<textarea></textarea>多行文本框标签
常用属性：
name，定义文本区的名称
cols，定义文本区内的可见宽度
rows，定义文本区内的可见行数
wrap，定义在表单提交时，文本区域中的文本如何换行
有hard和soft两个属性值，
wrap=“hard”，提交表单时，textarea中的文本换行（包含换行符），此时必须规定“cols”属性值
wrap=“soft”，提交表单时，textarea中的文本不换行，wrap的默认值为soft
6.<label></label>标签为input元素定义标注
<label>是input的描述，本身不具有特定效果，但和<input>标签配合使用可以提升用户体验，用户不用必须点击到按钮，而是点击文字也可以选中，如记住密码复选框、性别单选按钮等
使用方法由两种：一种是<label>标签直接包裹<input>标签，另一种是通过<label>的for属性指向按钮的id进行绑定（for和id的属性值必须相同）
语法示例：
|
1
2
3
4
5
6
7
8
9
10
11
|
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male"/> <label for="female">Female</label> <input type="radio" name="sex" id="female"/></form>或者 <br/><form> <label><input type="radio" name="sex">Male</label> <label><input type="radio" name="sex">Female</label></form> |
7.<fieldset></fieldset>标签可将表单内的相关元素分组，是块级元素
通常和<legend>标签一起使用，legend用于定义fieldset的提示信息
语法示例：
|
1
2
3
4
5
|
<fieldset> <legend>健康信息</legend> 身高：<input type="text"><br> 体重：<input type="text"></fieldset> |
本文链接：https://www.cnblogs.com/husa/p/13329349.html
