WEB前端第五课——HTML表单 / 开普饭

1.<iframe></iframe>标签

　　iframe(inner frame)为内联框架，iframe元素是可以创建包含另外一个文档的行内框架，是body 的子集

　　常用属性：

width 设置内联框架的宽度
height 设置内联框架的高度
name 设置框架的名称
src 设置页面内容的路径
scrolling 规定在iframe中是否显示滚动条（yes/no/auto）
frameborder 规定是否显示iframe边框（1默认有边框，0）

　　iframe语法示例

<!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”，在表单数据发送前对所有字符编码

　　　　　　语法示例：

<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>标签，创建下拉框

　　语法示例

<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的属性值必须相同）

　　语法示例：

<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的提示信息

　　语法示例：

<fieldset>
        <legend>健康信息</legend>
        身高：<input type="text"><br>
        体重：<input type="text">
    </fieldset>

WEB前端第五课——HTML表单

相关推荐